美文网首页
ES6模块系统

ES6模块系统

作者: bonon | 来源:发表于2016-08-13 16:54 被阅读50次

    ES6模块系统具有以下特性:

    • 使用export关键词导出对象。这个关键字可以无限次使用;
    • 使用import关键字将其它模块导入某一模块中。它可用来导入任意数量的模块;
    • 支持模块的异步加载;
    • 为加载模块提供编程支持。

    导出对象

    在现有的模块系统中,每个JavaScript代码文件在ES6中都是一个模块。只有模块中的对象需要被外部调用时,模块才会输出对象,其余则都是模块的私有对象。该处理方式将细节进行封装,仅导出必要的功能。

    单个导出(内联导出)
    一个模块中可无数次使用export,所有的对象将被一起导出。

    export var haha = 'haha'
    export class lala {  
      ...
    }  
    export function gaga () {  
      ...
    }
    

    成组导出
    一齐导出该模块中的全部对象。

    var haha = 'haha'
    class lala {  
      ...
    }  
    function gaga () {  
      ...
    }
    export {haha, lala, gaga};  
    

    在导出时,可以重命名方便其他模块调用。

    export {  
      new_haha as haha,  
      new_lala as lala  
    };  
    

    Default导出
    使用关键字default,可将对象标注为default对象导出。default关键字在每一个模块中只能使用一次。它既可以用于内联导出,也可以用于一组对象导出声明中。
    内联

    export default var haha = 'haha'
    export default class lala {  
      ...
    }  
    export default function gaga () {  
      ...
    }
    

    成组

    export default {  
      haha,  
      lala,
      gaga  
    };  
    

    导入模块

    现有模块可以使用关键字import导入到其它模块。一个模块可以被导入任意数量的模块中。

    无对象导入
    模块包含一些逻辑要执行,不需要导出任何对象

    import './moduleNoOutObj.js';  
    

    ** 导入默认对象**

    import ha from './moduleDefault.js';  
    

    ** 导入命名的对象**

    import {haha, lala} from './module.js';  
    

    导入默认对象和命名对象(同时)

    import {default as ha, haha} from './module.js';  
    

    这种情况下,默认对象必须定义一个别名

    ** 导入所有对象**

    import * as sasa from './module.js';  
    

    sasa这一别名将指向所有从module导出的对象。在导入模块中,它们作为属性可被访问。

    可编程式的按需导入

    如果想基于某些条件或等某个事件发生后再加载需要的模块,可通过使用加载模块的可编程API(programmatic API)来实现。使用System.import方法,可按程序设定加载模块。这是一个异步的方法,并返回Promise。
    该方法的语法示例如下:

    System.import('./module1.js')  
      .then(function(module1){  
        //use module1  
      }, function(e){  
        //handle error  
    });  
    

    如果模块加载成功且将导出的模块成功传递给回调函数,Promise将会通过。如果模块名称有误或由于网络延迟等原因导致模块加载失败,Promise将会失败。

    相关文章

      网友评论

          本文标题:ES6模块系统

          本文链接:https://www.haomeiwen.com/subject/drgesttx.html