javascript的模块发展

谨以此文记录了解js模块的过程

随着ES6的出现,js模块已经成为正式的标准了。曾经为了解决js模块问题而发展起来的民间秘籍,requireJs(AMD)、SeaJs(CMD)、Node(CommonJs),已经或者不久的将来会成为历史。了解历史也是很重要的,因为正式标准就是以民间秘籍为基础而发展起来的,有些规范仍然被广泛应用于开发中(CommonJS)。再者,进入有些公司,你的工作可能是继承前辈们的代码,为了不至于始终一脸懵,认识一下这些东西是很重要的。

关于js模块的发展历史

github上玉伯发表的issue:地址

CommonJs模块规范

  • 用于同步加载模块
  • 主要应用于服务端

关于CommonJS的说明:commonjs

Node参考CommonJS实现了一套模块系统,npm上有大量的CommonJS的包,ECMAScript取代CommonJS可能还需要一些时日。

CommonJs对模块的定义很简单,主要分为模块引用、模块定义和模块标识。

模块引用

使用require()方法,该方法接收模块标识,引入一个模块的API到当前上下文。

var math = require("math");
math.add();

模块定义

上下文提供exports对象用于导出当前模块的方法或者变量,并且它是唯一导出的出口。module对象,代表模块自身,exports是module的属性。将方法挂载在exports对象上作为属性即可定义导出的方式。

exports.add = function () {
    var sun = 0,
        i = 0,
        args = arguments,
        l = args.length;

    while (i < 1) {
        sum += args[i++];
    }
    return sum;
}

模块标识

模块标识是传递给require()方法的参数,它必须是符合小驼峰命名的字符串,或者以.,..开头的相对路径,或者绝对路径。它可以没有文件名后缀.js。

优势

  1. 语法简单,只需要定义module.exports属性,剩下的模块代码与标准Javascript无差异。引用模块的方法也很简单,只需要使用require函数
  2. CommonJS是Node.js默认的模板格式,所以我们可以是用成千上万的包

缺点

  1.  最大的缺点就是不显示的支持浏览器,(浏览器端的javascript不支持module变量和export属性,当然也有方法可以在浏览器中使用CommonJS模块,可以查看这里)由此也产生了另外的用于前端浏览器的规范AMD

AMD与requireJS

AMD是CommonJS的一个延伸,制定了能够在前端应用的模块规范。

  • 异步加载模块
  • 主要用于浏览器

github中AMD的定义——地址

规范

// 模块定义
    // id和dependencies都是可选的
    // factory是模块的实际代码
    define(id, dependencies, factory);

    define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
        exports.verb = function () {
            return beta.verb();
            //Or:
            return require("beta").verb();
        }
    });
    // 不带id(名称)
    define(["alpha"], function (alpha) {
        return {
            verb: function () {
                return alpha.verb() + 2;
            }
        };
    });
    // 不带名称和依赖
    define({
        add: function (x, y) {
            return x + y;
        }
    });

    // 引用模块
    // module是要加载的模块
    // callback在加载完成之后运行
    require([module], callback)
    require(['a', 'b'], function (a, b) {
        //modules a and b are now available for use.
    });

优势

  1. 自动处理依赖,无序考虑引入顺序
  2. 异步加载模块,避免阻塞

requireJS

requireJS实现了AMD规范,具体使用方法请移步——中文API

CMD与SeaJS

CMD是玉伯在学习requireJs的过程中,自己提出的一个规范。SeaJs作为实现该规范的工具,一度成为与requireJs并肩的工具(当然主要是在国内)

玉伯在2015年宣布Seajs已死。ES2015正式发布了。不再需要民间力量修补这个漏洞了。

ES6Module

以上所有规范都是ES6之前产生的,为ES6奠定了基础。ES6汲取了CommonJS和AMD的优点:

  • 与CommonJS类似,语法简单,一个文件是一个模块
  • 与AMD类似,同样支持异步加载模块

语法

http://es6.ruanyifeng.com/#docs/module

总结

CommonJS规范,语法简单、同步加载、主要应用于服务端。目前在Node中仍然占据重要地位。

AMD规范,作为CommonJS的延伸,语法略微复杂一些,异步加载,主要应用于浏览器。

ES6 Module作为javascript内置的模块标准,虽然浏览器目前并不完全支持,但是有Babel等转换器,帮助转换ES6语法到ES5语法,从现在开始学习并应用ES6,也许是比较好的选择。

参考

  1. js模块发展历史——地址
  2. 知乎上玉伯关于CMD和AMD的区别的回答——地址
  3. require.js——中文官网
  4. 《深入理解es6》
  5. exploringJs——https://exploringjs.com/es6/

 

posted @ 2019-06-18 00:06  Jamie0327  阅读(179)  评论(0编辑  收藏  举报
levels of contents