函数防抖和函数节流

转载自：https://zhuanlan.zhihu.com/p/38313717

函数防抖与节流是很相似的概念，但它们的应用场景不太一样。

我们先从概念上深刻理解它们。

先说函数防抖，debounce。其概念其实是从机械开关和继电器的“去弹跳”（debounce）衍生 出来的，基本思路就是把多个信号合并为一个信号。

单反也有相似的概念，在拍照的时候手如果拿不稳晃的时候拍照一般手机是拍不出好照片的，因此智能手机是在你按一下时连续拍许多张， 能过合成手段，生成一张。翻译成JS就是，事件内的N个动作会变忽略，只有事件后由程序触发的动作只是有效。

实现思路如下，将目标方法（动作）包装在setTimeout里面，然后这个方法是一个事件的回调函数，如果这个回调一直执行，那么这些动作就一直不执行。为什么不执行呢，我们搞了一个clearTimeout，这样setTimeout里的方法就不会执行！ 为什么要clearTimeout呢，我们就需要将事件内的连续动作删掉嘛！待到用户不触发这事件了。那么setTimeout就自然会执行这个方法。

那么这个方法用在什么地方呢，就是用于input输入框架的格式验证，假如只是验证都是字母也罢了，太简单了，不怎么耗性能，如果是验证是否身份证，这性能消耗大，你可以隔170ms才验证一次。这时就需要这个东西。或者你这个是自动完全，需要将已有的输入数据往后端拉一个列表，频繁的交互，后端肯定耗不起，这时也需要这个，如隔350ms。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function debounce(func, delay) {
    var timeout;
    return function(e) {
        console.log("清除",timeout,e.target.value)
        clearTimeout(timeout);
        var context = this, args = arguments
        console.log("新的",timeout, e.target.value)
        timeout = setTimeout(function(){
          console.log("----")
          func.apply(context, args);
        },delay)
    };
};

var validate = debounce(function(e) {
    console.log("change", e.target.value, new Date-0)
}, 380);

// 绑定监听
document.querySelector("input").addEventListener('input', validate);

图一

这个保证了正常的用户每输入1，2个字符就能触发一次。如果用户是输入法狂魔，也可以狠制他每输入3～6个字符触发一次。

这个方法的重点是，它在用户不触发事件的时，才触发动作，并且抑制了本来在事件中要执行的动作。

其他应用场合：提交按钮的点击事件。

再看节流，throttle。节流的概念可以想象一下水坝，你建了水坝在河道中，不能让水流动不了，你只能让水流慢些。换言之，你不能让用户的方法都不执行。如果这样干，就是debounce了。为了让用户的方法在某个时间段内只执行一次，我们需要保存上次执行的时间点与定时器。

1
2
<div id='panel' style="background:red;width:200px;height:200px">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function throttle(fn, threshhold) {
 var timeout
 var start = new Date;
 var threshhold = threshhold || 160
 return function () {

 var context = this, args = arguments, curr = new Date() - 0
 
 clearTimeout(timeout)//总是干掉事件回调
 if(curr - start >= threshhold){ 
     console.log("now", curr, curr - start)//注意这里相减的结果，都差不多是160左右
     fn.apply(context, args) //只执行一部分方法，这些方法是在某个时间段内执行一次
     start = curr
 }else{
 //让方法在脱离事件后也能执行一次
     timeout = setTimeout(function(){
        fn.apply(context, args) 
     }, threshhold);
    }
  }
}
var mousemove = throttle(function(e) {
 console.log(e.pageX, e.pageY)
});

// 绑定监听
document.querySelector("#panel").addEventListener('mousemove', mousemove);

图二

函数节流会用在比input, keyup更频繁触发的事件中，如resize, touchmove, mousemove, scroll。throttle 会强制函数以固定的速率执行。因此这个方法比较适合应用于动画相关的场景。

如果还是不能完全体会 debounce 和 throttle 的差异，可以到 这个页面 看一下两者可视化的比较。

图三

博客

require() 源码解读

部分转载自： http://www.ruanyifeng.com/blog/2015/05/require.html

一. require() 的基本用法

分析源码之前，先介绍 require 语句的内部逻辑。如果你只想了解 require 的用法，只看这一段就够了。

下面的内容翻译自《Node使用手册》。

当 Node 遇到 require(X) 时，按下面的顺序处理。
（1）如果 X 是内置模块（比如 require(‘http’）)
　　 a. 返回该模块。
　　 b. 不再继续执行。
（2）如果 X 以 “./“ 或者 “/“ 或者 “../“ 开头
　　 a. 根据 X 所在的父模块，确定 X 的绝对路径。
　　 b. 将 X 当成文件，依次查找[X, X.js, X.json, X.node]文件，只要其中有一个存在，就返回该文件，不再继续执行。
　　 c. 将 X 当成目录，依次查找[X/package.json（main字段）, X/index.js, X/index.json, X/index.node]文件，只要其中有一个存在，就返回该文件，不再继续执行。
（3）如果 X 不带路径
　　 a. 根据 X 所在的父模块，确定 X 可能的安装目录。
　　 b. 依次在每个目录中，将 X 当成文件名或目录名加载。
（4） 抛出 “not found”

请看一个例子。

(1) 当前脚本文件 /home/ry/projects/foo.js 执行了 require(‘bar’) ，这属于上面的第三种情况。Node 内部运行过程如下。
首先，确定 x 的绝对路径可能是下面这些位置，依次搜索每一个目录。

1
2
3
4
/home/ry/projects/node_modules/bar
/home/ry/node_modules/bar
/home/node_modules/bar
/node_modules/bar

(2) 搜索时，Node 先将 bar 当成文件名，依次尝试加载下面这些文件，只要有一个成功就返回。

1
2
3
4
bar
bar.js
bar.json
bar.node

(3) 如果都不成功，说明 bar 可能是目录名，于是依次尝试加载下面这些文件。

1
2
3
4
bar/package.json（main字段）
bar/index.js
bar/index.json
bar/index.node

(4) 如果在所有目录中，都无法找到 bar 对应的文件或目录，就抛出一个错误。

二. Module 构造函数

了解内部逻辑以后，下面就来看源码。
require 的源码在 Node 的 (lib/module.js)[https://github.com/nodejs/node-v0.x-archive/blob/master/lib/module.js] 文件。为了便于理解，本文引用的源码是简化过的，并且删除了原作者的注释。

1
2
3
4
5
6
7
8
9
10
11
12
function Module(id, parent) {
  this.id = id;
  this.exports = {};
  this.parent = parent;
  this.filename = null;
  this.loaded = false;
  this.children = [];
}

module.exports = Module;

var module = new Module(filename, parent);

上面代码中，Node 定义了一个构造函数 Module，所有的模块都是 Module 的实例。可以看到，当前模块（module.js）也是 Module 的一个实例。
每个实例都有自己的属性。下面通过一个例子，看看这些属性的值是什么。新建一个脚本文件 a.js 。

1
2
3
4
5
6
7
8
// a.js
console.log('module.id: ', module.id);
console.log('module.exports: ', module.exports);
console.log('module.parent: ', module.parent);
console.log('module.filename: ', module.filename);
console.log('module.loaded: ', module.loaded);
console.log('module.children: ', module.children);
console.log('module.paths: ', module.paths);

博客

阅读全文 >>

ES6解构赋值

  1. 数组的解构赋值

    1
    2
    3
    4
    5
    6
    7
    8
    let [head, ...tail] = [1, 2, 3, 4];
    head // 1
    tail // [2, 3, 4]

    let [x, y, ...z] = ['a'];
    x // "a"
    y // undefined
    z // []

  2. 对象的解构赋值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    let { foo, bar } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"

    // 变量必须与属性同名，才能取到正确的值。
    let { baz } = { foo: "aaa", bar: "bbb" };
    baz // undefined

    // 如果变量名与属性名不一致，必须写成下面这样
    let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
    baz // "aaa"
    let obj = { first: 'hello', last: 'world' };
    let { first: f, last: l } = obj;
    f // 'hello'
    l // 'world'

    // 对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
    // foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。
    let { foo: baz } = { foo: "aaa", bar: "bbb" };
    baz // "aaa"
    foo // error: foo is not defined

    // 与数组一样，解构也可以用于嵌套结构的对象。
    let obj = {
      p: [
        'Hello',
        { y: 'World' }
      ]
    };
    let { p, p: [x, { y }] } = obj;
    x // "Hello"
    y // "World"
    p // ["Hello", {y: "World"}]
博客

webpack学习笔记

webpack 注意点：

1.起步：

  1. webpack配置文件自定义位置时： npm run start – “start”: “webpack –config ./deploy/webpack.prod.conf.js”
  2. 在dist/index.html中引入js： 
    1
    2
    3
    4
    5
    6
    7
    8
    dist/index.html
    <script src="./bundle.js"></script>

    deploy/webpack.prod.config.js
    output: {
        filename: 'bundle.js' -- 就是dist/index.html引入的js名称
        path: path.resolve(__dirname, '../dist') -- ！！注意输入路径
    }

2.管理资源

  1. 比如管理css资源，需要加载相应的css loader
    1
    npm install --save-dev style-loader css-loader

webpack配置文件中如何使用css loader:

1
2
3
4
5
6
7
8
9
10
11
12
// deploy/webpack.prod.conf.js
module = {
    rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }
    ]
}

业务中如何引入css:

1
2
// dist/bundle.js
import './css/style.css'; -- 直接引入，之后会被css loader解析，作为<style>插入到引入该js文件的html文件的<header>

具体见 资源管理.html / webpack.prod.config_css.js。 其他的资源管理，比如image / data file / …一样的逻辑，只是loader换一下

3.输出管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 多入口配置及使用HtmlWebpackPlugin
entry: {
    app: './src/index.js',
    print: './src/log.js'
},
output: {
    filename: 'bundle_[name].js',
    path: path.resolve(__dirname, '../dist')
},
plugins: [
    new HtmlWebpackPlugin({
        title: 'HtmlWebpackPlugin',
        filename: 'HtmlWebpackPlugin2.html',
        template: path.resolve(__dirname, '../dist/index.html')
    }),
    /** 等同于
    * new HtmlWebpackPlugin({
        title: 'HtmlWebpackPlugin',
        filename: '../dist/HtmlWebpackPlugin2.html'
    }),
    */
]

4.Tree Shaking

为了学会使用 tree shaking，你必须……

  1. 使用 ES2015 模块语法（即 import 和 export）。
  2. 在项目 package.json 文件中，添加一个 “sideEffects” 入口。!!!
  3. 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)（例如 UglifyJSPlugin）。 或者在webppack4.0以上直接设置mode: ‘prodution’就会自动调用UglifyJSPlugin压缩代码

5.生产环境构建

  1. webpack-merge的使用
  2. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    // webpack.base.js
     const path = require('path');
     const CleanWebpackPlugin = require('clean-webpack-plugin');
     const HtmlWebpackPlugin = require('html-webpack-plugin');

     module.exports = {
       entry: {
         app: './src/index.js'
       },
       plugins: [
         new CleanWebpackPlugin(['dist']),
        /**相对路径的时候，一定要设置root
        new CleanWebpackPlugin([
            'dist/*'
        ],{
            root: path.resolve(__dirname, '../../'),
            verbose: true,
            dry: false
        }),
        */
         new HtmlWebpackPlugin({
           title: 'Production'
         })
       ],
       output: {
         filename: '[name].bundle.js',
         path: path.resolve(__dirname, 'dist')
       }
    };

    webpack.dev.js
    module.exports = merge(common, {
       devtool: 'inline-source-map', //建议可以使用cheap-module-eval-source-map
       devServer: {
         contentBase: './dist'
       }
    });

    webpack.prod.js
    module.exports = merge(common, {
        devtool: 'source-map',
        plugins: [
            new UglifyJSPlugin({
                sourceMap: true
            }),
            // 构建的时候制定环境
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('production')
            })
        ]
    });

  3. package.json

    1
    2
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"

  4. 使用 ExtractTextPlugin 进行split css

6.code splitting – 代码分离：主要目的是分离出公共的代码，不重复加载

  1. 使用CommonsChunkPlugin自动提取功能的代码模块
    1
    2
    3
    4
    // webpack.config.js
    new webpack.optimize.CommonsChunkPlugin({
        name: 'common' // 指定公共 bundle 的名称。
    })
博客

阅读全文 >>