美文网首页
1-1 模块系统介绍

1-1 模块系统介绍

作者: winzhyming | 来源:发表于2017-03-31 18:03 被阅读0次

    1.<script>标签加载

    <script src="module1.js"></script>

    <script src="module2.js></script>

    <script src="module3.js></script>

    (1) 多个文件的变量冲突

    (2) 文件按序加载

    (3) 程序依赖关系不明确,难维护


    2.CommonJS

    允许模块通过require方法来同步加载所要依赖的其他模块,然后通过exports 或者 module.exports 到导出开发的方法。

    require('jquery');

    require('./../module01.js');

    exports.doSomething = function() {};

    module.exports = {};

    (1) 同步加载,好使长,且不能并行加载多模块


    3.AMD(Asynchronous Module Definition)

    通过define(id, dependences, factory), 声明模块的时候指定所有的依赖,当作参数传递到factory中,,对依赖进行前置执行。

    define('module', ['dep01', 'dep02'], function(dep01, dep02) {

       return obj;

    });

    require(['module', './../file'], function(module, file) {

      // code execute

    });

    (1) 适合浏览器异步加载,可以并行加载多模块

    (1) 定义模块复杂,增加开发成本

    (2) 模块化应用独立,通用性较差


    4.CMD(Common Module Definition)

    5.UMD(Universal Module Definition)

    以上两种接触较少,不比较


    6.ES6 模块

    增加了javascript语言层面的模块体系定义。

    最大的静态化,以便编译时能确定模块的依赖关系,以及输入和输出的变量。

    CommonJS 和 AMD 都只能在运行是定义这些。

    import 'jquery';

    export function functionName() {}

    module 'localModule' {}

    新兴语法,支持性较差。


    Webpack特点总结:

    相关文章

      网友评论

          本文标题:1-1 模块系统介绍

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