1700 lines
36 KiB
Markdown
1700 lines
36 KiB
Markdown
---
|
||
title: 码场悟道
|
||
categories:
|
||
- Front-End
|
||
status: doing
|
||
---
|
||
|
||
# 模板引擎
|
||
|
||
严格的模板引擎的定义，输入模板字符串 + 数据，得到渲染过的字符串。实现上，从正则替换到拼 function 字符串到正经的 AST 解析各种各样，但从定义上来说都是差不多的。字符串渲染的性能其实也就在后端比较有意义，毕竟每一次渲染都是在消耗服务器资源，但在前端，用户只有一个，几十毫秒的渲染时间跟请求延迟比起来根本不算瓶颈。倒是前端的后续更新是字符串模板引擎的软肋，因为用渲染出来的字符串整个替换 innerHTML 是一个效率很低的更新方式。所以这样的模板引擎如今在纯前端情境下已经不再是好的选择，意义更多是在于方便前后端共用模板。
|
||
|
||
# 古老数据渲染 vm 的方式
|
||
|
||
这种写法，弊端太多了，玩具车
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Document</title>
|
||
</head>
|
||
<body>
|
||
<ul id="app"></ul>
|
||
</body>
|
||
<script>
|
||
var arr = [
|
||
{ name: "小明", age: 11, sex: "男" },
|
||
{ name: "小红", age: 22, sex: "女" },
|
||
];
|
||
var listDOM = document.getElementById("app");
|
||
arr.forEach(function (item) {
|
||
let _li = document.createElement("li");
|
||
_li.innerText = item.name;
|
||
listDOM.appendChild(_li);
|
||
});
|
||
</script>
|
||
</html>
|
||
```
|
||
|
||
# mustache 原理
|
||
|
||
- 1、先把模板字符串编译成 tokens(代号)
|
||
- 2、根据 tokens，结合数据渲染成 dom
|
||
|
||
> 本质上，tokens 是一个 js 嵌套数组没事模板字符串 js 的表示，他是`抽象语法树`，`虚拟节点`的开山鼻祖
|
||
|
||
假设有这么一个模板字符串
|
||
|
||
```html
|
||
<h1>我买了一个{{thing}},好{{mood}}啊</h1>
|
||
```
|
||
|
||
会编译成 tokens，如下：
|
||
|
||
```js
|
||
// 这里面每一个数组行都是一个 token，组起来就是 tokens
|
||
// html 标签也会被看成纯文本
|
||
[
|
||
["text", "<h1>我买了一个"],
|
||
["name", "thing"],
|
||
["text", "好"],
|
||
["name", "mood"],
|
||
["text", "啊</h1>"],
|
||
];
|
||
```
|
||
|
||
当模板存在循环式，带层级嵌套，如下：
|
||
|
||
```html
|
||
<div>
|
||
<ul>
|
||
{{#arr}}
|
||
<li>{{.}}</li>
|
||
{{/arr}}
|
||
</ul>
|
||
</div>
|
||
```
|
||
|
||
会被编译成
|
||
|
||
```js
|
||
[
|
||
["text", "<div><ul>"],
|
||
[
|
||
"#",
|
||
"arr",
|
||
[
|
||
["text", "li"],
|
||
["name", "."],
|
||
["text", "</li>"],
|
||
],
|
||
],
|
||
["text", "</ul></div>"],
|
||
];
|
||
```
|
||
|
||
如果是双重循环，带层级嵌套继续加一层，例如：
|
||
|
||
```html
|
||
<div>
|
||
<ol>
|
||
{{#students}}
|
||
<li>
|
||
学生{{item.name}}的爱好是
|
||
<ol>
|
||
{{#item.hobbies}}
|
||
<li>{{.}}</li>
|
||
{{/#item.hobbies}}
|
||
</ol>
|
||
</li>
|
||
{{/#students}}
|
||
</ol>
|
||
</div>
|
||
```
|
||
|
||
会被编译成
|
||
|
||
```js
|
||
[
|
||
["text", "<div><ol>"],
|
||
[
|
||
"#",
|
||
"students",
|
||
null,
|
||
null,
|
||
[["text", "<li>学生"], ["name", "name"], ["text", "的爱好是<ol>"], ["#", "hobbies", null, null], [
|
||
['text','<li>'],
|
||
['name','.'],
|
||
['text','</li>']
|
||
]],
|
||
['text','<ol></li>'],
|
||
]],
|
||
['text','</ol></div>']
|
||
],
|
||
];
|
||
```
|
||
|
||
> 在`mustache.js`中完成上述这一过程的函数`parseTemplate`，可以去找源代码看
|
||
|
||
## tokens 生成算法
|
||
|
||
用简单的模板字符串举例：
|
||
|
||
```html
|
||
我买了一个{{thing}},好{{mood}}啊
|
||
```
|
||
|
||
有一个指针往右遍历，从`我`开始，遍历到`啊`结束，如下：
|
||
|
||
```js
|
||
/**
|
||
*
|
||
* 我买了一个{{thing}},好{{mood}}啊
|
||
* ↑
|
||
*
|
||
* Step1：指针位置 = 1
|
||
*
|
||
* 我买了一个{{thing}},好{{mood}}啊
|
||
* ↑
|
||
*
|
||
* Step2：指针位置 = 2
|
||
*
|
||
* 我买了一个{{thing}},好{{mood}}啊
|
||
* ↑
|
||
*
|
||
* Step3：指针位置 = 4
|
||
*
|
||
* 我买了一个{{thing}},好{{mood}}啊
|
||
* ↑
|
||
*
|
||
* Step4：指针位置 = 11
|
||
*
|
||
* 我买了一个{{thing}},好{{mood}}啊
|
||
* ↑
|
||
*
|
||
* Step5：指针位置 = 15
|
||
*
|
||
* 我买了一个{{thing}},好{{mood}}啊
|
||
* ↑
|
||
*
|
||
* ... while(指针位置 >= 模板字符串.length)
|
||
*
|
||
* /
|
||
```
|
||
|
||
- Step1:
|
||
|
||
指针右移 1 个长度，以指针位置切割，字符串被分成`我`+`买了一个{{thing}},好{{mood}}啊`
|
||
|
||
- Step2:
|
||
|
||
指针右移 1 个长度，以指针位置切割，字符串被分成`我买`+`了一个{{thing}},好{{mood}}啊`
|
||
|
||
- Step3:
|
||
|
||
第一次遇到，通过 `indexOf("{{") == 0` 判断
|
||
|
||
```js
|
||
// 标记为 text 放到 tokens 中
|
||
token.push(["text", "我买了一个"]); // tokens: [['text', '我买了一个']]
|
||
```
|
||
|
||
结束，此时指针位置 = 4
|
||
|
||
- Step4:
|
||
|
||
指针右移 2 个长度，跳过`{{`，暂存此时`pos_last = 6`
|
||
|
||
此时，右边字符串(尾字符串)`thing}},好{{mood}}啊`
|
||
|
||
右移 5 个长度，识别`模板内部数据对象`：
|
||
|
||
```js
|
||
substring(post_last, 6 + 5); // thing 5个长度
|
||
// 标记为 name 放到 tokens 中
|
||
token.push(["name", "thing"]); // tokens: [['text', '我买了一个']], ['name', 'thing']]
|
||
```
|
||
|
||
结束，此时指针位置 = 11
|
||
|
||
- Step5:
|
||
|
||
> 遇到 `}}`，通过 `indexOf("}}") == 0`判断
|
||
|
||
指针右移 2 个长度，跳过`}}`，暂存此时`post_last = 13`，继续右移 2 个长度
|
||
|
||
```js
|
||
substring(post_last, 13 + 2); // ,好 2个长度
|
||
// 标记为 text 放到 tokens 中
|
||
token.push(["text", ",好"]); // tokens: [['text', '我买了一个']], ['name', 'thing'],['text', ',好' ]]
|
||
```
|
||
|
||
> 第二次，遇到 `{{`
|
||
|
||
剩下循环执行就行了，这个过程，我们可以称作`扫描 Scan`
|
||
|
||
## 扫描器 Scanner
|
||
|
||
新建一个 `Scanner.js`，用来扫描模板字符串，实现上面的原理
|
||
|
||
```js
|
||
/**
|
||
* 模板字符串扫描器
|
||
*/
|
||
|
||
class Scanner {
|
||
constructor(templ) {
|
||
this.templ = templ; // 模板字符串
|
||
this.tail = templ; // 尾字符串
|
||
this.pPos = 0; // 指针位置
|
||
}
|
||
|
||
/**
|
||
* 指针跳过模板标签
|
||
* @param {模板语法包围标签} tag
|
||
*/
|
||
jumpTag(tag) {
|
||
if (this.tail.indexOf(tag) === 0) {
|
||
this.pPos += tag.length; // 指针右移 tag.length 个长度
|
||
this.tail = this.templ.substring(this.pPos); // 尾字符串更新
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 指针遇见模板标签 {{
|
||
* @param {模板语法包围标签} tag
|
||
*/
|
||
missTag(tag) {
|
||
let pPos_last = this.pPos;
|
||
while (!this.eof() && this.tail.indexOf(tag) !== 0) {
|
||
this.pPos++;
|
||
this.tail = this.templ.substring(this.pPos);
|
||
}
|
||
return this.templ.substring(pPos_last, this.pPos);
|
||
}
|
||
|
||
eof() {
|
||
return this.pPos >= this.templ.length;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 分析器 Parser
|
||
|
||
调用`Scanner.js`
|
||
|
||
```js
|
||
let tmpl = `我买了一个{{thing}},好{{mood}}啊`;
|
||
// 编译 模板字符串 => tokens
|
||
const Parser = {
|
||
createTokens: (tmpl) => {
|
||
let scanner = new Scanner(tmpl);
|
||
let tokens = [];
|
||
// scanner 循环执行
|
||
while (!scanner.eof()) {
|
||
ctx = scanner.missTag("{{"); // 返回 头字符串
|
||
if (ctx != "") {
|
||
tokens.push(["text", ctx]);
|
||
}
|
||
scanner.jumpTag("{{"); // 跳过 模板字符
|
||
ctx = scanner.missTag("}}"); // 返回 {{ x }}
|
||
if (ctx != "") {
|
||
tokens.push(["name", ctx]);
|
||
}
|
||
scanner.jumpTag("}}");
|
||
}
|
||
return tokens;
|
||
},
|
||
};
|
||
console.log(Parser.createTokens(tmpl));
|
||
// 输出，非常的 奈一丝
|
||
// ["text", "我买了一个"]
|
||
// ["name", "thing"]
|
||
// ["text", ",好"]
|
||
// ["name", "mood"]
|
||
// ["text", "啊"]
|
||
```
|
||
|
||
## 扫描器 Scanner 增强
|
||
|
||
上面的`Parser`只能识别`{{`和`}}`，如果模板语法复杂一点，比如加入 `{{#list}}...{{/list}}`，需要增强`Parser`
|
||
|
||
```js
|
||
const template = `
|
||
哈哈哈
|
||
{{#students}}
|
||
我买了一个 {{ thing }},好{{mood}}啊{{a}}
|
||
{{item.name}}
|
||
{{/students}}
|
||
`;
|
||
const Parser = {
|
||
createTokens: (tmpl) => {
|
||
let scanner = new Scanner(tmpl);
|
||
let tokens = [];
|
||
let ctx = "";
|
||
// scanner 循环执行
|
||
while (!scanner.eof()) {
|
||
ctx = scanner.missTag("{{"); // 返回 头字符串
|
||
if (ctx != "") {
|
||
tokens.push(["text", ctx]);
|
||
}
|
||
scanner.jumpTag("{{"); // 跳过 模板字符
|
||
ctx = scanner.missTag("}}"); // 返回 {{ x }}
|
||
if (ctx != "") {
|
||
switch (ctx[0]) {
|
||
case "#":
|
||
tokens.push(["#", ctx.substr(1)]); // {{# x }}
|
||
break;
|
||
case "/":
|
||
tokens.push(["/", ctx.substr(1)]);
|
||
break;
|
||
default:
|
||
tokens.push(["name", ctx]);
|
||
break;
|
||
}
|
||
}
|
||
scanner.jumpTag("}}");
|
||
}
|
||
return tokens;
|
||
},
|
||
};
|
||
console.log(Parser.createTokens(template));
|
||
|
||
// 输出
|
||
// ["text", "↵ 哈哈哈↵ "]
|
||
// ["#", "students"]
|
||
// ["text", "↵ 我买了一个 "]
|
||
// ["name", " thing "]
|
||
// ["text", ",好"]
|
||
// ["name", "mood"]
|
||
// ["text", "啊"]
|
||
// ["name", "a"]
|
||
// ["text", "↵ "]
|
||
// ["name", "item.name"]
|
||
// ["text", "↵ "]
|
||
// ["/", "students"]
|
||
// ["text", "↵ "]
|
||
```
|
||
|
||
## 栈队列算法
|
||
|
||
上一步最后的输出，只有单层嵌套，如果是两层嵌套怎么办？
|
||
|
||
例如模板语法如下：
|
||
|
||
```js
|
||
var template = `
|
||
哈哈哈
|
||
{{#students}}
|
||
{{#stu}}
|
||
{{stu.name}}买了一个 {{ thing }},好{{mood}}啊{{a}}
|
||
{{/stu}}
|
||
{{item.name}}
|
||
{{/students}}
|
||
`;
|
||
```
|
||
|
||
经过`Parser`处理得到：
|
||
|
||
```js
|
||
/**
|
||
*
|
||
* ["text", "↵ 哈哈哈↵ "]
|
||
* ["#", "students"]
|
||
* ["text", "↵ "]
|
||
* ["#", "stu"]
|
||
* ["text", "↵ "]
|
||
* ["name", "stu.name"]
|
||
* ["text", "买了一个 "]
|
||
* ["name", " thing "]
|
||
* ["text", ",好"]
|
||
* ["name", "mood"]
|
||
* ["text", "啊"]
|
||
* ["name", "a"]
|
||
* ["text", "↵ "]
|
||
* ["/", "stu"]
|
||
* ["text", "↵ "]
|
||
* ["name", "item.name"]
|
||
* ["text", "↵ "]
|
||
* ["/", "students"]
|
||
* ["text", "↵ "]
|
||
*
|
||
* /
|
||
```
|
||
|
||
此时`students`和`stu`都是`#`标记，我们需要利用算法处理他们的嵌套结构，处理成大约如下这样的结构：
|
||
|
||
```js
|
||
/**
|
||
*
|
||
* ["text", "↵ 哈哈哈↵ "]
|
||
* Array(3)
|
||
* "#"
|
||
* "students"
|
||
* Array(5)
|
||
* ["text", "↵ "]
|
||
* ["#", "stu", Array(9)]
|
||
* ["text", "↵ "]
|
||
* ["name", "item.name"]
|
||
* ["text", "↵ "]
|
||
* ["text", "↵ "]
|
||
*
|
||
* /
|
||
```
|
||
|
||
# 常用工具类
|
||
|
||
## 递归
|
||
|
||
```js
|
||
/**
|
||
* {string} dir 递归根目录
|
||
* {object} list 暂存参数
|
||
*/
|
||
const deep = async (dir, list = []) => {
|
||
const dirs = await fs.promises.readdir(dir)
|
||
for (let i = 0; i < dirs.length; i++) {
|
||
const item = dirs[i]
|
||
const itemPath = path.join(dir, item)
|
||
const isDir = fs.statSync(itemPath).isDirectory()
|
||
isDir ? await deep(itemPath, list) : list.push(itemPath)
|
||
}
|
||
return list
|
||
}
|
||
```
|
||
|
||
## 自增id短码
|
||
|
||
用于连接分享
|
||
|
||
```typescript
|
||
const createAscString = (id) => {
|
||
const dictionary = [
|
||
"0123456789",
|
||
"abcdefghigklmnopqrstuvwxyz",
|
||
"ABCDEFGHIGKLMNOPQRSTUVWXYZ",
|
||
];
|
||
let chars = dictionary.join("").split(""),
|
||
radix = chars.length,
|
||
qutient = 1000 * 1000 * 9999 + +id,
|
||
arr = [];
|
||
while (qutient) {
|
||
mod = qutient % radix;
|
||
qutient = (qutient - mod) / radix;
|
||
arr.unshift(chars[mod]);
|
||
}
|
||
return arr.join("");
|
||
};
|
||
|
||
console.log(createAscString(100000000));
|
||
```
|
||
|
||
## 手动实现 eventBus
|
||
|
||
```js
|
||
export default class EventBus {
|
||
constructor() {
|
||
// key-value : eventName-date
|
||
this.callbacks = {};
|
||
}
|
||
|
||
/**
|
||
* 监听事件
|
||
* @param {事件名} eventName
|
||
* @param {回调函数} callback
|
||
*/
|
||
on(eventName, callback) {
|
||
this.checkType(eventName).callbacks[eventName]
|
||
? callback(this.callbacks[eventName])
|
||
: this.error(`The event has not been declared`);
|
||
}
|
||
|
||
/**
|
||
* 注册一个事件
|
||
* @param {事件名} eventName
|
||
* @param {传递的对象} data
|
||
*/
|
||
emit(eventName, data) {
|
||
this.checkType(eventName).callbacks[eventName] = data;
|
||
}
|
||
|
||
/**
|
||
* 注销事件，不传参数默认注销全部事件
|
||
* @param {事件名} eventName
|
||
*/
|
||
off(eventName) {
|
||
eventName
|
||
? this.checkType(eventName).removeEvent(eventName)
|
||
: this.emptyEvent();
|
||
}
|
||
|
||
/**
|
||
* 移出事件
|
||
* @param {事件名} eventName
|
||
*/
|
||
removeEvent(eventName) {
|
||
Reflect.deleteProperty(this.callbacks, eventName);
|
||
}
|
||
|
||
/**
|
||
* 清空全部事件
|
||
*/
|
||
emptyEvent() {
|
||
this.callbacks = [];
|
||
}
|
||
|
||
/**
|
||
* 参数类型校验
|
||
* @param {参数} param
|
||
* @param {合法的类型} validType
|
||
*/
|
||
checkType(param, validType = "string") {
|
||
if (typeof param !== validType)
|
||
this.error(`(param, ${param}) should be of ${validType} type`);
|
||
return this; // 缅怀jQ链式调用
|
||
}
|
||
|
||
/**
|
||
* 错误提示
|
||
* @param {提示文字} text
|
||
*/
|
||
error(text) {
|
||
throw new Error(text);
|
||
}
|
||
}
|
||
```
|
||
|
||
调用
|
||
|
||
```js
|
||
// 省略import
|
||
const eventBus = new EventBus();
|
||
eventBus.emit("login", [{ a: 1, d: 2 }]);
|
||
eventBus.on(123, (d) => console.log(d)); // [{...}]
|
||
```
|
||
|
||
## 判断对象是否有某个 key
|
||
|
||
```javascript
|
||
let obj = { alias: "es6" };
|
||
"alias" in obj; // true
|
||
Reflect.has(obj, "alias"); // true
|
||
```
|
||
|
||
## 浏览器
|
||
|
||
## 版本信息
|
||
|
||
```javascript
|
||
window.navigator.userAgent;
|
||
```
|
||
|
||
## 兼容事件绑定
|
||
|
||
```javascript
|
||
/*
|
||
兼容低版本IE，ele为需要绑定事件的元素，
|
||
eventName为事件名（保持addEventListener语法，去掉on），fun为事件响应函数
|
||
*/
|
||
|
||
function addEvent(ele, eventName, fun) {
|
||
ele.addEventListener
|
||
? ele.addEventListener(eventName, fun, false)
|
||
: ele.attachEvent("on" + eventNme, fun);
|
||
}
|
||
```
|
||
|
||
## 数组对象
|
||
|
||
## reduce
|
||
|
||
```javascript
|
||
var arr = [1, 2, 3, 4];
|
||
var sum = arr.reduce(function(prev, cur, index, arr) {
|
||
console.log(prev, cur, index);
|
||
return prev + cur;
|
||
}，0) //注意这里设置了初始值
|
||
console.log(arr, sum);
|
||
|
||
// 求和
|
||
const sum = arr.reduce((p,c) => p+c)
|
||
```
|
||
|
||
## 对象内部根据 key 对 value 进行排序,取前 3
|
||
|
||
```javascript
|
||
let datasource = [
|
||
{ price: 1, alias: "watermelon" },
|
||
{ price: 3, alias: "orange" },
|
||
{ price: 2, alias: "banana" },
|
||
{ price: 4, alias: "apple" },
|
||
];
|
||
// 降序排列
|
||
let compare = (key) => (a, b) => b[key] - a[key];
|
||
let sorted = datasource
|
||
.sort(compare("price"))
|
||
.slice(0, 3)
|
||
.map((i) => i["alias"]);
|
||
// 返回 ["apple", "orange", "banana"]
|
||
```
|
||
|
||
## 随机字符串
|
||
|
||
```javascript
|
||
const getRandomRangeNum = (len = 32) => {
|
||
// 略去不宜辨识字符
|
||
let dictionary = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz";
|
||
let maxPos = dictionary.length;
|
||
let res = "";
|
||
for (let i = 0; i < len; i++) {
|
||
res += dictionary.charAt(Math.floor(Math.random() * maxPos));
|
||
}
|
||
return res;
|
||
};
|
||
```
|
||
|
||
## 类型检测
|
||
|
||
Q：使用`typeof foo === "object"`检测`foo`是否为对象有什么缺点？如何避免？
|
||
|
||
A：用 `typeof` 是否能准确判断一个对象变量，答案是否定的，`null` 的结果也是 `object`，`Array` 的结果也是 `object`，有时候我们需要的是 "纯粹" 的 `object` 对象
|
||
|
||
```js
|
||
Object.prototype.toString.call(obj) === "[object Object]";
|
||
```
|
||
|
||
## 倒计时
|
||
|
||
```javascript
|
||
class Countdown {
|
||
constructor(startNum, endNum, interval) {
|
||
[this.startNum, this.endNum, this.interval] = [startNum, endNum, interval];
|
||
}
|
||
execute() {
|
||
var timer = setTimeout(() => {
|
||
if (this.startNum >= this.endNum) {
|
||
console.log(this.startNum);
|
||
this.startNum -= 1;
|
||
this.execute();
|
||
} else {
|
||
clearTimeout(timer);
|
||
}
|
||
}, this.interval);
|
||
}
|
||
}
|
||
// 实例化调用
|
||
var countdown = new Countdown(5, 0, 1000).execute();
|
||
```
|
||
|
||
## 范围随机数
|
||
|
||
```javascript
|
||
// 能取到 min，取不到 max
|
||
function getRandomRangeNum(min, max) {
|
||
return min + Math.floor(Math.random() * (max - min));
|
||
}
|
||
```
|
||
|
||
## 获取当前月的天数
|
||
|
||
```javascript
|
||
const getCurMonthDays = new Date(
|
||
new Date().getFullYear(),
|
||
new Date().getMonth() + 1,
|
||
0
|
||
).getDate();
|
||
```
|
||
|
||
|
||
# 对象小操作
|
||
|
||
## 去虚假值
|
||
|
||
```js
|
||
let arr4 = ["小明", "小蓝", "", false, " ", undefined, null, 0, NaN, true];
|
||
console.log(arr4.filter(Boolean)); // => ['小明', '小蓝', ' ', true]
|
||
```
|
||
|
||
## 头尾插入
|
||
|
||
效率比 `unshift()` 高
|
||
|
||
```js
|
||
let arr = [1, 2, 3];
|
||
// 头插入
|
||
["haha"].concat(arr);
|
||
// 尾插入
|
||
arr.concat(["haha"]);
|
||
```
|
||
|
||
|
||
## 删除属性
|
||
|
||
```js
|
||
function deleteA(obj) {
|
||
delete obj.A;
|
||
return obj;
|
||
}
|
||
|
||
// 使用解构赋值
|
||
const deleteA = ({ A, ...rest } = {}) => rest;
|
||
```
|
||
|
||
# 生产、加工、消费分离
|
||
|
||
- 从接口拿数据到视图 fetch api
|
||
- 加工 computed
|
||
- 消费 v-for
|
||
|
||
# 元数据
|
||
|
||
```js
|
||
import "reflect-metadata"; // npm install reflect-metadata
|
||
|
||
function Role(name: string): ClassDecorator {
|
||
return (target) => {
|
||
Reflect.defineMetadata("role", name, target);
|
||
};
|
||
}
|
||
|
||
@Role("admin")
|
||
class Post {}
|
||
|
||
const metadata = Reflect.getMetadata("role", Post);
|
||
|
||
Reflect.set(Post, "role2", metadata);
|
||
|
||
console.log(Reflect.get(Post, "role2")); // admin
|
||
```
|
||
|
||
# 防抖与节流
|
||
|
||
在页面上监听诸如`scroll`（页面滚动），`mousemove`（鼠标移动） ，`keydown`， `keyup`， `keypress`（按下键盘）等等一系列事件的时候，我们并不希望频繁的触发这类监听，尤其当请求非常消耗资源时，这种操作会导致服务器性能急剧下降。
|
||
|
||
## Debounce
|
||
|
||
把触发非常频繁的事件合并成一次延迟执行，如果对监听函数使用 100ms 的容忍时间，那么时间在第 3.1s 的时候执行
|
||
|
||
```javascript
|
||
// 默认延时100ms
|
||
function debounce(func, dealy = 100) {
|
||
let timer;
|
||
return function () {
|
||
// 暂存this和参数
|
||
let _this = this;
|
||
let args = arguments;
|
||
// 清除定时器，确保不执行func
|
||
clearTimeout(timer);
|
||
timer = setTimeout(function () {
|
||
func.apply(_this, args);
|
||
}, dealy);
|
||
};
|
||
}
|
||
// 执行函数
|
||
function handler() {
|
||
console.log(`delay 100ms ,then handle`);
|
||
}
|
||
// dom添加监听
|
||
document
|
||
.querySelector("#someNode")
|
||
.addEventListener("scroll", debounce(handler));
|
||
```
|
||
|
||
## Throttle
|
||
|
||
固定函数执行的速率，即所谓的“节流”。设置一个阀值，在阀值内，把触发的事件合并成一次执行；当到达阀值，必定执行一次事件。
|
||
|
||
```javascript
|
||
function throttle(func, delay) {
|
||
let statTime = 0;
|
||
return function () {
|
||
let currentTime = +new Date();
|
||
if (currentTime - statTime > delay) {
|
||
func.apply(this, arguments);
|
||
statTime = currentTime;
|
||
}
|
||
};
|
||
}
|
||
// 执行函数
|
||
function resizeHandler() {
|
||
console.log(`resize`);
|
||
}
|
||
// window添加监听
|
||
window.onresize = throttle(resizeHandler, 300);
|
||
```
|
||
|
||
# this 指向
|
||
|
||
## 全局环境
|
||
|
||
全局环境下，this 始终指向全局对象（window），无论是否严格模式
|
||
|
||
```javascript
|
||
console.log(this === window); // true
|
||
this.a = 37;
|
||
console.log(window.a); // 37
|
||
```
|
||
|
||
## 函数上下文调用
|
||
|
||
- 非严格模式
|
||
|
||
没有被上一级的对象所调用, this 默认指向全局对象 window
|
||
|
||
```javascript
|
||
function f1() {
|
||
return this;
|
||
}
|
||
f1() === window; // true
|
||
```
|
||
|
||
- 严格模式
|
||
|
||
this 指向 undefined
|
||
|
||
```javascript
|
||
function f2() {
|
||
"use strict"; // 这里是严格模式
|
||
return this;
|
||
}
|
||
f2() === undefined; // true
|
||
```
|
||
|
||
## 箭头函数
|
||
|
||
> 箭头函数中，call()、apply()、bind()方法无效
|
||
|
||
在全局代码中，箭头函数被设置为全局对象，总之箭头函数不改变 this 指向
|
||
|
||
```javascript
|
||
var globalObject = this;
|
||
var foo = () => this;
|
||
console.log(foo() === globalObject); // true
|
||
```
|
||
|
||
箭头函数作为对象的方法使用，指向全局 window 对象
|
||
|
||
```javascript
|
||
var obj = {
|
||
i: 10,
|
||
b: () => console.log(this.i, this),
|
||
c: function () {
|
||
console.log(this.i, this);
|
||
},
|
||
};
|
||
obj.b(); // undefined window{...}
|
||
obj.c(); // 10 Object {...}
|
||
```
|
||
|
||
箭头函数可以让 this 指向固化，这种特性很有利于封装回调函数
|
||
|
||
```javascript
|
||
// 总是指向 handler 对象。如果不使用箭头函数则指向全局 document 对象
|
||
var handler = {
|
||
id: "123456",
|
||
|
||
init: function () {
|
||
document.addEventListener(
|
||
"click",
|
||
(event) => this.doSomething(event.type),
|
||
false
|
||
);
|
||
},
|
||
|
||
doSomething: function (type) {
|
||
console.log("Handling " + type + " for " + this.id);
|
||
},
|
||
};
|
||
```
|
||
|
||
# call, apply, bind 与 es6
|
||
|
||
js 的函数继承于`Function.prototype`对象，因此每个函数都会有 apply、call、bind 方法
|
||
|
||
> call 和 apply 的作用，完全一样，唯一的区别就是在参数上面。
|
||
|
||
`call, apply, bind`改变函数中 `this 指向` 的三兄弟，把`this`绑定到第一个参数对象上
|
||
|
||
```javascript
|
||
function displayHobbies(...hobbies) {
|
||
console.log(`${this.name} likes ${hobbies.join(", ")}.`);
|
||
}
|
||
// 下面两个等价
|
||
displayHobbies.call({ name: "Bob" }, "swimming", "basketball", "anime"); // Bob likes swimming, basketball, anime.
|
||
displayHobbies.apply({ name: "Bob" }, ["swimming", "basketball", "anime"]); // Bob likes swimming, basketball, anime.
|
||
```
|
||
|
||
`bind`返回的是一个函数，需要手动执行
|
||
|
||
```js
|
||
var p1 = {
|
||
name: "张三",
|
||
age: 12,
|
||
func: function () {
|
||
console.log(`姓名:${this.name},年龄:${this.age}`);
|
||
},
|
||
};
|
||
|
||
var p2 = {
|
||
name: "李四",
|
||
age: 15,
|
||
};
|
||
|
||
p1.func.bind(p2)(); //姓名:李四,年龄:15
|
||
```
|
||
|
||
# for 循环优化
|
||
|
||
```javascript
|
||
// 每次都要计算array.length
|
||
for (let i = 0; i < array.length; i++) {
|
||
console.log(i);
|
||
}
|
||
|
||
// 使用leng缓存array长度
|
||
for (let i = 0, length = array.length; i < length; i++) {
|
||
console.log(i);
|
||
}
|
||
```
|
||
|
||
# 数组
|
||
|
||
## 扁平化去重升序排列
|
||
|
||
```javascript
|
||
let arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];
|
||
arr.flat(Infinity); // [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]
|
||
|
||
let result = Array.from(new Set(arr.flat(Infinity)).sort((a, b) => a - b));
|
||
```
|
||
|
||
# 前端页面埋点 - 1x1.gif
|
||
|
||
通常用在，统计页面点击，曝光，停留时间，签发……等场景
|
||
|
||
- 比 PNG/JPG 体积小
|
||
- 天然跨域
|
||
|
||
```html
|
||
<button onClick="countClick()">haorooms</button>
|
||
<script>
|
||
function countClick() {
|
||
new Image().src = `./haorooms.gif?${key}=${value}&${Math.random()} `;
|
||
}
|
||
</script>
|
||
```
|
||
|
||
# 事件委托
|
||
|
||
利用冒泡原理，委托父元素执行
|
||
|
||
```html
|
||
<ul>
|
||
<li>苹果</li>
|
||
<li>香蕉</li>
|
||
<li>凤梨</li>
|
||
</ul>
|
||
```
|
||
|
||
```javascript
|
||
document.querySelector("ul").onclick = (event) => {
|
||
let target = event.target;
|
||
if (target.nodeName === "LI") {
|
||
console.log(target.innerHTML);
|
||
}
|
||
};
|
||
```
|
||
|
||
# 构造函数 + 原型模式
|
||
|
||
```javascript
|
||
function Person(name, age, job) {
|
||
this.name = name;
|
||
this.age = age;
|
||
this.job = job;
|
||
}
|
||
Person.prototype.say = function (text) {
|
||
console.log(`${this.name}say:${text}`);
|
||
};
|
||
```
|
||
|
||
# 剩余参数...args
|
||
|
||
剩余参数`args`数个数组，`...`解构符
|
||
|
||
```javascript
|
||
function fun1(param, ...args) {
|
||
alert(args.length);
|
||
}
|
||
```
|
||
|
||
# 跨页面通信
|
||
|
||
- cookie
|
||
- web worker
|
||
- localstorage
|
||
|
||
# iframe 跨域通信和不跨域通信
|
||
|
||
## 不跨域
|
||
|
||
```javascript
|
||
// fatherSay是父页面全局方法
|
||
window.parent.fatherSay();
|
||
// 父页面Dom
|
||
window.parent.document.getElementById("元素id");
|
||
// 副业页面获取frameID为`iframe_ID`的子页面的Dom
|
||
window.frames["iframe_ID"].document.getElementById("元素id");
|
||
```
|
||
|
||
## 跨域 postMessage
|
||
|
||
子页面
|
||
|
||
```javascript
|
||
window.parent.postMessage("hello", "http://127.0.0.1:8089");
|
||
```
|
||
|
||
父页面接受
|
||
|
||
```javascript
|
||
window.addEventListener("message", function (event) {
|
||
alert(123);
|
||
});
|
||
```
|
||
|
||
# 对象类型判断
|
||
|
||
## 数组
|
||
|
||
```javascript
|
||
let arr = [];
|
||
arr instanceof Array; // true
|
||
Array.isArray(arr); // true
|
||
Object.prototype.toString.call(arr); // "[object Array]"
|
||
```
|
||
|
||
# js 单线程，如何异步
|
||
|
||
- 主线程 执行 js 中所有的代码。
|
||
|
||
- 主线程 在执行过程中发现了需要异步的任务任务后扔给浏览器（浏览器创建多个线程执行，顺便创造一个`回调队列`。
|
||
|
||
- 主线程 已经执行完毕所有同步代码。监听`回调队列`一旦 浏览器 中某个线程任务完成将会改变回调函数的状态。主线程查看到某个函数的状态为已完成，就会执行该`回调队列`中对应的回调函数。
|
||
|
||
# 移动端最小触控区域
|
||
|
||
苹果推荐是 44pt x 44pt 「具体看 WWDC 14」,通过`padding`、`margin`、`height`等方式进行点击区域扩展
|
||
|
||
# js 精度问题
|
||
|
||
常用类库：`Math.js`、`Big.js`、`decimal.js`
|
||
|
||
# 冻结 Object. freeze()
|
||
|
||
`const`生命的简单变量不可修改，但是复杂对象可以被修改，`Object. freeze()`：可以冻结对象
|
||
|
||
- 不能添加新属性
|
||
- 不能删除已有属性
|
||
- 不能修改已有属性的可枚举性、可配置性、可写性
|
||
- 不能修改已有属性的值
|
||
- 不能修改原型
|
||
|
||
浅冻结
|
||
|
||
```javascript
|
||
const obj1 = {
|
||
internal: {},
|
||
};
|
||
|
||
Object.freeze(obj1);
|
||
obj1.internal.a = "aValue";
|
||
console.log(obj1.internal.a); // aValue
|
||
```
|
||
|
||
递归冻结
|
||
|
||
```javascript
|
||
function deepFreeze(obj) {
|
||
// 获取定义在obj上的属性名
|
||
var propNames = Object.getOwnPropertyNames(obj);
|
||
// 在冻结自身之前冻结属性
|
||
propNames.forEach(function (name) {
|
||
var prop = obj[name];
|
||
// 如果prop是个对象，冻结它
|
||
if (typeof prop == "object" && prop !== null) deepFreeze(prop);
|
||
});
|
||
return Object.freeze(obj);
|
||
}
|
||
```
|
||
|
||
# Reflect
|
||
|
||
## Reflect.get(target, propertyKey, value[receiver])
|
||
|
||
获取对象身上某个属性的值，类似于 target[name]。
|
||
|
||
## Reflect.set(target, propertyKey, value[receiver])
|
||
|
||
将值分配给属性的函数。返回一个 Boolean，如果更新成功，则返回 true。
|
||
|
||
## Reflect.has(target, propertyKey)
|
||
|
||
判断一个对象是否存在某个属性，和 in 运算符 的功能完全相同。
|
||
|
||
|
||
# if else 优化
|
||
|
||
## 表驱动编程
|
||
|
||
空间换时间，设置`obj={key:value}`，通过`obj[key]`取值
|
||
|
||
```javascript
|
||
calculateGrade(score){
|
||
const table = {
|
||
100: 'A',
|
||
90: 'A',
|
||
80: 'B',
|
||
70: 'C',
|
||
60: 'D',
|
||
others: 'E'
|
||
}
|
||
return table[Math.floor(score/10)*10] || table['others']
|
||
}
|
||
```
|
||
|
||
## 短路运算
|
||
|
||
react 没有`v-if`，运用比较频繁
|
||
|
||
```js
|
||
// 函数组件
|
||
const Home = () => {
|
||
return <div>home</div>;
|
||
};
|
||
{
|
||
true && <Home />;
|
||
}
|
||
```
|
||
|
||
# 使用有意义且易读的变量名
|
||
|
||
```js
|
||
👎 const yyyymmdstr = moment().format("YYYY/MM/DD");
|
||
|
||
👍 const currentDate = moment().format("YYYY/MM/DD");
|
||
```
|
||
|
||
# 使用有意义的变量代替数组下标
|
||
|
||
```js
|
||
👎
|
||
const address = "One Infinite Loop, Cupertino 95014";
|
||
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
|
||
saveCityZipCode(
|
||
address.match(cityZipCodeRegex)[1],
|
||
address.match(cityZipCodeRegex)[2]
|
||
);
|
||
|
||
👍
|
||
const address = "One Infinite Loop, Cupertino 95014";
|
||
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
|
||
const [_, city, zipCode] = address.match(cityZipCodeRegex) || [];
|
||
saveCityZipCode(city, zipCode);
|
||
```
|
||
|
||
# 变量名要简洁
|
||
|
||
```js
|
||
👎
|
||
const Car = {
|
||
carMake: "Honda",
|
||
carModel: "Accord",
|
||
carColor: "Blue"
|
||
};
|
||
function paintCar(car, color) {
|
||
car.carColor = color;
|
||
}
|
||
|
||
👍
|
||
const Car = {
|
||
make: "Honda",
|
||
model: "Accord",
|
||
color: "Blue"
|
||
};
|
||
function paintCar(car, color) {
|
||
car.color = color;
|
||
}
|
||
```
|
||
|
||
# 消除魔术字符串
|
||
|
||
```js
|
||
👎 setTimeout(blastOff, 86400000);
|
||
|
||
👍 const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;
|
||
setTimeout(blastOff, MILLISECONDS_PER_DAY);
|
||
```
|
||
|
||
# 使用默认参数替代短路运算符
|
||
|
||
```js
|
||
👎
|
||
function createMicrobrewery(name) {
|
||
const breweryName = name || "Hipster Brew Co.";
|
||
// ...
|
||
}
|
||
|
||
👍
|
||
function createMicrobrewery(name = "Hipster Brew Co.") {
|
||
// ...
|
||
}
|
||
```
|
||
|
||
# 一个函数
|
||
|
||
```js
|
||
👎
|
||
function emailClients(clients) {
|
||
clients.forEach(client => {
|
||
const clientRecord = database.lookup(client);
|
||
if (clientRecord.isActive()) {
|
||
email(client);
|
||
}
|
||
});
|
||
}
|
||
|
||
👍
|
||
function emailActiveClients(clients) {
|
||
clients.filter(isActiveClient).forEach(email);
|
||
}
|
||
function isActiveClient(client) {
|
||
const clientRecord = database.lookup(client);
|
||
return clientRecord.isActive();
|
||
}
|
||
|
||
---------------------分割线-----------------------
|
||
|
||
👎
|
||
function createFile(name, temp) {
|
||
if (temp) {
|
||
fs.create(`./temp/${name}`);
|
||
} else {
|
||
fs.create(name);
|
||
}
|
||
}
|
||
|
||
👍
|
||
function createFile(name) {
|
||
fs.create(name);
|
||
}
|
||
function createTempFile(name) {
|
||
createFile(`./temp/${name}`);
|
||
}
|
||
```
|
||
|
||
# 函数参数不多于 2 个，如果有很多参数就利用 object 传递，并使用解构
|
||
|
||
```js
|
||
👎
|
||
function createMenu(title, body, buttonText, cancellable) {
|
||
// ...
|
||
}
|
||
createMenu("Foo", "Bar", "Baz", true);
|
||
|
||
👍
|
||
function createMenu({ title, body, buttonText, cancellable }) {
|
||
// ...
|
||
}
|
||
createMenu({
|
||
title: "Foo",
|
||
body: "Bar",
|
||
buttonText: "Baz",
|
||
cancellable: true
|
||
});
|
||
```
|
||
|
||
# 函数名应该直接反映函数的作用
|
||
|
||
```js
|
||
👎
|
||
function addToDate(date, month) {
|
||
// ...
|
||
}
|
||
const date = new Date();
|
||
// It's hard to tell from the function name what is added
|
||
addToDate(date, 1);
|
||
|
||
👍
|
||
function addMonthToDate(month, date) {
|
||
// ...
|
||
}
|
||
const date = new Date();
|
||
addMonthToDate(1, date);
|
||
```
|
||
|
||
# 尽量使用纯函数
|
||
|
||
```js
|
||
👎
|
||
const programmerOutput = [
|
||
{
|
||
name: "Uncle Bobby",
|
||
linesOfCode: 500
|
||
},
|
||
{
|
||
name: "Suzie Q",
|
||
linesOfCode: 1500
|
||
},
|
||
{
|
||
name: "Jimmy Gosling",
|
||
linesOfCode: 150
|
||
},
|
||
{
|
||
name: "Gracie Hopper",
|
||
linesOfCode: 1000
|
||
}
|
||
];
|
||
let totalOutput = 0;
|
||
for (let i = 0; i < programmerOutput.length; i++) {
|
||
totalOutput += programmerOutput[i].linesOfCode;
|
||
}
|
||
|
||
👍
|
||
const programmerOutput = [
|
||
{
|
||
name: "Uncle Bobby",
|
||
linesOfCode: 500
|
||
},
|
||
{
|
||
name: "Suzie Q",
|
||
linesOfCode: 1500
|
||
},
|
||
{
|
||
name: "Jimmy Gosling",
|
||
linesOfCode: 150
|
||
},
|
||
{
|
||
name: "Gracie Hopper",
|
||
linesOfCode: 1000
|
||
}
|
||
];
|
||
const totalOutput = programmerOutput.reduce(
|
||
(totalLines, output) => totalLines + output.linesOfCode,
|
||
0
|
||
);
|
||
```
|
||
|
||
# 不要过度优化
|
||
|
||
```js
|
||
👎
|
||
// 现代浏览器对于迭代器做了内部优化
|
||
for (let i = 0, len = list.length; i < len; i++) {
|
||
// ...
|
||
}
|
||
|
||
👍
|
||
for (let i = 0; i < list.length; i++) {
|
||
// ...
|
||
}
|
||
```
|
||
|
||
|
||
# 关于模块化
|
||
|
||
## 无模块化
|
||
|
||
> 污染全局作用域、维护成本高、依赖关系不明显
|
||
|
||
script 标签引入 js 文件，相互罗列，但是被依赖的放在前面，否则使用就会报错。如下：
|
||
|
||
```js
|
||
<script src="jquery.js"></script>
|
||
<script src="main.js"></script>
|
||
<script src="other1.js"></script>
|
||
<script src="other2.js"></script>
|
||
<script src="other3.js"></script>
|
||
```
|
||
|
||
## CommonJS 规范(同步)
|
||
|
||
该规范最初是用在服务器端的 node 的，它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。实际使用时，用 module.exports 定义当前模块对外输出的接口（不推荐直接用 exports），用 require 加载模块(同步)
|
||
|
||
> module.exports 本身就是一个对象
|
||
|
||
```js
|
||
module.exports = { foo: "bar" }; //true
|
||
module.exports.foo = "bar"; //true。
|
||
```
|
||
|
||
CommonJS 用同步的方式加载模块。在服务端，模块文件都存在本地磁盘，读取非常快，所以这样做不会有问题。但是在浏览器端，限于网络原因，CommonJS 不适合浏览器端模块加载，更合理的方案是使用异步加载，比如下边 AMD 规范。
|
||
|
||
## AMD 规范(RequireJS)
|
||
|
||
承接上文，AMD 规范则是非同步加载模块，允许指定回调函数，AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
|
||
|
||
- `require([module], callback)`：加载模块
|
||
- `define(id, [depends], callback)`：定义模块
|
||
- `require.config()`：配置路径、依赖关系
|
||
|
||
## CMD 规范(SeaJS)
|
||
|
||
CMD 是 在推广过程中对模块定义的规范化产出
|
||
|
||
## ES6 import/export
|
||
|
||
通过 babel 将不被支持的 import 编译为当前受到广泛支持的 AMD 规范
|
||
|
||
# AMD模块化实现
|
||
|
||
## define 函数
|
||
|
||
用来声明模块名`module`，依赖数组`deps`，以及模块的作用`callback`
|
||
|
||
```js
|
||
var module = (function () {
|
||
var stack = {}; //模块存储栈，存的是模块执行后的结果
|
||
|
||
function define(module, deps, callback) {
|
||
stack[module] = callback.apply(null, deps); // 压栈
|
||
console.log(stack); // 查看栈存储的模块
|
||
}
|
||
|
||
return { define: define };
|
||
})();
|
||
```
|
||
|
||
调用`define`试试，发现 `calc`模块被压入了`stack 模块栈中`
|
||
|
||
```js
|
||
module.define("calc", [], function () {
|
||
return {
|
||
first: function (arr) {
|
||
return arr[0];
|
||
},
|
||
};
|
||
});
|
||
// {calc: { first: ƒ }}
|
||
```
|
||
|
||
## deps 依赖(导入)
|
||
|
||
对上面的 `define`函数稍加改造，这一步过程的本质，就是对 deps
|
||
|
||
```js
|
||
var module = (function (window) {
|
||
var stack = {}; //模块存储栈，
|
||
|
||
function define(module, deps, callback) {
|
||
// 把 define 函数依赖数组中的模块从 stack 模块中拿出
|
||
deps.map(function (mod, index) {
|
||
deps[index] = stack[mod]; // 赋值给当前模块的 deps
|
||
});
|
||
stack[module] = callback.apply(null, deps);
|
||
console.log(stack); // 查看栈存储的模块
|
||
}
|
||
|
||
return { define: define };
|
||
})(window);
|
||
|
||
module.define("calc", [], function () {
|
||
return {
|
||
first: function (arr) {
|
||
return arr[0];
|
||
},
|
||
};
|
||
});
|
||
|
||
module.define("number", ["calc"], function (calc) {
|
||
return {
|
||
res: calc.first([4, 3, 2, 1]), //4
|
||
};
|
||
});
|
||
|
||
// 此时 stack 打印的结果为
|
||
//> calc: {first: ƒ}
|
||
//> number: {res: 4}
|
||
```
|
||
|
||
> 从本质上看，define 函数的第二个参数 deps 数组，相当于 import 导入，并且如果第三个参数 callback 采用 `return { }`，也就相当于 export 导出
|
||
|
||
## 老生常谈的指针
|
||
|
||
说到底，`stack`中 `a模块` export 是一个指针，`{a:value}`(内存地址)，所以，`b 模块`会改变`a.a`的值，这点和 `cmd`不同
|
||
|
||
```js
|
||
module.define("a", [], function () {
|
||
return {
|
||
a: 1,
|
||
};
|
||
});
|
||
module.define("b", ["a"], function (a) {
|
||
a.a = 2;
|
||
});
|
||
module.define("c", ["a"], function (a) {
|
||
console.log(a.a); // 2
|
||
});
|
||
```
|
||
|
||
|
||
# 缘起 Object.defineProperty()
|
||
|
||
给`目标对象`上定义一个新属性，或者修改`目标对象`属性，并且返回新对象
|
||
|
||
# 上帝的钥匙 get & set
|
||
|
||
属性的`getter`函数，如果没有 `getter`则尾 `undefined`。当访问该属性时，会调用此函数.
|
||
|
||
```js
|
||
let obj = {};
|
||
|
||
Object.defineProperty(obj, "a", {
|
||
get() {
|
||
return 7;
|
||
},
|
||
set(val) {
|
||
console.log(`FAILED！改变 a 属性，新值为：${val}，但是被重写 set 劫持了`);
|
||
},
|
||
});
|
||
|
||
console.log(obj.a);
|
||
obj.a = 4;
|
||
```
|
||
|
||
> 上帝的钥匙被找到了
|
||
|
||
劫持！劫持！还是 TMD 劫持！
|
||
|
||
```js
|
||
let obj = {};
|
||
let tempValue = 0;
|
||
|
||
Object.defineProperty(obj, "a", {
|
||
get() {
|
||
return tempValue;
|
||
},
|
||
set(newValue) {
|
||
tempValue = newValue;
|
||
},
|
||
});
|
||
|
||
console.log(obj.a); // 0
|
||
obj.a = 4;
|
||
console.log(obj.a); // 4
|
||
```
|
||
|
||
# 封装 defineReactive(obj, prop, val)
|
||
|
||
> 这里 defineReactive 第三个参数 val 替代了上一步中全局变量`tempValue`，对于 get()、set()来说，访问到了其他函数内部的变量，所以形成了闭包
|
||
|
||
```js
|
||
function defineReactive(obj, prop, val) {
|
||
Object.defineProperty(obj, prop, {
|
||
get() {
|
||
console.log(`劫持，你访问了${prop}属性`);
|
||
return val;
|
||
},
|
||
set(newValue) {
|
||
if (val === newValue) return;
|
||
console.log(`劫持，你改变了${prop}属性`);
|
||
val = newValue;
|
||
},
|
||
});
|
||
}
|
||
|
||
let obj = {};
|
||
defineReactive(obj, "a", 4);
|
||
|
||
console.log(obj.a); // 劫持，你访问了a属性 4
|
||
obj.a = 7; // 劫持，你改变了a属性
|
||
console.log(obj.a); // 劫持，你访问了a属性 7
|
||
```
|
||
|
||
# 递归侦测
|
||
|
||
```js
|
||
let obj = { a: { b: { c: {} } } };
|
||
defineReactive(obj, "a", 4);
|
||
```
|
||
|
||
> 如何自动让`obj`对象的全部属性都`reactive`呢？
|
||
|
||
```js
|
||
let obj = {
|
||
a: {
|
||
b: {
|
||
c: 5,
|
||
},
|
||
},
|
||
d: 4,
|
||
};
|
||
```
|
||
|
||
定义个方法`observe`，递归 `obj` 的每一层的每个 `prop`，检测是否有`__ob__`，如果没有，`defineReactive`，并且挂一个`Observer`实例在这个`props`上，例如：
|
||
|
||
`Observer对象`
|
||
|
||
```js
|
||
class Observer {
|
||
constructor(value) {
|
||
def(value, "__ob__", this, false); // 不可枚举，不能给__ob__添加__ob__
|
||
this.walk(value);
|
||
}
|
||
// 遍历每一个 prop的 value
|
||
walk(value) {
|
||
for (let prop in value) {
|
||
defineReactive(value, prop);
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
`defineReactive.js`
|
||
|
||
```js
|
||
export default function defineReactive(obj, prop, val) {
|
||
if (arguments.length === 2) val = obj[prop]; // 如果2个参数
|
||
let childNode = observe(val);
|
||
Object.defineProperty(obj, prop, {
|
||
enumerable: true,
|
||
configurable: true,
|
||
get() {
|
||
console.log(`你访问了${prop}属性`);
|
||
return val;
|
||
},
|
||
set(newValue) {
|
||
if (val === newValue) return;
|
||
console.log(`你改变了${prop}属性`);
|
||
val = newValue;
|
||
childNode = observe(newValue);
|
||
},
|
||
});
|
||
}
|
||
```
|
||
|
||
`observe.js`
|
||
|
||
```js
|
||
/**
|
||
* 检测 obj 身上有没有 __ob__(Observer 实例)
|
||
* @param {*} value
|
||
* @returns
|
||
*/
|
||
export default function observe(value) {
|
||
if (typeof value != "object") return;
|
||
let ob;
|
||
//! 用__ob__是为了属性不重名，被覆盖
|
||
if (typeof value.__ob__ != "undefined") {
|
||
ob = value.__ob__;
|
||
} else {
|
||
ob = new Observer(value);
|
||
}
|
||
return ob;
|
||
}
|
||
```
|