前端AMD、CMD和commonJs-前端知识
前端AMD和CMD是在模块化的基础上产生并且得到大幅度的引用的。
AMD 即Asynchronous Module Definition（点击链接可以查看AMD面试题），中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范；
CMD 即Common Module Definition ，中文名是同步模块定义的意思，是SeaJs在推广过程中对模块规范化的定义的产出。该规范明确了模块的基本书写格式和基本交互规则
CommonJs:官方网址：http://www.commonjs.org/ CommonJs用在服务器端，AMD和CMD用在浏览器环境
这三者的主要作用是：
1.javaScript模块化加载而生的
2.便于团队的人员的协作，代码不至于很乱
3.在网络请求中的记载时间的优化
AMD使用方法：
AMDjavaScript不支持，所以出现我们经常用的requireJs,实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出
requireJS主要解决两个问题
- 多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
- js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长
具体写法如下：
1.在文件中首先要引入require.js,
2.定义一个模块
3.加载模块
1 define(function(){
2 var keyboard = {
3 'init':function(){
4 console.log(2);
5 }
6 }
7 return keyboard;
8 })
这是我们创建的一个文件keyboard.js;
<html>
<head>
<meta charset="utf-8">
<title>requireJs</title>
<script src="./require.js"></script>
</head>
<body>
<div>代码测试</div>
<script>
require(['./keyboard'],function(keyboard){
keyboard.init();
})
</script>
</body>
</html>
注意require的语法，这里引入是可以省略文件后缀.js的，后面function参数定义了这个模块的名称，函数内部直接调用就可以了。下面是编译后的代码，这里我们会看到我们引用的keyboard.js多了一个async属性，这里实现了异步加载。
语法如下：
requireJS定义了一个函数 define，它是全局变量，用来定义模块
define(id?, dependencies?, factory);- id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
- dependencies：是一个当前模块依赖的模块名称数组
- factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值
在页面上使用require函数加载模块
require([dependencies], function(){});require()函数接受两个参数
- 第一个参数是一个数组，表示所依赖的模块
- 第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块
require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题
CMD使用方法：
1.引入seajs
2.定义模块文件
3.引入模块
4.seajsAPI：http://yslove.net/seajs/
代码示例如下：
<html>
<head>
<meta charset="utf-8">
<title>requireJs</title>
<script src="./seajs.js"></script>
</head>
<body>
<div>代码测试</div>
<script>
seajs.use('./keyboard',function(keyboard){
keyboard.init();
})
</script>
</body>
</html>
/*define(function(){
var keyboard = {
'init':function(){
console.log(2);
}
}
return keyboard;
})*/
//seajs
define(function(require, exports, module) {
// 模块代码
console.log(require,exports,module);
module.exports ={
'init':function(){
console.log(2);
}
}
});
/*define(function(){
var keyboard = {
'init':function(){
console.log(2);
}
}
return keyboard;
})*/
//seajs
/*define(function(require, exports, module) {
// 模块代码
console.log(require,exports,module);
module.exports ={
'init':function(){
console.log(2);
}
}
});*/
//seajs第二种定义
define(function(require, exports, module) {
// 模块代码
console.log(require,exports,module);
return {
'init':function(){
console.log(2);
}
}
});
从上面可以看出，通过seajs定义模块时，需要注意写法，一种是直接return一个对象，另一种是module.exports,再看一下浏览器解析的效果
<html><head>
<meta charset="utf-8">
<title>requireJs</title>
<script src="./seajs.js"></script>
</head>
<body style="">
<div>代码测试</div>
<script>
seajs.use('./keyboard',function(keyboard){
keyboard.init();
})
</script> </body></html>
使用时，需要使用seajs.use(),更多用法，可以参考前面的api
CMD异步用法：
define(function(require, exports, module) {
// 模块代码
console.log(require,exports,module);
return {
'init':function(){
var $body = document.getElementsByTagName('body')[0];
var html = '<div>这是一个提示样式</div>';
$body.append(html);
}
}
});
/*define(function(){
var keyboard = {
'init':function(){
console.log(2);
}
}
return keyboard;
})*/
//seajs
/*define(function(require, exports, module) {
// 模块代码
console.log(require,exports,module);
module.exports ={
'init':function(){
console.log(2);
}
}
});*/
//seajs第二种定义
define(function(require, exports, module) {
var loading = '';
// 模块代码
require.async('./loading',function(loading){
loading = loading.init();
});
return {
'init':function(){
console.log(2);
},
'loadingInit':function(){
console.log(loading);
}
}
});
<html>
<head>
<meta charset="utf-8">
<title>requireJs</title>
<script src="./seajs.js"></script>
</head>
<body>
<div>代码测试</div>
<script>
seajs.use('./keyboard',function(keyboard){
keyboard.init();
keyboard.loadingInit();
})
</script>
</body>
</html>
在编译后的html中没有加载loading.js,keyboard.js,但是在network中会有显示，
<html><head>
<meta charset="utf-8">
<title>requireJs</title>
<script src="./seajs.js"></script>
</head>
<body style="">
<div>代码测试</div>
<script>
seajs.use('./keyboard',function(keyboard){
keyboard.init();
keyboard.loadingInit();
})
</script> <div>这是一个提示样式</div></body></html>
CommonJs：是主要为了JS在后端的表现制定的，他是不适合前端的，为什么这么说呢？前端主要的问题是1.带宽，2.加载时需要通过网络加载3.代码需要从一个服务器端分发到多个客户端执行
CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
require()用来引入外部模块；exports对象用于导出当前模块的方法或变量，唯一的导出口；module对象就代表模块本身。
区别：
1、AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
2、CMD推崇就近依赖，只有在用到某个模块的时候再去require
本文参考：
前端AMD、CMD和commonJs-前端知识的更多相关文章
- AMD,CMD,UMD,CommonJS
http://www.jianshu.com/p/bd4585b737d7 http://www.jianshu.com/p/09ffac7a3b2c
- js模块系统 - amd|cmd|commonjs|esm|umd
写过前端代码大概率听说过amd cmd umd commonjs esm这些名词, 想当初我第一次看到这些的时候, 人都麻了, 都是些啥啊. 后来我知道了, 这些都是js的模块规范. amd - 浏览 ...
- 前端模块化(AMD和CMD、CommonJs)
知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs. 知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏览器 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- 研究一下javascript的模块规范（CommonJs/AMD/CMD）
最近写react需要使用nodejs作为开发环境,需要通过npm安装一些第三方的依赖库,因此慢慢感觉到nodejs基础薄弱对我带来了一些不安全感,尤其是javascript模块这一块听到了很多概念,比 ...
- JS JavaScript模块化（ES Module/CommonJS/AMD/CMD）
前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了, jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得 ...
- js模块化编程之CommonJS和AMD/CMD
js模块化编程commonjs.AMD/CMD与ES6模块规范 一.CommonJS commonjs的require是运行时同步加载,es6的import是静态分析,是在编译时而不是在代码运行时.C ...
- 关于 CommonJS AMD CMD UMD
1. CommonJS CommonJS 原来叫 ServerJS, 是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用requi ...
- FW: AMD, CMD, CommonJS和UMD
javascript 我是豆腐不是渣 4月5日发布 推荐 2 推荐 收藏 32 收藏,486 浏览 今天由于项目中引入的echarts的文件太大,requirejs经常加载超时,不得不分开来加载ech ...
随机推荐
- jvm(1)类的加载(三)（线程上下文加载器）
简介: 类加载器从 JDK 1.0 就出现了,最初是为了满足 Java Applet 的需要而开发出来的. Java Applet 需要从远程下载 Java 类文件到浏览器中并执行. 现在类加载器在 ...
- webpack初学者（1）
最近在学习webpack的总结,不完善的希望各位提出宝贵的建议.本篇是以webpack3.0版本为基础的学习总结. 一.webpack的概念及作用 wepack是一个模块打包兼优化工具.往往一个项目中 ...
- D04——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D04 20180810内容纲要: 1 内置函数 2 装饰器 3 生成器 4 迭代器 5 软件目录结构规范 6 小结 1 内置函数 内置函数方法详 ...
- iOS开发－－应用国际化，应用内切换语言
1.前言 自己负责的项目需要做国际化,并且要求应用内部切换语言.这个是可以做到的,也并不难,可以直接戳Github看一下 https://github.com/leo90821/Localiztion ...
- 微服务是"银弹"吗？
前言:所谓"银弹",本意是用金属银做成的子弹:在古老的传说里它是杀死狼人的有效武器.在著作<人月神话>也有描述.微服务是当前软件界流行的名词,那么它能成为像银弹一样厉害 ...
- 7.xamarin.android 发布签名与控制apk大小
概述 做了xamarin android 后大家想打包一个apk,发布给其他人使用本章我们将带领大家如何打包签名一个apk. 打包 对于VS2017 或者是VS MAC来说打包一个APK非常简单. 首 ...
- cat /proc/sys/net/ipv4/ip_forward 0 解决办法
[root@localhost java]# cat /proc/sys/net/ipv4/ip_forward 出于安全考虑,Linux系统默认是禁止数据包转发的. 所谓转发即当主机拥有多于一块的网 ...
- 最全面的 Android 编码规范指南
最全面的 Android 编码规范指南 本文word文档下载地址:http://pan.baidu.com/s/1bXT75O 1. 前言 这份文档参考了 Google Java 编程风格规范和 Go ...
- protocol buffer开发指南
ProtoBuf 是一套接口描述语言(IDL)和相关工具集(主要是 protoc,基于 C++ 实现),类似 Apache 的 Thrift).用户写好 .proto 描述文件,之后使用 protoc ...
- 用python itchat写一个微信机器人自动回复
首先看一下效果: 进入正题: 一.首先要去图灵机器人网站注册一个机器人账号: 链接:http://www.tuling123.com/ 你可以获取自己的图灵机器人apikey 懒得话不注册也可以,我下 ...