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