尤雨溪Frontend Master课程笔记

1.响应式

目的

实现一个神奇的函数auto，会在state.count改变后，自动运行里面的函数

1
2
3
4
5

autoRun(() => {
    document.getElementById("app").innerText = state.count;
})

state.count++; // 重新执行autoRun内的函数

MPA首屏加载速率优化实战

背景

​ 学校实验室的项目，因为学校只开放给我们一个端口，所以只能把后台管理和学生端合并成多页应用，我是做后台管理的，老师要求某个功能要加上代码高亮，在全局引入highlight.js后发现首屏加载速率不行了，记录一下发现更多问题并优化的过程。

setInterval很少使用在生成环境下，因为有如下几个缺点

缺点一：setInterval无视代码错误

setInterval执行的代码即使代码报错，它还会持续不断（不管不顾）地调用该代码

缺点二：setInterval无视网络延迟

假设你每隔一段时间就通过Ajax轮询一次服务器，看看有没有新数据（注意：如果你真的这么做了，那恐怕你做错了；建议使用“补偿性轮询”（backoff polling））。而由于某些原因（服务器过载、临时断网、流量剧增、用户带宽受限，等等），你的请求要花的时间远比你想象的要长。但setInterval不在乎。它仍然会按定时持续不断地触发请求，最终你的客户端网络队列会塞满Ajax调用。

1. CommonJS

node.js的实现中采用了CommonJS标准的一部分，并在其基础上进行了一些调整

使用方式

使用require和exports或者module.exports进行模块的导入导出

1
2
3
4
5
6
7
8
9
10

// node.js为了简化操作，有var exports = module.exports
// 两者一致，那就说明，我可以使用任意一方来导出内部成员
console.log(exports === module.exports) // true

// 导出的对象近似于此种形式，exports相当于module.exports的引用
// var module = {
//   exports: {
//     foo: 'bar',
//   }
// }

让代码在网页不刷新的前提下得到最新的改动，这就是Hot Module Replacement，HMR

由Rollup提出，为了消除无用的JavaScript代码而被引入的，对于es模块依赖关系确定的，就可以进行静态分析，CJS不可以

关于loader的作用和配置方法，在 初识webpack 这篇文章中已经讲过，本篇文章会讲常用的一些loader，并自己实现一个loader函数。

打包后的文件后缀，通常用于做版本管理，文件被修改后打包出来的文件指纹不同，浏览器只会下载这些不同的文件，没被修改的文件从缓存读取，加快浏览速度

1. 安装

1

npm install webpack webpack-cli --save-dev

webpack是核心模块，webpack-cli则是命令行工具

然后在根目录下创建webpack.config.js来配置webpack

深拷贝、浅拷贝

1. 区别

浅拷贝：复制基本类型和引用类型

深拷贝：引用类型所指向的内存空间也完全拷贝