AMD、CMD、CommonJs规范

 将js代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的,比如CommonJS、AMD和CMD。接下来我们看一下这几种规范。


模块化规范

CommonJs是使用在服务器端,是同步加载的,NodeJs是对此规范的实践。

AMD,CMD是使用在浏览器端的,是异步加载的,require.js与sea.js是依赖此规范实现。

1.1 CommonJs规范实例

    CommonJs对模块的定义十分简单,主要分为模块定义 、模块引用、模块标识。

根据此规范,一个js文件就是一个模块,有自己的作用域,不会污染全局作用域。在一个文件里面定义的变量、函数、类都是私有的,对其他文件不可见。

在模块中,存在一个module对象,她代表模块自身。其中exports是module的属性,该属性是一个对象,用于挂载当前模块的方法或者变量,也是当前模块的唯一导出的出口。以供其他模块使用。

  addTwo.js
-----------------------------------------
export.add = function(a,b){
return a+b;
} //导出模块

在模块中,存在require()方法,这个方法接受模块标示,用来引入一个模块。

 main.js
-----------------------------------------
var a = 5;
var b = 4;
var addTwo = require("./addTwo");//此参数为模块标示 console.log(addTwo.add(a,b));//

CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。AMD规范则是非同步加载模块,允许指定回调函数。由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用。

1.2 AMD规范实例

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。

AMD设计出一个简洁的写模块API:
  define([id], [dependencies], factory);
  第一个参数 id 为字符串类型,表示了模块标识,为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在,那么模块标识必须为顶层的或者一个绝对的标识。
  第二个参数,dependencies ,是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。
  第三个参数,factory,是一个需要进行实例化的函数或者一个对象。

1、html代码

 index.html
---------------
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- 引入require.js -->
<script type="text/javascript" src="http://cdn.bootcss.com/require.js/2.3.3/require.js"></script> </head>
<body>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

  2、js代码

 myName.js
---------------
// 定义模块
define('myName',[],function () {
return 'My name is toTo_li.'
}) yourName.js
---------------
// 定义模块
define('yourName',[],function () {
return 'Your name is boke.'
})

加载模块:AMD模块化规范中使用全局或局部的require函数实现加载一个或多个模块,所有模块加载完成之后的回调函数。

require([module], callback):

[module]:是一个数组,里面的成员就是要加载的模块;
        callback:是模块加载完成之后的回调函数。

  main.js
---------------
// 调用模块
require(['myName','yourName'],function (myName,yourName) {
console.log(myName)
console.log(yourName)
})

1.3 CMD规范实例

CMD是SeaJS 在推广过程中对模块定义的规范化产出

  • 对于依赖的模块AMD是提前执行,CMD是延迟执行。不过RequireJS从2.0开始,也改成可以延迟执行(根据写法不同,处理方式不通过)。

  • CMD推崇依赖就近,AMD推崇依赖前置。

     //AMD
    define(['./a','./b'], function (a, b) { //依赖一开始就写好
    a.test();
    b.test();
    }); //CMD
    define(function (requie, exports, module) { //依赖可以就近书写
    var a = require('./a');
    a.test(); ...
    //软依赖
    if (status) { var b = requie('./b');
    b.test();
    }
    });

AMD、CMD、CommonJs规范的更多相关文章

  1. js模块系统 - amd|cmd|commonjs|esm|umd

    写过前端代码大概率听说过amd cmd umd commonjs esm这些名词, 想当初我第一次看到这些的时候, 人都麻了, 都是些啥啊. 后来我知道了, 这些都是js的模块规范. amd - 浏览 ...

  2. FW: AMD, CMD, CommonJS和UMD

    javascript 我是豆腐不是渣 4月5日发布 推荐 2 推荐 收藏 32 收藏,486 浏览 今天由于项目中引入的echarts的文件太大,requirejs经常加载超时,不得不分开来加载ech ...

  3. AMD, CMD, CommonJS和UMD

    我的Github(https://github.com/tonyzheng1990/tonyzheng1990.github.io/issues),欢迎star 今天由于项目中引入的echarts的文 ...

  4. AMD/CMD/CommonJs到底是什么?它们有什么区别?

    知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs.   知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏 ...

  5. 关于 CommonJS AMD CMD UMD 规范的差异总结

    一.CommonJS 主要是用于服务器端的规范,比如目前的nodeJS. 根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函 ...

  6. 关于 CommonJS AMD CMD UMD 规范的差异总结(转)

    根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的. // foo.js var ...

  7. AMD,CMD.CommonJs和UMD还有es6的模块化对比

    CommonJS CommonJS是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行, ...

  8. JS模块之AMD, CMD, CommonJS、UMD和ES6模块

    CommonJS 传送门 同步加载,适合服务器开发,node实现了commonJS.module.exports和require 判断commonJS环境的方式是(参考jquery源码): if ( ...

  9. AMD CMD commonJS es6

    看到很多人傻傻的分不清楚 AMD.CMD . commonJS . es6的区别,实际上这跟这几年前段技术的发展有很大的关系. 实际上这是JavaScript的模块化思想演进的一个过程. 最开始的时候 ...

  10. 把自己的js模块兼容到AMD CMD CommonJS

    为了让同一个模块可以运行在前后端,在写作过程中需要考虑兼容前端也实现了模块规范的环境.为了保持前后端的一致性,类库开发者需要将类库代码包装在一个闭包内.以下代码演示如何将hello()方法定义到不同的 ...

随机推荐

  1. java代码块的理解

    最近在复习java基础,在看到java代码块的时候,忽然发现自己貌似对于java代码块一无所知,于是赶紧对着一些资料实战演练了一把. 对于java代码块,不难根据名称看出其实就是一些java语句的集合 ...

  2. MIT6.828课程JOS在macOS下的环境配置

    本文将介绍如何在macOS下配置MIT6.828 JOS实验的环境. 写JOS之前,在网上搜寻JOS的开发环境,很多博客和文章都提到"不是32位linux就不好配置,会浪费大量时间在配置环境 ...

  3. [我所理解的REST] 2.REST用来干什么的?

    笔者每当遇到一个新事物的想去了解的时候,总是会问上自己第一个问题,这个新事物是干什么用的?在解释我所理解的REST这个过程中也不例外,这篇博客我们先关注一下REST是干什么用的,然后后续再解释REST ...

  4. PHP(Math的调用)

    <script> //数学函数(用Math来调用)://round=四舍五入最接近的整数// var l = 1.1;// var y1 = Math.round(l);// docume ...

  5. my new day in CNblog

    感谢大家 今天正式在博客园平台开启我的第三个技术面博客 之前一直坚持在csdn平台撰文(http://blog.csdn.net/github_38885296)欢迎参观:) 因为觉得博客园知名度虽不 ...

  6. 【★】RSA-什么是不对称加密算法?

    不对称加密算法RSA浅析 本文主要介绍不对称加密算法中最精炼的RSA算法.我们先说结论,也就是RSA算法怎么算,然后再讲为什么. 随便选取两个不同的大素数p和q,N=p*q,r=(p-1)*(q-1) ...

  7. 配置VNC SERVER 远程访问

    1.安装软件包 # yum install tigervnc-server -y 2. 配置VNC用户 # vim /etc/sysconfig/vncservers VNCSERVERS=" ...

  8. 201521123007《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...

  9. 201521123075 《Java程序设计》第13周学习总结

    1. 本周学习总结 协议 网络中为了进行数据交换(通信)而建立的规则.标准或约定(=语义+语法+规则),比如http, ftp等 IP层协议(Internet Protocol) Internet上的 ...

  10. Java程序设计——学生基本信息管理系统

    1.团队课程设计博客链接 http://www.cnblogs.com/handsome321/p/7067121.html 2.个人负责模块说明 本组课题:学生信息管理系统 本人任务:插入.删除学生 ...