JS中的模块规范

以下全部是自己的理解

为了更好的引用代码库,模块的概念产生了。为了更好的规范模块,模块标准产生了。常见的是CommonJS, AMD, CMD,ES6 Module.

CommonJS:

 javascript只支持在浏览器里执行,为了让js在服务器端也可以执行,CommonJS API定义了一些应用程序常用的一些功能的实现。在浏览器编写程序可以不使用模块化,毕竟前端程序相对简单,可是在服务器端为了和操作系统和其他应用程序交互,就要使用模块。 NodeJS, webpack都是以CommonJS规范写的。

CommonJS有一个全局方法require(),用于加载模块。

CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}

每个文件就是一个模块,CommonJS规范规定每个模块内部module变量代表当前模块,这个变量是一个对象,exports属性是对外的接口,加载某个模块就是加载该模块的module.exports属性。

AMD:异步模块定义

服务器端编程一般文件已经存在于本地硬盘上,加载起来比较快。在浏览器环境下,要从服务器端加载模块,就要采用非同步模式,所以浏览器端一般采用AMD规范。

AMD规范使用define方法定义模块,define(id?, dependencies?, factory);

实现了AMD规范的库:require.js, curl.js

require.js的诞生,就是为了解决这两个问题:

1. 实现js文件的异步加载,避免网页失去响应;

2. 管理模块之间的依赖性,便于代码的编写和维护。

CMD:通用模块定义

实现了CMD的规范是sea.js

AMD CMD的区别:AMD推崇依赖前置,提前执行,CMD推崇依赖就近,延迟执行

/** AMD写法 **/

define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) {

    // 等于在最前面声明并初始化了要用到的所有模块

    a.doSomething();

    if (false) {

        // 即便没用到某个模块 b,但 b 还是提前执行了

        b.doSomething()

    }

});

/** CMD写法 **/

define(function(require, exports, module) {

    var a = require(‘./a‘); //在需要时申明

    a.doSomething();

    if (false) {

        var b = require(‘./b‘);

        b.doSomething();

    }

});

/** sea.js **/

// 定义模块 math.js

define(function(require, exports, module) {

    var $ = require(‘jquery.js‘);

    var add = function(a,b){

        return a+b;

    }

    exports.add = add;

});

// 加载模块

seajs.use([‘math.js‘], function(math){

    var sum = math.add(1+2);

});

ES6 Module

浏览器和服务器通用的模块解决方案,主要有两个命令组成:export, import. export用于规定模块的对外接口, import用于引入其他模块。

import命令会被javascript引擎静态分析,在编译时就引入模块代码,不是在代码运行时。

缺点:无法实现条件动态加载。

参考文章:http://www.cnblogs.com/chenguangliang/p/5856701.html

你可能感兴趣的:(JS中的模块规范)