模块格式：CommonJS AMD CMD UMD ES6

皆为前端工程化中定义模块(module)的规则，如：模块标识，模块依赖，模块实现，模块对外接口，模块加载；

实现时有：异步，同步，依赖前置，依赖就近，预执行，懒执行，软依赖，硬依赖，模块对象支持类型等差异；

Javascript的灵活性、借鉴性、标准难产落地性，带来模块的实现方式(运行时加载/编译静态加载)有本质的差异，代码风格(require,return/import,export)有形式上的差异。

CommonJS

CommonJS Modules/1.0规范，概述, wiki

在服务器上或本地桌面应用程序，定义了模块格式，如node模块的实现，

仅支持对象类型的模块，同步加载。

如模块qux：

// filename: qux.js// dependencies
var $ = require('jquery');// methods
function foo(){};// exposed public method (single)
module.exports = foo;

// filename: qux.js
var $ = require('jquery');
var _ = require('underscore');// methods
function foo(){};    //    private because it's omitted from module.exports (see below)
function bar(){};    //    public because it's defined in module.exports
function baz(){};    //    public because it's defined in module.exports// exposed public methods
module.exports = {bar: bar,baz: baz
};

AMD

Asynchronous Module Definition, 概述, Why AMD?

异/同步加载

支持对象、函数、构造器、字符串、JSON等各种类型的模块。

AMD 早期实现为 依赖前置，提前执行

define(id?, dependencies?, factory);

如模块qux：

// filename: qux.js
define(['jquery'], function ($) {// methodsfunction foo(){};// exposed public methodsreturn foo;
});

// filename: qux.js
define(['jquery', 'underscore'], function ($, _) {// methodsfunction foo(){}; // private because it's not returned (see below)function bar(){}; // public because it's returnedfunction baz(){}; // public because it's returned// exposed public methodsreturn {bar: bar,baz: baz}
});

兼容CommonJS规范：

// filename: qux.js
define(function (require, exports, module) {// dependenciesvar $ = require('jquery');_ = require('underscore');// exposed public methodsexports.foo= function () {}
});

CMD

Common Module Definition, 概述, 中文

define(function(require,exports,module){...});

CMD实现为 依赖就近，延迟执行

UMD

Universal Module Definition

识别当前环境所支持的模块风格，兼容不同的加载规范

// code from https://github.com/tangshuang/omd
(function(factory){    "use strict";// change to your module namevar NAME = 'omd';if(typeof define == 'function' && (define.cmd || define.amd)) { // amd & cmddefine(function(require){var requires = {/*** dependences: * 1. need to fill requires* 2. use require, moudule name should be defined before* 3. relative path is not allowed in cmd & amd mode*/// 'jquery' : require('jquery'),// 'bootstrap' : require('bootstrap')};var _require_ = function(key) {return requires[key];}return factory(_require_);});}else if(typeof module !== 'undefined' && typeof exports === 'object') { // nodejsmodule.exports = factory(require); // in node, require can be used everywhere generally}else { // none modulethis[NAME] = factory(function(key){return this[key];}.bind(this));}
}).call(this || (typeof window !== 'undefined' ? window : global),function(require){    "use strict";// require('jquery');/*** use return object to export. i.e.* return {name : 'module name',init : function(opotions) {},destory : function() {}};*/});

(function (root, factory) {if (typeof define === 'function' && define.amd) {// AMDdefine(['jquery', 'underscore'], factory);} else if (typeof exports === 'object') {// Node, CommonJS-likemodule.exports = factory(require('jquery'), require('underscore'));} else {// Browser globals (root is window)root.returnExports = factory(root.jQuery, root._);}
}(this, function ($, _) {// methodsfunction foo(){}; // private because it's not returned (see below)function bar(){}; // public because it's returnedfunction baz(){}; // public because it's returned// exposed public methodsreturn {bar: bar,baz: baz}
}));

ES6

import, export

ES标准下的模块，具有静态结构特性，编译时 Tree Shaking 可去 dead-code ；

引用自及扩展阅读：

Modules - CommonJS Spec Wiki
Modules | Node.js Documentation
Why Web Modules?
David Calhoun: What is AMD, CommonJS, and UMD?
黄玄：JavaScript Module Loader
黄玄：JavaScript 模块化七日谈
阮一峰：Module 的语法 - ECMAScript 6入门
阮一峰：Javascript模块化编程
掘金：JavaScript 模块简史
玉伯：前端模块化开发那点历史 · seajs/seajs
GongYong：Node.js模块的接口设计模式

模块格式：CommonJS AMD CMD UMD ES6相关推荐

commonjs是什么_JavaScript模块化标准CommonJS/AMD/CMD/UMD/ES6Module的区别
JS-模块化进程随着js技术的不断发展,途中会遇到各种问题,比如模块化. 那什么是模块化呢,他们的目的是什么? 定义:如何把一段代码封装成一个有用的单元,以及如何注册此模块的能力.输出的值依赖引用: ...
CommonJS/AMD/CMD/UMD
为什么会有这几种模式? 起源:Javascript模块化模块化就是把复杂问题分解成不同模块,这样可维护性高,从而达到高复用,低耦合. 1.Commonjs CommonJS是服务器端模块的规范,No ...
关于 CommonJS AMD CMD UMD 规范的差异总结
根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的. // foo.js var ...
关于JavaScript的模块（CommonJS, AMD, CMD, ES6模块）的理解
Javascript模块化就是解决将代码进行分隔,作用域隔离,模块之间的依赖管理等多个方面问题. 这样的优点不言而喻:1.可维护性2.命名空间私有化,可以避免污染全局环境3.代码重用,通过模块可以方便 ...
CommonJS,AMD,CMD,ES6,require 和 import 详解
CommonJS,AMD,CMD,ES6 commonJS用同步的方式加载模块.在服务端,模块文件都存在本地磁盘,读取非常快,所以这样做不会有问题.但是在浏览器端,限于网络原因,更合理的方案是使用异步 ...
JS JavaScript模块化（ES Module/CommonJS/AMD/CMD）
前言前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了, jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得 ...
让你的插件兼容AMD, CMD ,CommonJS和原生 JS
模块标准 // 支持AMD,CMD以及原生js的引用if (typeof module !== 'undefined' && typeof exports === 'object' & ...
JavaScript模块 commonJS、AMD、UMD、ES6
模块化早期,立即调用函数闭包.类.对象实现 Node有自己的模块系统 ES6,JavaScript依托import.export的静态模块系统(不能实现模块的按需加载) 虽然浏览器很早就支持动态导入 ...
node中模块、AMD与CMD、ES6模块，node中使用ES6
1.Nodejs 中的模块在node环境中一个js文件就是一个模块(module) 我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口 node的 ...

模块格式：CommonJS AMD CMD UMD ES6

CommonJS

AMD

CMD

UMD

ES6

模块格式：CommonJS AMD CMD UMD ES6相关推荐

最新文章

热门文章