JS 3种规范 CommonJS AMD UMD

标签（空格分隔）： CommonJS AMD UMD

---

参考文章：
1.commonJS、AMD、UMD 快速概览： http://web.jobbole.com/82238/
2.详解 commonJS、AMD、UMD : http://www.cnblogs.com/chenguangliang/p/5856701.html
3.AMD编译过程讲解: http://web.jobbole.com/85382/?utm_source=blog.jobbole.com&utm_medium=relatedPosts

1.CommonJS (nodejs 模块规范实现)

写法：require(‘xxx’) // 同步加载模块

分析：
a.对服务器端几乎不影响，因为是读取本地文件
b.对前端浏览器使用有影响，需要等待网络时间来导入包

优缺点：
优点：规范后端编程规范和包管理
缺点：同步加载模块，对前端的时间响应有影响

commonJS 如何使用?

cmd 导出包:

var xxx = {}module.exports = xxx

cmd 引入包:

var xxx = require('xxx')

2.AMD (Asynchronous Module Definition)

写法：define([‘a’,’b’],function(a,b){}) // 异步代码，适用于前端和后端

第三方库：

主要有两个Javascript库实现了AMD规范：require.js 和 curl.js。

require 如何使用?

配置

require.config({    baseUrl: "js/lib",    paths: {        "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min",　　　　"underscore": "underscore.min",        "backbone": "backbone.min"　　　　}　　});

AMD 如何使用?

AMD导出包:
返回的是一个对象

// math.jsdefine(function (){　　var add = function (x,y){　　　　return x+y;　　};　　return {　　　　add: add　　};});

// main.js//如果依赖其他包,依赖包参数必须是 **数组**：define(['otherLib'], function(otherLib){　　function foo(){　　　　myLib.doSomething();　　}　　return {　　　　foo : foo　　};});

AMD引用包：

require(['math'], function (math){　　alert(math.add(1,1));});

3.UMD (同时支持上述两种规范)

用法：(function(root,fn){}(this,fn))

例子：

(function (root, factory) {    if (typeof define === 'function' && define.amd) {        // AMD        define(['jquery', 'underscore'], factory);    } else if (typeof exports === 'object') {        // Node, CommonJS之类的        module.exports = factory(require('jquery'), require('underscore'));    } else {        // 浏览器全局变量(root 即 window)        root.returnExports = factory(root.jQuery, root._);    }}(this, function ($, _) {    //    方法    function a(){};    //    私有方法，因为它没被返回 (见下面)    function b(){};    //    公共方法，因为被返回了    function c(){};    //    公共方法，因为被返回了    //    暴露公共方法    return {        b: b,        c: c    }}));