---
title: 码场悟道
categories:
- Front-End
status: doing
---
# 模板引擎
严格的模板引擎的定义，输入模板字符串 + 数据，得到渲染过的字符串。实现上，从正则替换到拼 function 字符串到正经的 AST 解析各种各样，但从定义上来说都是差不多的。字符串渲染的性能其实也就在后端比较有意义，毕竟每一次渲染都是在消耗服务器资源，但在前端，用户只有一个，几十毫秒的渲染时间跟请求延迟比起来根本不算瓶颈。倒是前端的后续更新是字符串模板引擎的软肋，因为用渲染出来的字符串整个替换 innerHTML 是一个效率很低的更新方式。所以这样的模板引擎如今在纯前端情境下已经不再是好的选择，意义更多是在于方便前后端共用模板。
# 古老数据渲染 vm 的方式
这种写法，弊端太多了，玩具车
```html
Document
```
# mustache 原理
- 1、先把模板字符串编译成 tokens(代号)
- 2、根据 tokens，结合数据渲染成 dom
> 本质上，tokens 是一个 js 嵌套数组没事模板字符串 js 的表示，他是`抽象语法树`，`虚拟节点`的开山鼻祖
假设有这么一个模板字符串
```html
我买了一个{{thing}},好{{mood}}啊
```
会编译成 tokens，如下：
```js
// 这里面每一个数组行都是一个 token，组起来就是 tokens
// html 标签也会被看成纯文本
[
["text", "我买了一个"],
["name", "thing"],
["text", "好"],
["name", "mood"],
["text", "啊
"],
];
```
当模板存在循环式，带层级嵌套，如下：
```html
```
会被编译成
```js
[
["text", ""],
[
"#",
"arr",
[
["text", "li"],
["name", "."],
["text", ""],
],
],
["text", "
{{#students}}
-
学生{{item.name}}的爱好是
{{#item.hobbies}}
- {{.}}
{{/#item.hobbies}}
{{/#students}}
```
会被编译成
```js
[
["text", ""],
[
"#",
"students",
null,
null,
[["text", "- 学生"], ["name", "name"], ["text", "的爱好是
"], ["#", "hobbies", null, null], [
['text','- '],
['name','.'],
['text','
']
]],
['text','
'],
]],
['text','
home
;
};
{
true && ;
}
```
# 使用有意义且易读的变量名
```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
```
## 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;
}
```