12.6习题

1.发布订阅者

我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器（发布者）Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，view初始化，为watcher绑定相应的更新函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的更新函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并初始化模板数据以及初始化相应的订阅器。
https://www.cnblogs.com/ceceliahappycoding/p/10604209.html

2.webpack

https://juejin.im/post/5aa3d2056fb9a028c36868aa

https://blog.csdn.net/weixin_40013817/article/details/102483676

Entry：指定webpack开始构建的入口模块，从该模块开始构建并计算出直接或间接依赖的模块或者库
Output：告诉webpack如何命名输出的文件以及输出的目录
Loaders：由于webpack只能处理javascript，所以我们需要对一些非js文件处理成webpack能够处理的模块，比如sass文件.包含
1、file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
2、url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
3、source-map-loader：加载额外的 Source Map 文件，以方便断点调试
4、image-loader：加载并且压缩图片文件
5、babel-loader：把 ES6 转换成 ES5
6、css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
7、style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
8、eslint-loader：通过 ESLint 检查 JavaScript 代码
Plugins：插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。但也是最复杂的一个。比如对js文件进行压缩优化的UglifyJsPlugin插件
resolve：可以配置解析模板的可选项，包含可以配置文件的扩展名extensions，用以在导入的时候省略扩展名，
resolve: { // 解析模块的可选项
extensions: [".js", “.json”, “.jsx”, “.css”], // 用到的文件的扩展
alias: { // 模块别名列表
‘@’: resolve(‘src’)
},
}

3. call，apply

https://www.jianshu.com/p/aa2eeecd8b4f

function fruits(){}
            
fruits.prototype = {
    color: "red",
    say: function(){
        console.log("My color is " + this.color);
    }
};

var another = {
    color: "yellow"
};

var apple = new fruits;
apple.say();                //My color is red
apple.say.call(another);    //My color is yellow
apple.say.apply(another);   //My color is yellow

区别：参数书写方式不同
call(thisObj, arg1, arg2, arg3, arg4);
apply(thisObj, [args]);
thisObj：call和apply第一个参数是一样的，该参数将替代Function类里面的this对象。
arg1,arg2…：是一个个的参数，
args：一个数组或类数组，是一个参数列表。

用法1：改变函数作用域

var name = "小白";
var obj = {
    name: "小红"
};

function sayName() {
    return this.name;
}
console.log(sayName.call(this));   //小白
console.log(sayName.call(obj));    //小红

防抖和节流

https://juejin.im/post/5c87b54ce51d455f7943dddb#chapter-one
节流：指定时间间隔内只会执行一次任务。
防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

重绘和回流

https://segmentfault.com/a/1190000018452924
回流 （Reflow ）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流；

重绘（Repaint ）:当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘。
回流必将引起重绘，而重绘不一定会引起回流。
一、 CSS中避免回流、重绘
1.尽可能在DOM树的最末端改变class
2.避免设置多层内联样式
3.动画效果应用到position属性为absolute或fixed的元素上
4.避免使用table布局
5.使用css3硬件加速，可以让transform、opacity、filters等动画效果不会引起回流重绘

二、 JS操作避免回流、重绘
1.避免使用JS一个样式修改完接着改下一个样式，最好一次性更改CSS样式，或者将样式列表定义为class的名称
2.避免频繁操作DOM，使用文档片段创建一个子树，然后再拷贝到文档中
3.先隐藏元素，进行修改后再显示该元素，因为display:none上的DOM操作不会引发回流和重绘
4.避免循环读取offsetLeft等属性，在循环之前把它们存起来
5.对于复杂动画效果,使用绝对定位让其脱离文档流，否则会引起父元素及后续元素大量的回流