commonjs、amd、cmd、umd规范,得益于nodejs的commonjs规范和AMD和CMD规范,和 模块化开发(积累模块库和增强开发速度。[模块库,工具函数库,ui组件库])。
Common.js 规范的写法
Eg:定义一个模块,导出整个模块用 module,导出模块的一个方法用module.exports。如果没有导出方法或模块就算引入了模块也没用
var $ = require(“jquery”); function myFunc() {} module.exports = myFunc;
AMD规范的写法(require.js)
// AMD 默认推荐的是 define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好 a.doSomething() // 此处略去 100 行 b.doSomething() ... })
AMD模块引用
<script data-main="scripts/main" src="scripts/require.js"></script> require.config({ paths: { foo: 'libs/foo-1.1.3' } }); require( ['foo'], function( foo ) { foo.init(); });
机制
RequireJS使用head.appendChild()将每一个依赖加载为一个script标签。
RequireJS等待所有的依赖加载完毕,计算出模块定义函数正确调用顺序,然后依次调用它们。
在同步加载的服务端JavaScript环境中,可简单地重定义require.load()来使用RequireJS。build系统就是这么做的。该环境中的require.load实现可在build/jslib/requirePatch.js中找到。
未来可能将该部分代码置入require/目录下作为一个可选模块,这样你可以在你的宿主环境中使用它来获得正确的加载顺序。
CMD规范的写法(sea.js)
// CMD define(function(require, exports, module) { var a = require('./a') a.doSomething() // 此处略去 100 行 var b = require('./b') // 依赖可以就近书写 b.doSomething() // ... })
CMD的模块引用
<script src="../sea-modules/seajs/seajs/2.2.0/sea.js"></script> seajs.config({ base: "../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" } }); seajs.use("../static/hello/src/main");
Umd规范(AMD和CommonJS的糅合)
AMD 浏览器第一的原则发展 异步加载模块。
CommonJS 模块以服务器第一原则发展,选择同步加载,它的模块无需包装(unwrapped modules)。
这迫使人们又想出另一个更通用的模式UMD (Universal Module Definition)。希望解决跨平台的解决方案。
UMD先判断是否支持Node.js的模块(exports)是否存在,存在则使用Node.js模块模式。
再判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。
(function (window, factory) { if (typeof exports === 'object') { module.exports = factory(); } else if (typeof define === 'function' && define.amd) { define(factory); } else { window.eventUtil = factory(); } })(this, function () { //module ... });
jQuery中umd规范的写法
(function(global, factory) {//做是否可以模块化判断 if (typeof define === 'function' && define.amd) define(function() { return factory(global) }) else factory(global) }(this, function(window) { var Zepto = (function() { var undefined, key, $, classList, emptyArray = [], concat = emptyArray.concat, filter = emptyArray.filter, slice = emptyArray.slice, document = window.document, elementDisplay = {}, classCache = {}, cssNumber = { 'column-count': 1, 'columns': 1, 'font-weight': 1, 'line-height': 1,'opacity': 1, 'z-index': 1, 'zoom': 1 }, fragmentRE = /^\s*<(\w+|!)[^>]*>/, singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/, tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig, rootNodeRE = /^(?:body|html)$/i, capitalRE = /([A-Z])/g, ......... } )
var Zepto = (function() { ...})() //if '$' is not yet defined, point it to 'zepto' window.Zepto = zepto; window.$ === undefined && (window.$ = zepto)