历史

JS诞生之初面向简单页面开发，没有模块的概念。

后来页面逐渐复杂，人类构造到 IIFE 立即执行函数来模拟模块；

之前也有雅虎的实践，使用命名空间作为模块名。

最后衍生出面向各种使用场景的 JS 模块标准。

例如：

面向浏览器的 AMD

面向Nodejs的 CommonJS

对于这种分裂状态ES标准也在尽力弥合。但是目前流行的实践是 UMD模式。

AMD

https://www.davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/

Asynchronous Module Definition (AMD) has gained traction on the frontend, with RequireJS being the most popular implementation.

Here’s module foo with a single dependency on jquery:

//    filename: foo.js

define(['jquery'], function ($) {

    //    methods

    function myFunc(){};

    //    exposed public methods

    return myFunc;

});

And a little more complicated example with multiple dependencies and multiple exposed methods:

//    filename: foo.js

define(['jquery', 'underscore'], function ($, _) {

    //    methods

    function a(){};    //    private because it's not returned (see below)

    function b(){};    //    public because it's returned

    function c(){};    //    public because it's returned

    //    exposed public methods

    return {

        b: b,

        c: c

    }

});

CommonJS

CommonJS is a style you may be familiar with if you’re written anything in Node (which uses a slight variant). It’s also been gaining traction on the frontend with Browserify.

Using the same format as before, here’s what our foo module looks like in CommonJS:
//    filename: foo.js

//    dependencies

var $ = require('jquery');

//    methods

function myFunc(){};

//    exposed public method (single)

module.exports = myFunc;
And our more complicate example, with multiple dependencies and multiple exposed methods:
//    filename: foo.js

var $ = require('jquery');

var _ = require('underscore');

//    methods

function a(){};    //    private because it's omitted from module.exports (see below)

function b(){};    //    public because it's defined in module.exports

function c(){};    //    public because it's defined in module.exports

//    exposed public methods

module.exports = {

    b: b,

    c: c

};

兼容模式UMD

Since CommonJS and AMD styles have both been equally popular, it seems there’s yet no consensus. This has brought about the push for a “universal” pattern that supports both styles, which brings us to none other than the Universal Module Definition.

The pattern is admittedly ugly, but is both AMD and CommonJS compatible, as well as supporting the old-style “global” variable definition:

(function (root, factory) {

    if (typeof define === 'function' && define.amd) {

        // AMD

        define(['jquery'], factory);

    } else if (typeof exports === 'object') {

        // Node, CommonJS-like

        module.exports = factory(require('jquery'));

    } else {

        // Browser globals (root is window)

        root.returnExports = factory(root.jQuery);

    }

}(this, function ($) {

    //    methods

    function myFunc(){};

    //    exposed public method

    return myFunc;

}));

And keeping in the same pattern as the above examples, the more complicated case with multiple dependencies and multiple exposed methods:

(function (root, factory) {

    if (typeof define === 'function' && define.amd) {

        // AMD

        define(['jquery', 'underscore'], factory);

    } else if (typeof exports === 'object') {

        // Node, CommonJS-like

        module.exports = factory(require('jquery'), require('underscore'));

    } else {

        // Browser globals (root is window)

        root.returnExports = factory(root.jQuery, root._);

    }

}(this, function ($, _) {

    //    methods

    function a(){};    //    private because it's not returned (see below)

    function b(){};    //    public because it's returned

    function c(){};    //    public because it's returned

    //    exposed public methods

    return {

        b: b,

        c: c

    }

}));

(Sep 2014 edit: fixed syntax for CommonJS in the last example)

官网

https://github.com/umdjs/umd

This repository formalizes the design and implementation of the Universal Module Definition (UMD) API for JavaScript modules. These are modules which are capable of working everywhere, be it in the client, on the server or elsewhere.

The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others). In many cases it uses AMD as a base, with special-casing added to handle CommonJS compatibility.

Variations

Regular Module

amdWeb.js - Defines a module that works with AMD and browser globals. If you also want to export a global even when AMD is in play (useful if you are loading other scripts that still expect that global), use amdWebGlobal.js.

returnExports.js - Defines a module that works in Node, AMD and browser globals. If you also want to export a global even when AMD is in play (useful if you are loading other scripts that still expect that global), use returnExportsGlobal.js.

commonjsStrict.js - Defines a module that works with more CommonJS runtimes, and for modules that will have a circular dependency. If you also want to export a global even when AMD is in play (useful if you are loading other scripts that still expect that global), use commonjsStrictGlobal.js

jQuery Plugin

jqueryPlugin.js - Defines a jQuery plugin that works with AMD and browser globals.

ES6模块

https://www.cnblogs.com/polk6/p/js-ES6-module.html

 // math.js

 export function add(a, b) {

     return a + b;

 }

 // app.js：指定使用math模块的add命名导出

 import { add } from './math.js';

 console.log(add(1, 2)); // => 3

 // 导入所有的命名导出作为math对象的成员

 import * as math from './math.js';

 console.log(math.add(1, 2)); // => 3

巴特西

JS通用模块模式 UMD

历史

AMD

CommonJS

兼容模式UMD

官网

Variations

Regular Module

jQuery Plugin

ES6模块

最新文章

热门文章