Web前端 | Olimi’s Blog

在 JavaScript 中，每个函数都有一个默认的 prototype 属性，它是一个空对象。当你创建一个新的函数时，JS 引擎会为该函数自动创建一个默认的 prototype 对象，并且为这个对象添加一个 constructor 属性，该属性指向这个函数本身。也就是说，Foo.prototype.constructor === Foo。可以使用 Object.getPrototypeOf(obj) 方法或者 obj.proto 属性来获取一个对象的原型。因为 prototype 对象也是普通对象，所以它也有原型。在 JavaScript 中，通常将对象的原型称为 proto，因为这个属性实际上是 ECMAScript 规范中定义的内部属性，不过现在它已经成为了 JS 的标准特性之一。

new的时候就是通过该函数对应的prototype 对象，调用其中的constructor 函数。这个constructor默认就是该函数，但可以自行修改为别的，或者直接自定义一个新的prototype。

所以定义的函数，也能称为构造函数，按照标准，定义成构造函数的，要大写开头。对构造函数直接调用也会显示warning，Constructor call without new。

知识点

…介绍和使用

扩展运算符 ... 是一种 JavaScript 语法，用于将一个可迭代对象（如数组、字符串、对象等）展开成一个更长的序列。它可以用于函数调用、数组字面量、对象字面量等多种场合。

下面介绍几种常见的使用方式。

用于函数调用

在函数调用时，扩展运算符可以将一个数组展开成一个参数序列。例如：

上面的代码中，...arr 将数组 arr 展开成参数序列，相当于直接调用了 myFunc(1, 2, 3)。

用于数组字面量

在数组字面量中，可以使用扩展运算符将一个数组展开成另一个数组的一部分。例如：

上面的代码中，...arr1 和 ...arr2 将两个数组展开成了新数组 arr3 的一部分。

用于对象字面量

在对象字面量中，可以使用扩展运算符将一个对象展开成另一个对象的一部分。例如：

上面的代码中，...obj1 和 ...obj2 将两个对象展开成了新对象 obj3 的一部分。

用于解构赋值

在解构赋值中，可以使用扩展运算符将一个数组或对象的一部分解构出来。例如：

上面的代码中，...rest 将数组或对象的一部分解构出来，并赋值给变量 rest。

扩展运算符是一种方便实用的语法，可以简化代码，提高代码的可读性和可维护性。在实际开发中，建议根据需要使用扩展运算符，以提高代码的效率和质量。

区分{}和[]，前者是一个对象，后者是一个数组！

小的问题

string to date。竟然没有很好的转换，可以自己设置格式那种，要自己手写。讨论here。

React

Hook

教程：React Hooks 入门教程 - 阮一峰的网络日志 (ruanyifeng.com)

hook ref：Built-in React Hooks – React --- React 内置的 Hooks。

组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。 组件的最佳写法应该是函数，而不是类。

Hook就是解决纯函数不能包含状态，也不支持生命周期方法的问题。

所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。

内置的钩子

useState - 用于在函数组件中添加状态管理。

useEffect - 在组件渲染后执行副作用操作，例如订阅数据、发送网络请求等。

useContext - 用于在组件树中共享数据。

useReducer - 用于管理复杂的状态逻辑。

useCallback - 用于缓存函数并避免不必要的重新渲染。

useMemo - 用于缓存计算结果并避免不必要的重新计算。

比如useState，示例:

useState()这个函数接受状态的初始值，作为参数，上例的初始值为按钮的文字。该函数返回一个数组，数组的第一个成员是一个变量（上例是buttonText），指向状态的当前值。第二个成员是一个函数，用来更新状态，约定是set前缀加上状态的变量名（上例是setButtonText）。

接口示例：

useState：

接口：

返回值：

state：当前状态的值。

setState：更新状态的函数。

useEffect：

接口：

返回值：

无。

ant design

ant design pro: 开箱即用的中台前端/设计解决方案 - Ant Design Pro

ant design：https://ant.design/components/overview-cn/

pro-components: https://procomponents.ant.design/components

umi: https://v3.umijs.org/zh-CN/docs

使用：

面包屑：可以直接套用PageContainer，自动生成。

ProTable使用问题：

ant protable 选择一行就会全选。原因：没有设置好rowKey，所以每行数据不能唯一标识。解决：设置rowKey="name"。

工程问题

webstrom启用自动pretty和eslint

选择 "Languages & Frameworks" -> "JavaScript"（或者 "TypeScript"，如果你在 TypeScript 项目中使用 Prettier）。
选择 "Prettier" 选项卡，然后选择 "Prettier package" 为 "Local"，并指定 Prettier 的安装路径。选择auto自动找路径即可。
找到 "Languages & Frameworks" -> "JavaScript" -> "Code Quality Tools" -> "ESLint"。

JB系软件。一段时间后，无法从系统粘贴板中读取进行粘贴。解决方案：在IDE中重新Ctrl+C复制一点东西就正常了。讨论：here。

前端的大坑，缓存问题。UMI+MSFU热更新，经常出现更新了代码加载不出来（特别是代码更新到使用的API）。不行就删掉.umi文件夹，然后重新生成。

“Module ‘xxx‘ does not exist in container“

基于MSFU等可以实现热更新，但是有时候代码更新了却看不到新的结果。记得用Ctrl+F5强制刷新缓存。

跨域请求：前端向不同的域（协议、域名、端口不同）发送请求（XHR、fetch），触发浏览器的同域策略判断。需要后端返回orign告诉浏览器前端的域是被允许的。参考here。

后端使用spring直接添加一个注释在控制器中：