ECMAScript 6知识点总结 --- Module模块化

  • export命令
    export var year = 2008;
    
    var year = 2008;
    export {year};
    
    var year = 2008;
    export {year as time};

    export语句不能放在函数中
  • import命令
    import {year} from './year'
    
    import {year as time} from './year'

    不允许更改输入接口
    import a from './a'
    a = {}  
    //Syntax Error : 'a' is read-only;

    但是可以改写属性

    a.foo = 'hi'

    import命令会提升到模块头部,首先执行


    import中不能使用表达式和变量


    import语句会执行所加载的模块,但是不输入任何值

    import 'year'
  • export default
    匿名函数

    export default function() {
    console.log(666)
    }

    其它模块加载时,可以为该匿名函数指定任意名字

    import num from './number'
    num()

    非匿名函数

    export default function num() {
        console.log(666)
    }

    或者写成

    function num() {
        console.log(666)
    }
    export default num

    此时函数名num在模块外是无效的,其他模块加载时同样当作匿名函数

  • 对比export defaultexport
    使用export default时,对应的import不需要使用大括号

    export default function num() {
        //....
    }
    
    import num from './num'

    使用export时,对应的import需要使用大括号

    export function num() {
        //...
    }
    
    import {num} from './num'
  • export 与 import 的复合写法

    import {a, b} from './module';
    export {a, b};
    // 可以简化为
    export {a, b} from './module';

    模块的接口改名和整体输出,也可以采用这种方法

    export {a as mya} from './a'
    
    export * from './a'
  • 模块的继承
    有一个b模块继承了a模块

    // b.js
    export * from './a'

    并在c模块中加载

    // c.js
    import * as data from './b'
  • 跨模块常量

    // a.js
    export const A = 1;
    export const B = 2;
    export const C = 3;
    
    // b.js
    import * as num from './a'
    console.log(num.A)  // 1
    
    //c.js
    import {A, B} from './a'
    console.log(A)  // 1

猜你喜欢

转载自blog.csdn.net/qq_35415374/article/details/82706197