您现在的位置:首页 >> 前端 >> 内容

commonjs、amd、cmd、umd规范

时间:2017/3/16 9:24:00 点击:

  核心提示:commonjs、amd、cmd、umd规范,得益于nodejs的commonjs规范和AMD和CMD规范,和 模块化开发(积累模块库和增强开发速度。[模块库,工具函数库,ui组件库])。Common...

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) 

Tags:CO OM MM MO 
作者:网络 来源:longlc123的