JavaScript模块化

UMD 叫做通用模块定义规范(Universal Module Definition),它可以通过运行时或者编译时让同一个代码模块在使用 CommonJs、CMD 甚至是 AMD 的项目中运行。它没有自己专有的规范,是集结了 CommonJs、CMD、AMD 的规范于一身,

  ((root, factory) => {
        if (typeof define === 'function' && define.amd) {
            //AMD
            define(['jquery'], factory);
        } else if (typeof exports === 'object') {
            //CommonJS cmd
            var $ = requie('jquery');
            module.exports = factory($);
        } else {
            root.testModule = factory(root.jQuery);
        }
    })(this, ($) => {
        //todo
    });

CMD 叫做通用模块定义规范(Common Module Definiton)

格式如下:

define(factory);

具体用法如下:

  // moudle-a.js
    define(function(require, exports, module) {

        module.exports = {
            a: 1
        };

    });

    // moudle-b.js
    define(function(require, exports, module) {

        var ma = require('./moudle-a');
        var b = ma.a + 2;
        module.exports = {
            b: b
        };

    });

CommonJs 是一种 JavaScript 语言的模块化规范,它通常会在服务端的 Nodejs 上使用。

在 CommonJs 的模块化规范中,每一个文件就是一个模块,拥有自己独立的作用域、变量、以及方法等,对其他的模块都不可见。CommonJS规范规定,每个模块内部,module 变量代表当前模块。这个变量是一个对象,它的 exports 属性(module.exports)是对外的接口。加载某个模块,其实是加载该模块的 module.exports 属性。require 方法用于加载模块。

 //moudle-a.js
    moudle.exports = {
        a: 1
    };

    //moudle-b.js
    var ma = require('./moudle-a');
    var b = ma.a + 2;
    module.exports = {
        b: b
    };
// CMD
    define(function(require, exports, module) {
        var a = require('./a')
        a.doSomething()
        var b = require('./b')
        b.doSomething()
            ...
    })
    // AMD 
    define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
        a.doSomething()
            ...
            b.doSomething()
            ...
    })

你可能感兴趣的:(前端,模块化)