您的位置:新葡亰496net > 新葡亰官网 > 模块化的原理,ES2015核心内容

模块化的原理,ES2015核心内容

发布时间:2019-12-01 01:17编辑:新葡亰官网浏览(88)

    Webpack 之 treeShaking

    2018/08/16 · 基础技术 · webpack

    原文出处: easonyq   

    在 github 上直接观看 markdown 会把图片转存到缓存中,github 转存后的图片清晰度很有问题,因此如果图片看不清,可以移步知乎上的相同文章

    webpack 2.0 开始引入 tree shaking 技术。在介绍技术之前,先介绍几个相关概念:

    • AST 对 JS 代码进行语法分析后得出的语法树 (Abstract Syntax Tree)。AST语法树可以把一段 JS 代码的每一个语句都转化为树中的一个节点。
    • DCE Dead Code Elimination,在保持代码运行结果不变的前提下,去除无用的代码。这样的好处是:

      • 减少程序体积
      • 减少程序执行时间
      • 便于将来对程序架构进行优化

      而所谓 Dead Code 主要包括:

      • 程序中没有执行的代码 (如不可能进入的分支,return 之后的语句等)
      • 导致 dead variable 的代码(写入变量之后不再读取的代码)

    tree shaking 是 DCE 的一种方式,它可以在打包时忽略没有用到的代码。

    图片 1

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。

    通过实例来说明webpack 模块化的原理

    1、company.js文件:

    export default {

            company:'lexin'

    };

     

    Version:0.9StartHTML:00000097EndHTML:00031268StartFragment:00000199EndFragment:000312301.变量声明let和const

    机制简述

    tree shaking 是 rollup 作者首先提出的。这里有一个比喻:

    如果把代码打包比作制作蛋糕。传统的方式是把鸡蛋(带壳)全部丢进去搅拌,然后放入烤箱,最后把(没有用的)蛋壳全部挑选并剔除出去。而 treeshaking 则是一开始就把有用的蛋白蛋黄放入搅拌,最后直接作出蛋糕。

    因此,相比于 排除不使用的代码,tree shaking 其实是 找出使用的代码

    基于 ES6 的静态引用,tree shaking 通过扫描所有 ES6 的 export,找出被 import 的内容并添加到最终代码中。 webpack 的实现是把所有 import 标记为有使用/无使用两种,在后续压缩时进行区别处理。因为就如比喻所说,在放入烤箱(压缩混淆)前先剔除蛋壳(无使用的 import),只放入有用的蛋白蛋黄(有使用的 import)

    虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。

    2、lotus.js文件:

    import company from './company';

    export default {

            name:'greenlotus'

            age : 28

    };

    console.log(company);

    • classes - 各种 ‘类’,再也无需用 CoffeeScript 的语法糖写类了
    • generators - 未来的.js 代码中将有无数生成器,不学一点就看不懂 JS 代码了哦
    • collections - 集合、映射、弱集合、弱映射
    • arrow functions - 箭向函数
    • block scoping - 使用 let 、const 作用域,块辖域
    • template strings - 模板字串
    • promises - 用标准化了的方法进行延迟和异步计算
    • symbols - 唯一的、不可修改的数据

    我们都是知道在ES6以前,var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

    使用方法

    首先源码必须遵循 ES6 的模块规范 (import & export),如果是 CommonJS 规范 (require) 则无法使用。

    根据webpack官网的提示,webpack2 支持 tree-shaking,需要修改配置文件,指定babel处理js文件时不要将ES6模块转成CommonJS模块,具体做法就是:

    在.babelrc设置babel-preset-es2015的modules为fasle,表示不对ES6模块进行处理。

    JavaScript

    // .babelrc { "presets": [ ["es2015", {"modules": false}] ] }

    1
    2
    3
    4
    5
    6
    // .babelrc
    {
        "presets": [
            ["es2015", {"modules": false}]
        ]
    }

    经过测试,webpack 3 和 4 不增加这个 .babelrc 文件也可以正常 tree shaking

    在我们正式讲解ES6语法之前,我们得先了解下Babel。

    3、webpack.config.js文件

    const path = require('path');

    module.exports = {

            entry: './lotus.js',

            output: {

                    path: path.resolve(__dirname, 'dist'),

                    filename: 'bundle.js',

            }

    };

     

        function aa() {

    Tree shaking 两步走

    webpack 负责对代码进行标记,把 import & export 标记为 3 类:

    1. 所有 import 标记为 /* harmony import */
    2. 被使用过的 export 标记为 /* harmony export ([type]) */,其中 [type] 和 webpack 内部有关,可能是 bindingimmutable 等等。
    3. 没被使用过的 import 标记为 /* unused harmony export [FuncName] */,其中 [FuncName] 为 export 的方法名称

    之后在 Uglifyjs (或者其他类似的工具) 步骤进行代码精简,把没用的都删除。

    Babel

    4、webpack 编译后的精简代码

    (function(modules) {

            function __webpack_require__(moduleId) {

                    var module = {

                            i: moduleId,

                            l: false,

                            exports: {}

                    };

                    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

                    return module.exports;

            }

            return __webpack_require__(0);

    })([

            (function(module, __webpack_exports__, __webpack_require__) {

                    "use strict";

                    //__esModule 表明这是个由 es6 转换来的commonjs规范输出

                    Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

                    //引入依赖的模块(也就是'import company from './company')

                    var __WEBPACK_IMPORTED_MODULE_0__company__ = __webpack_require__(1);

                    //lotus.js default export

                    __webpack_exports__["default"] = ({

                            name:'greenlotus'

                            age : 28

                    });

                    //输出company对象

                    console.log(__WEBPACK_IMPORTED_MODULE_0__company__["company"]);

            }),

            (function(module, __webpack_exports__, __webpack_require__) {

                    "use strict";

                    //company.js default export

                    __webpack_exports__["company"] = ({company:'lexin'});

            })

    ]);

    string:indexof,includes,startWith(),endWith(),str.repeat()

            if(bool) {

    实例分析

    所有实例代码均在demo/webpack 目录

    Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel,具体过程可直接在Babel官网查看:

    实例重点讲解:

    1、通过上面代码发现,入口是一个自执行函数:(function(modules){ ... })([arg1,arg2,...]);

    2、arg1代表入口文件lotus.js 实例化函数、arg2就是依赖的company.js实例化函数

    3、代码主要函数:__webpack_require__,它所做的就是定义module对象 , 然后调用arg1、arg2 实例化module.exports对象,最后返回 module.exports。

    模版字符串 ,标签模版

                var test = 'hello man'

    方法的处理

    JavaScript

    // index.js import {hello, bye} from './util' let result1 = hello() console.log(result1)

    1
    2
    3
    4
    5
    6
    // index.js
    import {hello, bye} from './util'
     
    let result1 = hello()
     
    console.log(result1)

    JavaScript

    // util.js export function hello () { return 'hello' } export function bye () { return 'bye' }

    1
    2
    3
    4
    5
    6
    7
    8
    // util.js
    export function hello () {
      return 'hello'
    }
     
    export function bye () {
      return 'bye'
    }

    编译后的 bundle.js 如下:

    JavaScript

    /******/ ([ /* 0 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util__ = __webpack_require__(1); let result1 = Object(__WEBPACK_IMPORTED_MODULE_0__util__["a" /* hello */])() console.log(result1) /***/ }), /* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (immutable) */ __webpack_exports__["a"] = hello; /* unused harmony export bye */ function hello () { return 'hello' } function bye () { return 'bye' }

    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
    /******/ ([
    /* 0 */
    /***/ (function(module, __webpack_exports__, __webpack_require__) {
     
    "use strict";
    Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
    /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util__ = __webpack_require__(1);
     
     
    let result1 = Object(__WEBPACK_IMPORTED_MODULE_0__util__["a" /* hello */])()
     
    console.log(result1)
     
     
    /***/ }),
    /* 1 */
    /***/ (function(module, __webpack_exports__, __webpack_require__) {
     
    "use strict";
    /* harmony export (immutable) */ __webpack_exports__["a"] = hello;
    /* unused harmony export bye */
    function hello () {
      return 'hello'
    }
     
    function bye () {
      return 'bye'
    }

    注:省略了 bundle.js 上边 webpack 自定义的模块加载代码,那些都是固定的。

    对于没有使用的 bye 方法,webpack 标记为 unused harmony export bye,但是代码依旧保留。而 hello 就是正常的 harmony export (immutable)

    之后使用 UglifyJSPlugin 就可以进行第二步,把 bye 彻底清除,结果如下:

    图片 2

    只有 hello 的定义和调用。

    图片 3

    String.raw()

    1. let raw = String.raw`Not a newline: n`;
    2. document.write(raw === 'Not a newline: \n'); // true

    ES6在Number对象上,新提供了Number.isFinite()和Number.isNaN(),Number.isInteger()

     

    Math.trunc():去除一个数的小数部分,返回整数部分。

    1. Math.trunc(4.1) // 4
    2. Math.trunc(-4.1) // -4

    注意:对于空值和无法截取整数的值,返回NaN。

    Math.sign():判断一个数到底是正数、负数、还是零。

    返回五种值:参数为正数,返回 1;参数为负数,返回-1;参数为0,返回0;参数为-0,返回-0;其他值,返回NaN。

    1. Math.sign(-5) // -1
    2. Math.sign(5) // 1
    3. Math.sign(0) // 0
    4. Math.sign(-0) // -0
    5. Math.sign('hubwiz'); // NaN

    Math.cbrt:计算一个数的立方根。

    1. Math.cbrt(-1); // -1
    2. Math.cbrt(0); // 0
    3. Math.cbrt(2); // 1.2599210498948732

    Math.fround:返回一个数的单精度浮点数形式。

    1. Math.fround(0); // 0
    2. Math.fround(1.337); // 1.3370000123977661
    3. Math.fround(NaN); // NaN

    Math.hypot:返回所有参数的平方和的平方根。

    1. Math.hypot(3, 4); // 5
    2. Math.hypot(3, 4, 5); // 7.0710678118654755
    3. Math.hypot(); // 0
    4. Math.hypot(NaN); // NaN
    5. Math.hypot(3, 4, 'foo'); // NaN
    6. Math.hypot(3, 4, '5'); // 7.0710678118654755
    7. Math.hypot(-3); // 3

    Array

    1. let arrNew = Array.from(array).map(x => x * x);
    2. Array.of
    3. let array = [1, 4, -5, 10].find((n) => n < 0);
    4. let index = [1, 5, 10, 15].findIndex(function(value, index, arr) {return value > 9})
    5. let arr = ['a', 'b', 'c'].fill(7)
      • entries()
      • keys()
      • values()

     for (let index of ['a', 'b'].keys()) {document.write(index);}

    for (let elem of ['a', 'b'].values()) {document.write(elem);}

    for (let [index, elem] of ['a', 'b'].entries()) {document.write(index, elem);}

     

    表达式属性和表达式方法名

    let propKey = 'foo';

    let obj = {

         [propKey]: true,

        ['a' 'bc']: 123

    };

     

     

    let obj = {

           ['h' 'ello']() {

                 return 'hi';

            }

    };

     

     

    Object.is( 0, -0) // false

    Object.assign()

    1. var target = { a: 1, b: 1 };
    2.  
    3. var source1 = { b: 2, c: 2 };
    4. var source2 = { c: 3 };
    5.  
    6. Object.assign(target, source1, source2);
    7. target // {a:1, b:2, c:3}

            } else {

    类(class) 的处理

    JavaScript

    // index.js import Util from './util' let util = new Util() let result1 = util.hello() console.log(result1)

    1
    2
    3
    4
    5
    6
    // index.js
    import Util from './util'
     
    let util = new Util()
    let result1 = util.hello()
    console.log(result1)

    JavaScript

    // util.js export default class Util { hello () { return 'hello' } bye () { return 'bye' } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // util.js
    export default class Util {
      hello () {
        return 'hello'
      }
     
      bye () {
        return 'bye'
      }
    }

    编译后的 bundle.js 如下:

    JavaScript

    /******/ ([ /* 0 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util__ = __webpack_require__(1); let util = new __WEBPACK_IMPORTED_MODULE_0__util__["a" /* default */]() let result1 = util.hello() console.log(result1) /***/ }), /* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; class Util { hello () { return 'hello' } bye () { return 'bye' } } /* harmony export (immutable) */ __webpack_exports__["a"] = Util;

    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
    /******/ ([
    /* 0 */
    /***/ (function(module, __webpack_exports__, __webpack_require__) {
     
    "use strict";
    Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
    /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util__ = __webpack_require__(1);
     
     
    let util = new __WEBPACK_IMPORTED_MODULE_0__util__["a" /* default */]()
    let result1 = util.hello()
    console.log(result1)
     
     
    /***/ }),
    /* 1 */
    /***/ (function(module, __webpack_exports__, __webpack_require__) {
     
    "use strict";
    class Util {
      hello () {
        return 'hello'
      }
     
      bye () {
        return 'bye'
      }
    }
    /* harmony export (immutable) */ __webpack_exports__["a"] = Util;

    注意到 webpack 是对 Util 类整体进行标记的(标记为被使用),而不是分别针对两个方法。也因此,最终打包的代码依然会包含 bye 方法。这表明 webpack tree shaking 只处理顶层内容,例如类和对象内部都不会再被分别处理。

    这主要也是由于 JS 的动态语言特性所致。如果把 bye() 删除,考虑如下代码:

    JavaScript

    // index.js import Util from './util' let util = new Util() let result1 = util[Math.random() > 0.5 ? 'hello', 'bye']() console.log(result1)

    1
    2
    3
    4
    5
    6
    // index.js
    import Util from './util'
     
    let util = new Util()
    let result1 = util[Math.random() > 0.5 ? 'hello', 'bye']()
    console.log(result1)

    编译器并不能识别一个方法名字究竟是以直接调用的形式出现 (util.hello()) 还是以字符串的形式 (util['hello']()) 或者其他更加离奇的方式。因此误删方法只会导致运行出错,得不偿失。

    babel

    proto属性

    1. // es6的写法
    2.  
    3. var obj = {
    4. __proto__: someOtherObj,
    5. method: function() { ... }
    6. }
    7.  
    8. // es5的写法
    9.  
    10. var obj = Object.create(someOtherObj);
    11. obj.method = function() { ... }

    proxy

    函数;默认参数,不定参数...rest简称rest参数,参数数组

     

     扩展运算符 ...ares

     

    箭头函数,箭头函数里没有this

     

    函数绑定

    函数绑定运算符是并排的两个双引号(::),双引号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境(即this对象),绑定到右边的函数上面。

    1. let log = ::console.log;
    2. // 等同于
    3. var log = console.log.bind(console);
    4.  
    5. foo::bar;
    6. // 等同于
    7. bar.call(foo);
    8.  
    9. foo::bar(...arguments);
    10. i// 等同于
    11. bar.apply(foo, arguments);

    set  weakSet和map weakmap

     

    Symbol   

                console.log(test)

    副作用

    副作用的意思某个方法或者文件执行了之后,还会对全局其他内容产生影响的代码。例如 polyfill 在各类 prototype 加入方法,就是副作用的典型。(也可以看出,程序和吃药不同,副作用不全是贬义的)

    副作用总共有两种形态,是精简代码不得不考虑的问题。我们平时在重构代码时,也应当以相类似的思维去进行,否则总有踩坑的一天。

    最常用的ES6特性

    Iterator 

            }

    模块引入带来的副作用

    JavaScript

    // index.js import Util from './util' console.log('Util unused')

    1
    2
    3
    4
    // index.js
    import Util from './util'
     
    console.log('Util unused')

    JavaScript

    // util.js console.log('This is Util class') export default class Util { hello () { return 'hello' } bye () { return 'bye' } } Array.prototype.hello = () => 'hello'

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // util.js
    console.log('This is Util class')
     
    export default class Util {
      hello () {
        return 'hello'
      }
     
      bye () {
        return 'bye'
      }
    }
     
    Array.prototype.hello = () => 'hello'

    如上代码经过 webpack uglify 的处理后,会变成这样:

    图片 4

    虽然 Util 类被引入之后没有进行任何使用,但是不能当做没引用过而直接删除。在混合后的代码中,可以看到 Util 类的本体 (export 的内容) 已经没有了,但是前后的 console.log 和对 Array.prototype 的扩展依然保留。这就是编译器为了确保代码执行效果不变而做的妥协,因为它不知道这两句代码到底是干嘛的,所以他默认认定所有代码 均有 副作用。

    let,  const,  class,  extends,  super,   arrow functions,  template string,  destructuring, default,  rest, arguments 

    Generator  Generator函数是一个函数的内部状态的遍历器

    Generator函数是一个普通函数,但是有两个特征。

    • 一是,function命令与函数名之间有一个星号;
    • 二是,函数体内部使用yield语句,定义遍历器的每个成员,即不同的内部状态。
    1. function* fibonacci() {
    2. let [prev, curr] = [0, 1];
    3. for (;;) {
    4. [prev, curr] = [curr, prev curr];
    5. yield curr;
    6. }
    7. }
    8.  
    9. for (let n of fibonacci()) {
    10. if (n > 1000) break;
    11. document.write(n);
    12. }

    可以从函数体外面控制循环

     

     

    Generator 函数内部还可以部署错误处理代码,捕获函数体外抛出的错误。

    1. function* gen(x){
    2. try {
    3. var y = yield x 2;
    4. } catch (e){
    5. document.write(e);
    6. }
    7. return y;
    8. }
    9.  
    10. var g = gen(1);
    11. g.next();
    12. g.throw('出错了');
    13. // 出错了

    上面代码的最后一行,Generator 函数体外,使用指针对象的 throw 方法抛出的错误,可以被函数体内的 try ... catch 代码块捕获。这意味着,出错的代码与处理错误的代码,实现了时间和空间上的分离,这对于异步编程无疑是很重要的。

     

    如果yield命令后面跟的是一个遍历器,需要在yield命令后面加上星号,表明它返回的是一个遍历器。这被称为yield*语句。

     

     

    promise

    1. //创建promise
    2. var promise = new Promise(function(resolve, reject) {
    3. // 进行一些异步或耗时操作
    4. if ( /*如果成功 */ ) {
    5. resolve("Stuff worked!");
    6. } else {
    7. reject(Error("It broke"));
    8. }
    9. });
    10. //绑定处理程序
    11. promise.then(function(result) {
    12. //promise成功的话会执行这里
    13. document.write(result); // "Stuff worked!"
    14. }, function(err) {
    15. //promise失败会执行这里
    16. document.write(err); // Error: "It broke"
    17. });

    catch方法

    1. getJSON("/posts.json").then(function(posts) {
    2. // ...
    3. }).catch(function(error) {
    4. // 处理前一个回调函数运行时发生的错误
    5. document.write('发生错误!', error);
    6. });
    1. var promise = new Promise(function(resolve, reject) {
    2. throw new Error('test')
    3. });
    4. promise.catch(function(error) { document.write(error) });
    5. // Error: test

     

    1. getJSON("/post/1.json").then(function(post) {
    2. return getJSON(post.commentURL);
    3. }).then(function(comments) {
    4. // some code
    5. }).catch(function(error) {
    6. // 处理前面三个Promise产生的错误
    7. });

    promise.all

    1. // 生成一个Promise对象的数组
    2. var promises = [2, 3, 5, 7, 11, 13].map(function(id){
    3. return getJSON("/post/" id ".json");
    4. });
    5.  
    6. Promise.all(promises).then(function(posts) {
    7. // ...
    8. }).catch(function(reason){
    9. // ...
    10. });

    Promise.race方法同样是将多个Promise实例,包装成一个新的Promise实例。

    1. var p = Promise.race([p1,p2,p3]);

    上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的Promise实例的返回值,就传递给p的回调函数。

     

    使用Generator函数管理流程,遇到异步操作的时候,通常返回一个Promise对象。

    1. function getFoo () {
    2. return new Promise(function (resolve, reject){
    3. resolve('foo');
    4. });
    5. }
    6.  
    7. var g = function* () {
    8. try {
    9. var foo = yield getFoo();
    10. document.write(foo);
    11. } catch (e) {
    12. document.write(e);
    13. }
    14. };
    15.  
    16. function run (generator) {
    17. var it = generator();
    18.  
    19. function go(result) {
    20. if (result.done) return result.value;
    21.  
    22. return result.value.then(function (value) {
    23. return go(it.next(value));
    24. }, function (error) {
    25. return go(it.throw(value));
    26. });
    27. }
    28.  
    29. go(it.next());
    30. }
    31.  
    32. run(g);

     

    async函数与Promise、Generator函数一样,是用来取代回调函数、解决异步操作的一种方法。

     

    async函数与Promise、Generator函数一样,是用来取代回调函数、解决异步操作的一种方法。

    async函数,就是下面这样。

    1. var asyncReadFile = async function (){
    2. var f1 = await readFile('/etc/fstab');
    3. var f2 = await readFile('/etc/shells');
    4. document.write(f1.toString());
    5. document.write(f2.toString());
    6. };

    async函数对Generator函数的改进,体现在以下三点。

    • 内置执行器。Generator函数的执行必须靠执行器,而async函数自带执行器。也就是说,async函数的执行,与普通函数一模一样,只要一行。
      1. var result = asyncReadFile();
    • 更好的语义。async和await,比起星号和yield,语义更清楚了。async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。
    • 更广的适用性。co函数库约定,yield命令后面只能是Thunk函数或Promise对象,而async函数的await命令后面,可以跟Promise对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)。

     

     

    calss

    }

    方法调用带来的副作用

    JavaScript

    // index.js import {hello, bye} from './util' let result1 = hello() let result2 = bye() console.log(result1)

    1
    2
    3
    4
    5
    6
    7
    // index.js
    import {hello, bye} from './util'
     
    let result1 = hello()
    let result2 = bye()
     
    console.log(result1)

    JavaScript

    // util.js export function hello () { return 'hello' } export function bye () { return 'bye' }

    1
    2
    3
    4
    5
    6
    7
    8
    // util.js
    export function hello () {
      return 'hello'
    }
     
    export function bye () {
      return 'bye'
    }

    我们引入并调用了 bye(),但是却没有使用它的返回值 result2,这种代码可以删吗?(扪心自问,如果是你人肉重构代码,直接删掉这行代码的可能性有没有超过 90% ?)

    图片 5

    webpack 并没有删除这行代码,至少没有删除全部。它确实删除了 result2,但保留了 bye() 的调用(压缩的代码表现为 Object(r.a)())以及 bye() 的定义。

    这同样是因为编译器不清楚 bye() 里面究竟做了什么。如果它包含了如 Array.prototye 的扩展,那删掉就又出问题了。

    这些是ES6最常用的几个语法,基本上学会它们,我们就可以走遍天下都不怕啦!我会用最通俗易懂的语言和例子来讲解它们,保证一看就懂,一学就会。

    Class的继承


    Class之间可以通过extends关键字,实现继承。

    子类会继承父类的属性和方法。

    1. class Point {
    2. constructor(x, y) {
    3. this.x = x;
    4. this.y = y;
    5. }
    6. }
    7.  
    8. class ColorPoint extends Point {
    9. constructor(x, y, color) {
    10. this.color = color; // ReferenceError
    11. super(x, y);
    12. this.color = color; // 正确
    13. }
    14. }

    上面代码中,子类的constructor方法没有调用super之前,就使用this关键字,结果报错,而放在super方法之后就是正确的。

    注意:ColorPoint继承了父类Point,但是它的构造函数必须调用super方法。

    下面是生成子类实例的代码。

    1. let cp = new ColorPoint(25, 8, 'green');
    2.  
    3. cp instanceof ColorPoint // true
    4. cp instanceof Point // true

     

    以上的代码实际上是:

    如何解决副作用?

    我们很感谢 webpack 如此严谨,但如果某个方法就是没有副作用的,我们该怎么告诉 webpack 让他放心大胆的删除呢?

    有 3 个方法,适用于不同的情况。

    let, const

    这两个的用途与var类似,都是用来声明变量的,但在实际运用中他俩都有各自的特殊用途。

    首先来看下面这个例子:

    var name = 'zach';

    while (true) {

        var name = 'obama';

        console.log(name);  //obama break

    }

    console.log(name) //obama

    使用var 两次输出都是obama,这是因为ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块内有效。

    let name='zach';

    while(true) { 

        let name= 'obama';

        console.log(name); //obama

        break;

    }

    console.log(name);  //zach

    另外一个var带来的不合理场景就是用来计数的循环变量泄露为全局变量,看下面的例子:

    vara = [];

    for(vari =0; i <10; i ) { 

         a[i] = function(){

            console.log(i); 

         };

    }

    a[6]();  // 10

    上面代码中,变量i是var声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值。而使用let则不会出现这个问题。

    vara = [];

    for(leti =0; i <10; i ) { 

        a[i] = function(){

            console.log(i); 

         };

    }

    a[6]();// 6

    再来看一个更常见的例子,了解下如果不用ES6,而用闭包如何解决这个问题。

    varclickBoxs = document.querySelectorAll('.clickBox');

    for(vari =0; i < clickBoxs.length; i ){ 

        clickBoxs[i].onclick =function(){

            console.log(i);    

        }

    }

    我们本来希望的是点击不同的clickBox,显示不同的i,但事实是无论我们点击哪个clickBox,输出的都是5。下面我们来看下,如何用闭包搞定它。

    function iteratorFactory(i){

        var onclick = function(e) {

        console.log(i);

        }

    return onclick;

    }

    var clickBoxs = document.querySelectorAll('.clickBox');

    for(vari=0;i< clickBoxs.length;i ){ 

        clickBoxs[i].onclick = iteratorFactory(i);

    }

    const也用来声明变量,但是声明的是常量。一旦声明,常量的值就不能改变。

    const PI= Math.PI;

    PI=23; //Modulebuild failed: SyntaxError: /es6/app.js:"PI"is read-only

    当我们尝试去改变用const声明的常量时,浏览器就会报错。

    const有一个很好的应用场景,就是当我们引用第三方库的时声明的变量,用const来声明可以避免未来不小心重命名而导致出现bug:

    const monent = require('moment');

    Class的Generator方法


    如果某个方法之前加上星号(*),就表示该方法是一个Generator函数。

    1. class Foo {
    2. constructor(...args) {
    3. this.args = args;
    4. }
    5. * [Symbol.iterator]() {
    6. for (let arg of this.args) {
    7. yield arg;
    8. }
    9. }
    10. }
    11.  
    12. for (let x of new Foo('hello', 'world')) {
    13. document.write(x);
    14. }
    15. // hello
    16. // world

    上面代码中,Foo类的Symbol.iterator方法前有一个星号,表示该方法是一个Generator函数。Symbol.iterator方法返回一个Foo类的默认遍历器,for...of循环会自动调用这个遍历器。

     

        function aa() {

    pure_funcs

    JavaScript

    // index.js import {hello, bye} from './util' let result1 = hello() let a = 1 let b = 2 let result2 = Math.floor(a / b) console.log(result1)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // index.js
    import {hello, bye} from './util'
     
    let result1 = hello()
    let a = 1
    let b = 2
    let result2 = Math.floor(a / b)
     
    console.log(result1)

    util.js 和之前相同,不再重复。有差别的是 webpack.config.js,需要增加参数 pure_funcs,告诉 webpack Math.floor 是没有副作用的,你可以放心删除:

    JavaScript

    plugins: [ new UglifyJSPlugin({ uglifyOptions: { compress: { pure_funcs: ['Math.floor'] } } }) ],

    1
    2
    3
    4
    5
    6
    7
    8
    9
    plugins: [
      new UglifyJSPlugin({
        uglifyOptions: {
          compress: {
              pure_funcs: ['Math.floor']
          }
        }
      })
    ],

    图片 6

    图片 7

    在添加了 pure_funcs 配置后,原来保留的 Math.floor(.5) 被删除了,达到了我们的预期效果。

    但这个方法有一个很大的局限性,在于如果我们把 webpack 和 uglify 合并使用,经过 webpack 的代码的方法名已经被重命名了,那么在这里配置原始的方法名也就失去了意义。而例如 Math.floor 这类全局方法不会重命名,才会生效。因此适用性不算太强。

    class, extends, super

    ES6这三个特性解决了ES5中最令人头疼的的几个部分:原型、构造函数,继承...

    ES6提供了更接近传统语言的写法,引入了Class(类)这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。

    class Animal { 

        constructor() {

            this.type='animal' 

        } 

        says(say) { 

            console.log(this.type ' says ' say);    

        }

    }

    let animal = new Animal();

    animal.says('hello');//animal says hello

    class Cat extends Animal { 

        constructor() {

            super();

            this.type = 'cat'; 

        }

    }

    let cat =new Cat();

    cat.says('hello');  //cat says hello

    上面代码首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

    Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

    super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

    ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。

    P.S 如果你写react的话,就会发现以上三个东西在最新版React中出现得很多。创建的每个component都是一个继承React.Component的类。详见react文档

    Class的静态方法


    类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

    1. class Foo {
    2. static classMethod() {
    3. return 'hello';
    4. }
    5. }
    6. Foo.classMethod() // 'hello'
    7. var foo = new Foo();
    8. foo.classMethod()
    9. // TypeError: undefined is not a function

    上面代码中,Foo类的classMethod方法前有static关键字,表明该方法是一个静态方法,可以直接在Foo类上调用(Foo.classMethod()),而不是在Foo类的实例上调用。如果在实例上调用静态方法,会抛出一个错误,表示不存在该方法。

    父类的静态方法,可以被子类继承。

    1. class Foo {
    2. static classMethod() {
    3. return 'hello';
    4. }
    5. }
    6. class Bar extends Foo {
    7. }
    8. Bar.classMethod(); // 'hello'

    上面代码中,父类Foo有一个静态方法,子类Bar可以调用这个方法。

    静态方法也是可以从super对象上调用的。

    1. class Foo {
    2. static classMethod() {
    3. return 'hello';
    4. }
    5. }
    6. class Bar extends Foo {
    7. static classMethod() {
    8. return super.classMethod() ', too';
    9. }
    10. }
    11. Bar.classMethod();

     

            var test // 变量提升

    package.json 的 sideEffects

    webpack 4 在 package.json 新增了一个配置项叫做 sideEffects, 值为 false 表示整个包都没有副作用;或者是一个数组列出有副作用的模块。详细的例子可以查看 webpack 官方提供的例子。

    从结果来看,如果 sideEffects 值为 false,当前包 export 了 5 个方法,而我们使用了 2 个,剩下 3 个也不会被打包,是符合预期的。但这要求包作者的自觉添加,因此在当前 webpack 4 推出不久的情况下,局限性也不算小。

    arrow function

    这个是ES6最常用的一个新特性,用它来写function比原来的写法要简洁清晰很多:

    function (i) {

        return i 1;  

    };   //ES5

    (i) => i 1;  //ES6

    简直是简单的不像话对吧...

    如果方程比较复杂,则需要用{ }把代码包起来:

    function(x, y) { 

         x ; 

         y--;

        return x y;

    };

    (x, y) => {

        x ; 

        y--;

        return x y;

    };

    除了看上去更简洁以外,arrow function还有一项超级无敌的功能!

    长期以来,JavaScript语言的this对象一直是一个令人头痛的问题,在对象方法中使用this,必须非常小心。例如:

    class Animal {

        constructor() {

            this.type ='animal';

        } 

         says(say) { 

             setTimeout(function(){

                console.log(this.type ' says ' say);        

            },1000); 

        }

    }

    var animal = new Animal();

    animal.says('hi');//undefined says hi

    运行上面的代码会报错,这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行,传统的解决方法有两种:

    1. 第一种是将this传给self,再用self来指代this.

    says(say) { 

        varself = this; 

        setTimeout(function(){

            console.log(self.type ' says ' say);       

        },1000);

    }

    1. 第二种方法是用bind(this),即

    says(say) { 

        setTimeout(function() {

            console.log(this.type ' says ' say);

        }.bind(this),1000);

    }

    但现在我们有了箭头函数,就不需要这么麻烦了:

    class Animal { 

        constructor() {

            this.type ='animal';

        } 

        says(say) { 

            setTimeout( ()=>{

                console.log(this.type ' says ' say); 

             },1000);

        }

    }

    var animal = new Animal(); 

    animal.says('hi');//animal says hi

    当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

    并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。

    template string

    这个东西也是非常有用,当我们要插入大段的html内容到文档中时,传统的写法非常麻烦,所以之前我们通常会引用一些模板工具库,比如mustache等等。

    大家可以先看下面一段代码:

    $("#result").append("

    There are <b>" basket.count "</b> " "items in your basket, " "<em>" basket.onSale " </em>are on sale!

    ");

    我们要用一堆的' '号来连接文本与变量,而使用ES6的新特性模板字符串``后,我们可以直接这么来写:

    $("#result").append(` 

     There are <b>${basket.count} </b>itemsinyour basket, <em>${basket.onSale}</em> areonsale!

    `);

    用反引号()来标识起始,用${}`来引用变量,而且所有的空格和缩进都会被保留在输出之中,是不是非常爽?!

    React Router从第1.0.3版开始也使用ES6语法了,比如这个例子:

    <Link to = {' /taco/${taco.name} '} >{taco.name}</Link>

    React Router

    new.target属性


    new是从构造函数生成实例的命令。ES6为new命令引入了一个new.target属性,(在构造函数中)返回new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的,new.target会返回undefined,因此这个属性可以用来确定构造函数是怎么调用的。

    1. function Person(name) {
    2. if (new.target !== undefined) {
    3. this.name = name;
    4. } else {
    5. throw new Error('必须使用new生成实例');
    6. }
    7. }
    8.  
    9. // 另一种写法
    10. function Person(name) {
    11. if (new.target === Person) {
    12. this.name = name;
    13. } else {
    14. throw new Error('必须使用new生成实例');
    15. }
    16. }
    17.  
    18. var person = new Person('张三'); // 正确
    19. var notAPerson = Person.call(person, '张三'); // 报错

    上面代码确保构造函数只能通过new命令调用。

    • Class内部调用new.target,返回当前Class。
    • 子类继承父类时,new.target会返回子类。

     

     

            if(bool) {

    concatenateModule

    webpack 3 开始加入了 webpack.optimize.ModuleConcatenateModulePlugin(),到了 webpack 4 直接作为 `mode = ‘production’ 的默认配置。这是对 webpack bundle 的一个优化,把本来“每个模块包裹在一个闭包里”的情况,优化成“所有模块都包裹在同一个闭包里”的情况。本身对于代码缩小体积有很大的提升,这里也能侧面解决副作用的问题。

    依然选取这样 2 个文件作为例子:

    JavaScript

    // index.js import {hello, bye} from './util' let result1 = hello() let result2 = bye() console.log(result1)

    1
    2
    3
    4
    5
    6
    7
    // index.js
    import {hello, bye} from './util'
     
    let result1 = hello()
    let result2 = bye()
     
    console.log(result1)

    JavaScript

    // util.js export function hello () { return 'hello' } export function bye () { return 'bye' }

    1
    2
    3
    4
    5
    6
    7
    8
    // util.js
    export function hello () {
      return 'hello'
    }
     
    export function bye () {
      return 'bye'
    }

    在开启了 concatenateModule 功能后,打包出来的代码如下:

    图片 8

    首先,bye() 方法的调用和本体都被消除了。

    其次,hello() 方法的调用和定义被合成到了一起,变成直接 console.log('hello')

    第三就是这个功能原有的目的:代码量减少了。

    这个功能的本意是把所有模块最终输出到同一个方法内部,从而把调用和定义合并到一起。这样像 bye() 这样没有副作用的方法就可以在合并之后被轻易识别出来,并加以删除。有关这个功能更加详细的介绍可以看这篇文章

    destructuring

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

    看下面的例子:

    let cat='ken';

    let dog ='lili';

    let zoo = {cat:cat,dog:dog};

    console.log(zoo);  //Object {cat:"ken",dog:"lili"}

    用ES6完全可以像下面这么写:

    let cat='ken';

    let dog ='lili';

    let zoo = {cat, dog};

    console.log(zoo);  //Object {cat:"ken",dog:"lili"}

    反过来可以这么写:

    letdog = {type: 'animal',many: 2};

    let {type,many} = dog;

    console.log(type,many);   //animal2

    修饰器-类的修饰


    修饰器(Decorator)是一个表达式,用来修改类的行为。这是ES7的一个提案,目前Babel转码器已经支持。

    修饰器对类的行为的改变,是代码编译时发生的,而不是在运行时。这意味着,修饰器能在编译阶段运行代码。

    1. function testable(target) {
    2. target.isTestable = true;
    3. }
    4. @testable
    5. class MyTestableClass {}
    6. console.log(MyTestableClass.isTestable) // true

    上面代码中,@testable就是一个修饰器。它修改了MyTestableClass这个类的行为,为它加上了静态属性isTestable。

    基本上,修饰器的行为就是下面这样。

    1. @decorator
    2. class A {}
    3.  
    4. // 等同于
    5.  
    6. class A {}
    7. A = decorator(A) || A;

    也就是说,修饰器本质上就是能在编译时执行的函数

     

     

     

     

            test = 'hello man'

    总结

    1. 使用 ES6 模块语法编写代码
    2. 工具类函数尽量以单独的形式输出,不要集中成一个对象或者类
    3. 声明 sideEffects
    4. 自己在重构代码时也要注意副作用

      1 赞 1 收藏 评论

    图片 9

    default, rest

    default很简单,意思就是默认值。大家可以看下面的例子,调用animal()方法时忘了传参数,传统的做法就是加上这一句type = type || 'cat' 来指定默认值。

    function animal(type) { 

        type = type|| 'cat';

        console.log(type);

    }

    animal();

    如果用ES6我们而已直接这么写:

    function animal(type='cat'){

        console.log(type);

    };

    animal();

    最后一个rest语法也很简单,直接看例子:

    function animals(...types) { 

        console.log(types);

    }

    animals('cat','dog','fish');// ["cat", "dog", "fish"]

    而如果不用ES6的话,我们则得使用ES5的arguments。

    修饰器-类的修饰


    修饰器函数可以接受三个参数,依次是目标函数、属性名和该属性的描述对象。后两个参数可省略。上节修饰器-类的修饰1代码中,testable函数的参数target,就是所要修饰的对象。如果希望修饰器的行为,能够根据目标对象的不同而不同,就要在外面再封装一层函数。

    1. function testable(isTestable) {
    2. return function(target) {
    3. target.isTestable = isTestable;
    4. }
    5. }
    6.  
    7. @testable(true) class MyTestableClass () {}
    8. document.write(MyTestableClass.isTestable) // true
    9.  
    10. @testable(false) class MyClass () {}
    11. document.write(MyClass.isTestable) // false

    如果想要为类的实例添加方法,可以在修饰器函数中,为目标类的prototype属性添加方法。

    1. function testable(target) {
    2. target.prototype.isTestable = true;
    3. }
    4.  
    5. @testable
    6. class MyTestableClass () {}
    7.  
    8. let obj = new MyClass();
    9.  
    10. document.write(obj.isTestable) // true

     

     

            } else {

    import  export

    这两个家伙对应的就是es6自己的module功能。

    我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程,再用一种简单的方法把这些小工程连接在一起。

    这有可能导致两个问题:

    1、一方面js代码变得很臃肿,难以维护。

    2、另一方面我们常常得很注意每个script标签在html中的位置,因为它们通常有依赖关系,顺序错了可能就会出bug。

    在es6之前为解决上面提到的问题,我们得利用第三方提供的一些方案,主要有两种CommonJS(服务器端)和AMD(浏览器端,如require.js)。

    如果想了解更多AMD,尤其是require.js,可以参看这个教程:why modules on the web are useful and the mechanisms that can be used on the web today to enable them

    而现在我们有了es6的module功能,它实现非常简单,可以成为服务器和浏览器通用的模块解决方案。

    ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。

    代码如下:

    export命令


    模块功能主要由两个命令构成:export和import。

    • export命令用于用户自定义模块,规定对外接口;
    • import命令用于输入其他模块提供的功能,同时创造命名空间(namespace),防止函数名冲突。

    ES6允许将独立的JS文件作为模块,允许一个JavaScript脚本文件调用另一个脚本文件。

    现有profile.js文件,保存了用户信息。ES6将其视为一个模块,里面用export命令对外部输出了三个变量。

    1. // profile.js
    2. var firstName = 'Michael';
    3. var lastName = 'Jackson';
    4. var year = 1958;
    5.  
    6. export {firstName, lastName, year};

     

     

                //此处访问test 值为undefined

    传统的写法

    首先我们回顾下 require.js 的写法。假设我们有两个js文件: index.js 和 content.js,现在我们想要在index.js 中使用 content.js 返回的结果,我们要怎么做呢?

    首先定义:

    //content.js

    define('content.js', function() {

        return 'A cat';

    });

    然后require:

    //index.js 

    require(['./content.js'], function(animal) {

        console.log(animal);  //A cat

    });

    那CommonJS是怎么写的呢?

    // index.js

    var animal = require('./content.js');

    //content.js

    module.exports = 'A cat';

    import命令


    使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。

    1. // main.js
    2. import {firstName, lastName, year} from './profile';
    3.  
    4. function sfirsetHeader(element) {
    5. element.textContent = firstName ' ' lastName;
    6. }

    上面代码属于另一个文件main.js,import命令就用于加载profile.js文件,并从中输入变量。import命令接受一个对象(用大括号表示),里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

    如果想为输入的变量重新取一个名字,import语句中要使用as关键字,将输入的变量重命名。

    1. import { lastName as surname } from './profile';

    ES6支持多重加载,即所加载的模块中又加载其他模块。

     

     

     

     

    export命令除了输出变量,还可以输出方法或类(class)。下面是一个circle.js文件,它输出两个方法area和circumference。

    1. // circle.js
    2. export function area(radius) {
    3. return Math.PI * radius * radius;
    4. }
    5. export function circumference(radius) {
    6. return 2 * Math.PI * radius;
    7. }

    然后,main.js输入circlek.js模块。

    1. // main.js
    2. import { area, circumference } from 'circle';
    3. document.write("圆面积:" area(4));
    4. document.write("圆周长:" circumference(14));

    上面写法是逐一指定要输入的方法。另一种写法是整体输入。

    1. import * as circle from 'circle';
    2. document.write("圆面积:" circle.area(4));
    3. document.write("圆周长:" circle.circumference(14));

     

     

     

            console.log(test)

    ES6的写法

    // index.js

    import animal from './content';  

    // content.js

    export default 'A cat';

    以上我把三者都列出来了,妈妈再也不用担心我写混淆了...

    module命令


    module命令可以取代import语句,达到整体输入模块的作用。

    1. // main.js
    2. module circle from 'circle';
    3.  
    4. document.write("圆面积:" circle.area(4));
    5. document.write("圆周长:" circle.circumference(14));

    module命令后面跟一个变量,表示输入的模块定义在该变量上。

     

     

     

            }

    ES6 module的其他高级用法

    //content.js

    export default 'A cat';

    export function say(){ 

        return 'Hello!'

    }

    export const type = 'dog';

    上面可以看出,export命令除了输出变量,还可以输出函数,甚至是类(react的模块基本都是输出类)

    //index.js

    import { say,type} from './content';

    let says = say();

    console.log(`The ${type} says ${says}`);// The dog says Hello

    这里输入的时候要注意:大括号里面的变量名,必须与被导入模块(content.js)对外接口的名称相同。

    如果还希望输入content.js中输出的默认值(default), 可以写在大括号外面。

    //index.js

    import animal, { say,type} from './content';

    let says = say();

    console.log(`The ${type} says ${says} to ${animal}`);//The dog says Hello to A cat

    修改变量名

    此时我们不喜欢type这个变量名,因为它有可能重名,所以我们需要修改一下它的变量名。在es6中可以用as实现一键换名。

    //index.js

    import animal, { say, type as animalType } from './content';

    let says = say();

    console.log(`The ${animalType} says ${says} to ${animal}`);//The dog says Hello to A cat

    模块的整体加载

    除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。

    //index.js 

    import animal, *as content from'./content';

    let says = content.say();

    console.log(`The ${content.type} says ${says} to ${animal}`);//The dog says Hello to A cat

    通常星号*结合as一起使用比较合适。

    export default命令


    为加载模块指定默认输出,使用export default命令。

    1. // export-default.js
    2. export default function () {
    3. document.write('foo');
    4. }

    上面代码是一个模块文件export-default.js,它的默认输出是一个函数。

    其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。

    1. // import-default.js
    2. import customName from './export-default';
    3. customName(); // 'foo'

    上面代码的import命令,可以用任意名称指向export-default.js输出的方法。需要注意的是,这时import命令后面,不使用大括号。

     

     

     

        //此处访问test 值为undefined

    终极秘籍

    考虑下面的场景:上面的 content.js 一共输出了三个变量(default, say, type),假如我们的实际项目当中只需要用到 type 这一个变量,其余两个我们暂时不需要。我们可以只输入一个变量:

    import { type } from './content';

    由于其他两个变量没有被使用,我们希望代码打包的时候也忽略它们,抛弃它们,这样在大项目中可以显著减少文件的体积。

    ES6帮我们实现了!

    不过,目前无论是webpack还是browserify都还不支持这一功能...

    如果你现在就想实现这一功能的话,可以尝试使用rollup.js

    他们把这个功能叫做Tree-shaking,意思就是打包前让整个文档树抖一抖,把那些并未被依赖或使用的东西统统抖落下去。

    看看他们官方的解释吧:

    Normally if you require a module, you import the whole thing. ES2015 lets you just import the bits you need, without mucking around with custom builds. It's a revolution in how we use libraries in JavaScript, and it's happening right now.

    结尾附上阮一峰老师的博客地址:ECMAScript 6 入门

    模块的继承


    模块之间也可以继承。

    假设有一个circleplus模块,继承了circle模块。

    1. // circleplus.js
    2.  
    3. export * from 'circle';
    4. export var e = 2.71828182846;
    5. export default function(x) {
    6. return Math.exp(x);
    7. }

    上面代码中的“export *”,表示输出circle模块的所有属性和方法,export default命令定义模块的默认方法。

    这时,也可以将circle的属性或方法,改名后再输出。

    1. // circleplus.js
    2.  
    3. export { area as circleArea } from 'circle';

    上面代码表示,只输出circle模块的area方法,且将其改名为circleArea。

    加载上面模块的写法如下。

    1. // main.js
    2.  
    3. module math from "circleplus";
    4. import exp from "circleplus";
    5. document.write(exp(math.pi));

    上面代码中的"import exp"表示,将circleplus模块的默认方法加载为exp方法。

     

     

     

     

     

     

     

     

    图片 10

     

        }

    所以不用关心bool是否为true or false。实际上,无论如何test都会被创建声明。

    接下来ES6主角登场:

    我们通常用let和const来声明,let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域?

    在一个函数内部

    在一个代码块内部

    说白了 {}大括号内的代码块即为let 和 const的作用域。

    看以下代码:

        function aa() {

        if(bool) {

              let test = 'hello man'

            }else {

                //test 在此处访问不到

                console.log(test)

            }

    模块化的原理,ES2015核心内容。}

    let的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。

    再来说说const。

        const name = 'lux'

        name = 'joe' //再次赋值此时会报错

    说一道面试题

        var funcs = []

            for (var i = 0; i < 10; i ) {

                funcs.push(function() { console.log(i) })

            }

            funcs.forEach(function(func) {

                func()

            })

    这样的面试题是大家常见,很多同学一看就知道输出 10 十次

    但是如果我们想依次输出0到9呢?两种解决方法。直接上代码。

        // ES5告诉我们可以利用闭包解决这个问题

        var funcs = []

        for (var i = 0; i < 10; i ) {

            func.push((function(value) {

                return function() {

                    console.log(value)

                }

            }(i)))

        }

        // es6

        for (let i = 0; i < 10; i ) {

            func.push(function() {

                console.log(i)

            })

        }

    达到相同的效果,es6简洁的解决方案是不是更让你心动!!!

    2.模板字符串

    es6模板字符简直是开发者的福音啊,解决了ES5在字符串功能上的痛点。

    第一个用途,基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

        //es5 

        var name = 'lux'

        console.log('hello' name)

        //es6

        const name = 'lux'

        console.log(`hello ${name}`) //hello lux

    第二个用途,在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

        // es5

        var msg = "Hi

        man!

        "

        // es6

        const template = `

            hello world

        `

    对于字符串es6当然也提供了很多厉害的方法。说几个常用的。

        // 1.includes:判断是否包含然后直接返回布尔值

        let str = 'hahay'

        console.log(str.includes('y')) // true

        // 2.repeat: 获取字符串重复n次

        let s = 'he'

        console.log(s.repeat(3)) // 'hehehe'

        //如果你带入小数, Math.floor(num) 来处理

    3.函数

    函数默认参数

    在ES5我们给函数定义参数默认值是怎么样?

        function action(num) {

            num = num || 200

            //当传入num时,num为传入的值

            //当没传入参数时,num即有了默认值200

            return num

        }

    但细心观察的同学们肯定会发现,num传入为0的时候就是false, 此时num = 200 与我们的实际要的效果明显不一样

    ES6为参数提供了默认值。在定义函数时便初始化了这个参数,以便在参数没有被传递进去时使用。

        function action(num = 200) {

            console.log(num)

        }

        action() //200

        action(300) //300

    箭头函数

    ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。

    箭头函数最直观的三个特点。

    不需要function关键字来创建函数

    省略return关键字

    继承当前上下文的 this 关键字

        //例如:

        [1,2,3].map( x => x 1 )

        //等同于:

        [1,2,3].map((function(x){

            return x 1

        }).bind(this))

    说个小细节。

    当你的函数有且仅有一个参数的时候,是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{};例如:

        var people = name => 'hello' name

        //参数name就没有括号

    作为参考

    var people = (name, age) => {

            const fullName = 'h' name

            return fullName

        } 

        //如果缺少()或者{}就会报错

    4.拓展的对象功能

    对象初始化简写

    ES5我们对于对象都是以键值对的形式书写,是有可能出现键值对重名的。例如:

        function people(name, age) {

            return {

                name: name,

                age: age

            };

        }

    键值对重名,ES6可以简写如下:

        function people(name, age) {

            return {

                name,

                age

            };

        }

    ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法:

        const people = {

            name: 'lux',

            getName: function() {

                console.log(this.name)

            }

        }

    ES6通过省略冒号与 function 关键字,将这个语法变得更简洁

        const people = {

            name: 'lux',

            getName () {

                console.log(this.name)

            }

        }

    ES6 对象提供了Object.assign()这个方法来实现浅复制。Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象,然后返回目标对象。第一参数即为目标对象。在实际项目中,我们为了不改变源对象。一般会把目标对象传为{}

        const obj = Object.assign({}, objA, objB)

    5.更方便的数据访问--解构

    数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息,ES6新增了解构,这是将一个数据结构分解为更小的部分的过程

    ES5我们提取对象中的信息形式如下:

        const people = {

            name: 'lux',

            age: 20

        }

        const name = people.name

        const age = people.age

        console.log(name ' --- ' age)

    是不是觉得很熟悉,没错,在ES6之前我们就是这样获取对象信息的,一个一个获取。现在,解构能让我们从对象或者数组里取出数据存为变量,例如

        //对象

        const people = {

            name: 'lux',

            age: 20

        }

        const { name, age } = people

        console.log(`${name} --- ${age}`)

        //数组

        const color = ['red', 'blue']

        const [first, second] = color

        console.log(first) //'red'

        console.log(second) //'blue'

    6.Spread Operator 展开运算符

    ES6中另外一个好玩的特性就是Spread Operator 也是三个点儿...接下来就展示一下它的用途。

    组装对象或者数组

        //数组

        const color = ['red', 'yellow']

        const colorful = [...color, 'green', 'pink']

        console.log(colorful) //[red, yellow, green, pink]

        //对象

        const alp = { fist: 'a', second: 'b'}

        const alphabets = { ...alp, third: 'c' }

        console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

    }

    有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项

    const number = [1,2,3,4,5]

        const [first, ...rest] = number

        console.log(rest) //2,3,4,5

        //对象

        const user = {

            username: 'lux',

            gender: 'female',

            age: 19,

            address: 'peking'

        }

        const { username, ...rest } = user

        console.log(rest) //{"address": "peking", "age": 19, "gender": "female"

    }

    对于 Object 而言,还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名,右边覆盖左边

        const first = {

            a: 1,

            b: 2,

            c: 6,

        }

        const second = {

            c: 3,

            d: 4

        }

        const total = { ...first, ...second }

        console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

    7.import 和 export

    import导入模块、export导出模块

        //全部导入

        import people from './example'

        //有一种特殊情况,即允许你将整个模块当作单一对象进行导入

        //该模块的所有导出都会作为对象的属性存在

        import * as example from "./example.js"

        console.log(example.name)

        console.log(example.age)

        console.log(example.getName())

        //导入部分

        import {name, age} from './example'

        // 导出默认, 有且只有一个默认

        export default App

        // 部分导出

        export class App extend Component {};

    以前有人问我,导入的时候有没有大括号的区别是什么。下面是我在工作中的总结:

    1.当用export default people导出时,就用 import people 导入(不带大括号)

    2.一个文件里,有且只能有一个export default。但可以有多个export。

    3.当用export name 时,就用import { name }导入(记得带上大括号)

    4.当一个文件里,既有一个export default people, 又有多个export name 或者 export age时,导入就用 import people, { name, age }

    5.当一个文件里出现n多个 export 导出很多模块,导入时除了一个一个导入,也可以用import * as example

    8. Promise

    在promise之前代码过多的回调或者嵌套,可读性差、耦合度高、扩展性低。通过Promise机制,扁平化的代码机构,大大提高了代码可读性;用同步编程的方式来编写异步代码,保存线性的代码逻辑,极大的降低了代码耦合性而提高了程序的可扩展性。

    说白了就是用同步的方式去写异步代码。

    发起异步请求

        fetch('/api/todos')

          .then(res => res.json())

          .then(data => ({ data }))

          .catch(err => ({ err }));

    今天看到一篇关于面试题的很有意思。

        setTimeout(function() {

          console.log(1)

        }, 0);

        new Promise(function executor(resolve) {

          console.log(2);

          for( var i=0 ; i<10000 ; i ) {

            i == 9999 && resolve();

          }

          console.log(3);

        }).then(function() {

          console.log(4);

        });

        console.log(5);

    Excuse me?这个前端面试在搞事!

    当然以上promise的知识点,这个只是冰山一角。需要更多地去学习应用。

    9.Generators

    生成器( generator)是能返回一个迭代器的函数。生成器函数也是一种函数,最直观的表现就是比普通的function多了个星号*,在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。

    这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号,机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了,直到下一个人再次唤起才会继续吐票。

    OK。说说迭代器。当你调用一个generator时,它将返回一个迭代器对象。这个迭代器对象拥有一个叫做next的方法来帮助你重启generator函数并得到下一个值。next方法不仅返回值,它返回的对象具有两个属性:done和value。value是你获得的值,done用来表明你的generator是否已经停止提供值。继续用刚刚取票的例子,每张排队号就是这里的value,打印票的纸是否用完就这是这里的done。

        // 生成器

        function *createIterator() {

            yield 1;

            yield 2;

            yield 3;

        }

        // 生成器能像正规函数那样被调用,但会返回一个迭代器

        let iterator = createIterator();

        console.log(iterator.next().value); // 1

        console.log(iterator.next().value); // 2

        console.log(iterator.next().value); // 3

    那生成器和迭代器又有什么用处呢?

    围绕着生成器的许多兴奋点都与异步编程直接相关。异步调用对于我们来说是很困难的事,我们的函数并不会等待异步调用完再执行,你可能会想到用回调函数,(当然还有其他方案比如Promise比如Async/await)。

    生成器可以让我们的代码进行等待。就不用嵌套的回调函数。使用generator可以确保当异步调用在我们的generator函数运行一下行代码之前完成时暂停函数的执行。

    那么问题来了,咱们也不能手动一直调用next()方法,你需要一个能够调用生成器并启动迭代器的方法。就像这样子的

        function run(taskDef) { //taskDef即一个生成器函数

            // 创建迭代器,让它在别处可用

            let task = taskDef();

            // 启动任务

            let result = task.next();

            // 递归使用函数来保持对 next() 的调用

            function step() {

                // 如果还有更多要做的

                if (!result.done) {

                    result = task.next();

                    step();

                }

            }

            // 开始处理过程

            step();

        }

    生成器与迭代器最有趣、最令人激动的方面,或许就是可创建外观清晰的异步操作代码。你不必到处使用回调函数,而是可以建立貌似同步的代码,但实际上却使用 yield 来等待异步操作结束。

    总结

    ES6的特性远不止于此,但对于我们日常的开发开说。这已经是够够的了。还有很多有意思的方法。比如findIndex...等等。包括用set来完成面试题常客数组去重问题。我和我的小伙伴们都惊呆了!

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:模块化的原理,ES2015核心内容

    关键词:

上一篇:和特别管理的变异,中的神器

下一篇:没有了