JS通用模块模式 UMD

历史

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

 1 // math.js
 2 export function add(a, b) {
 3     return a + b;
 4 }
 5  
 6 // app.js：指定使用math模块的add命名导出
 7 import { add } from './math.js';
 8 console.log(add(1, 2)); // => 3
 9  
10 // 导入所有的命名导出作为math对象的成员
11 import * as math from './math.js';
12 console.log(math.add(1, 2)); // => 3