得益于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)
https://www.cnblogs.com/jackyWHJ/articles/4943271.html
这个链接总结的不错 http://www.tuicool.com/articles/f6BvE3