前端模块化
2015-11-21 18:48
399 查看
最近学习了模块化的编程理念
COMMONjs是服务器端模块化的规范,nodejs采用这个规范同步加载。因此也分了三个派别
1.AMD脱离了commonJs,一部加载模块,支持对象函数,字符串,JSON等各种类型的模块。
2.CMD
CMD是SeaJS 在推广过程中对模块定义的规范化产出.SeaJs推崇一个模块一个文件,遵循同一的写法。
UMD是CMD CommonJs的糅合r
CMD和AMD的区别有以下几点:
1.对于依赖的模块AMD是提前执行,CMD是延迟执行。不过RequireJS从2.0开始,也改成可以延迟执行(根据写法不同,处理方式不通过)。
2.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();
}
});
3.AMD的api默认是一个当多个用,CMD严格的区分推崇职责单一。例如:AMD里require分全局的和局部的。CMD里面没有全局的 require,提供 seajs.use()来实现模块系统的加载启动。CMD里每个API都简单纯粹。
例子单页面运用
主页:
配置
COMMONjs是服务器端模块化的规范,nodejs采用这个规范同步加载。因此也分了三个派别
1.AMD脱离了commonJs,一部加载模块,支持对象函数,字符串,JSON等各种类型的模块。
2.CMD
CMD是SeaJS 在推广过程中对模块定义的规范化产出.SeaJs推崇一个模块一个文件,遵循同一的写法。
UMD是CMD CommonJs的糅合r
CMD和AMD的区别有以下几点:
1.对于依赖的模块AMD是提前执行,CMD是延迟执行。不过RequireJS从2.0开始,也改成可以延迟执行(根据写法不同,处理方式不通过)。
2.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();
}
});
3.AMD的api默认是一个当多个用,CMD严格的区分推崇职责单一。例如:AMD里require分全局的和局部的。CMD里面没有全局的 require,提供 seajs.use()来实现模块系统的加载启动。CMD里每个API都简单纯粹。
例子单页面运用
主页:
<body> <div id="content"></div> </body> </html> <script src="js/seajs_modules/sea.js"></script> <script src="js/seajs_config.js"></script>//配置js文件
配置
seajs_config.js文件
seajs.config({ base:".", alias:{ "jquery":"js/seajs_modules/jquery-1.11.2-min", "bootstrap":"js/seajs_modules/bootstrap.min", "reg":"js/modules/reg/reg",//注册页面 "login":"js/modules/login/login",//登录页面 "sse":"js/modules/sse/sse"//显示页面 } }); seajs.use("sse",function(reg){ reg.load(); });
相关文章推荐
- 1 认识Jquery
- HTML5之file控件
- angularjs学习总结
- JavaScript设计模式 - 单例模式
- 第24篇 js小知识和“坑”
- js table
- JS根据本月求上月与上两月,且带前导零
- jQuery
- RESB 0x7dfe-$ 报错
- JS coding thinking
- css案例学习之全局声明*{} 与body{}的区别
- CSS-图片不变形设置
- opengl基础学习专题 (三) 多边形绘制的几种样式
- JavaScript闭包
- react-native试玩(8)-列表视图
- LintCode-剑指Offer-(372)在O(1)时间复杂度删除链表节点
- [BZOJ1593] [Usaco2008 Feb]Hotel 旅馆
- LintCode-剑指Offer-(373)奇偶分割数组
- JQuery EasyUI内Combobox的onChange事件
- angular的filter日期格式