js模块化(AMD/CMD/UMD/ES6 module)

序

模块化设计，简单地说就是程序的编写不是开始就逐条录入计算机语句和指令，而是首先用主程序、子程序、子过程等框架把软件的主要结构和流程描述出来，并定义和调试好各个框架之间的输入、输出链接关系。逐步求精的结果是得到一系列以功能块为单位的算法描述。以功能块为单位进行程序设计，实现其求解算法的方法称为模块化。模块化的目的是为了降低程序复杂度，使程序设计、调试和维护等操作简单化。

js模块化常见方式

• 命名空间
• commonJs
• AMD/CMD/UMD
• ES6 module

命名空间法

通常做法“库名.类别名.方法名”

案例一

var MyModule = {};
MyModule.type = MyModule.type || {};
MyModule.type.method = function () {
    //handle
};

案例二

//YUI模块化做法

YUI.add('shopClass', function (Y) {
    Y.davglass = function () {
        Y.log('shop here!');
    };
}, '2.0.1', {
    requires: ['flower', 'fruits']
});

YUI.use('shopClass', function (Y) {
    Y.shopClass();
});

//或者
YUI().applyConfig({
    modules: {
        shopClass: {
            fullpath: './shopClass.js'
        }
    }
});

YUI().use('shopClass', function (Y) {
    Y.shopClass();
    //module shopClass will be avaliable here.
});

CommonJS

依赖于nodejs服务端

案例

var students = require('./students');
var teacher = require('./teacher');
var school = require('./school');

var createAppModule = {
    //handle
};

exports = module.exports = createAppModule;

AMD模块化

AMD是Async Module Definition ，即异步方式的模块化。
经典案例RequireJS 的模块化方式。

特点：

• 用require加载模
• 使用define定义模块
• 依赖前置，提前执行

查看参考规范说明

requirejs案例演示

//定义底层模块，通常采用匿名法实现
define('student', function () { //通常不写student
    var student = {};
    student.name = 'zhangwuji';
    student.age = 18;
    return student;
});
//老师模块,依赖学生模块student
define('teacher', ['student'], function (student) { // //通常不写teacher
    var teacher = {};
    teacher.name = 'zhangsanfeng';
    teacher.student = student;
    return teacher;
});

//school模块,引用模块student，teacher
require(['student', 'teacher'], function (student, teacher) {
    //handle
});

CMD模块化

CMD是Common Module Definition，即公共模块定义法

特点：

• 一个文件一个模块
• 使用define来定义一个模块
• 使用require来加载一个模块
• 懒执行

SeaJS案例演示：

define(function (require, exports, module) {
    var $ = require('jquery');
    var storages = require('./lib/storages');
    //通过exports对外提供接口
    exports.storageSomething = {
        //handle
    };
    //或者 通过 module.exports 提供整个接口
    module.exports = {
        //handle
    }
});

UMD模块化法

UMD 是Universal Module Definition的缩写，即通用模块的定义法。

通用的模块化方式，首先判断是否支持AMD，再判断是否支持CommonJs，否则都没有的话，则使用全局变量的方式来实现。

案例演示：

(function (win, factory) {
    if (typeof define === 'function' && define.amd) {
        define([], factory);
    } else if (typeof exports === 'object') {
        module.exports = factory();
    } else {
        win.returnExports = factory();
    }
})(this, function () {
    return {
        //handle
    };
});

ES6 module法

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

es6 模块化案例

通常采用匿名导出

export default class {
    //handle
}

模块导入

import test from './test';

更多关于es6模块化