JS 3种规范 CommonJS AMD UMD

最新推荐文章于 2024-11-16 22:35:42 发布

叶丶Sir

最新推荐文章于 2024-11-16 22:35:42 发布

阅读量845

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 js 文章标签： AMD CMD UMD CommonJS JS规范

本文链接：https://blog.youkuaiyun.com/ldyeyuguo1346/article/details/76900539

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

6 篇文章

订阅专栏

本文详细介绍了JavaScript中的三种模块规范：CommonJS、AMD和UMD。包括每种规范的特点、适用场景及其具体使用方法。CommonJS适用于服务器端，强调同步加载；AMD则针对前端，采用异步方式；而UMD则能同时兼容二者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.js
define(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
    }
}));