JavaSript模块化 && AMD CMD 详解.....
模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码,被整合优化分割成逻辑性很强的模块时,对于软件是一种何等意义的存在。对于软件行业来说:解耦软件系统的复杂性,使得不管多么大的系统,也可以将管理,开发,维护变得“有理可循”。(等同于Java 高内聚低耦合思想详情请参见Java编程思想第三版)
还有一些对于模块化一些专业的定义为:模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块。那么在理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可。
AMD
define( 模块标识符?, depend?, function);



require();
局部 与 全局 的require
- define( ['require'], function( require ){
- // ...
- } );
- or:
- define( function( require, exports, module ){
- // ...
- } );
- require(String)
- define( function( require ){
- var a = require('a'); // 加载模块a
- } );
- require(Array, Function)
- define( function( require ){
- require( ['a', 'b'], function( a,b ){ // 加载模块a b 使用
- // 依赖 a b 模块的运行代码
- } );
- } );
- require.toUrl( Url )
- define( function( require ){
- var temp = require.toUrl('./temp/a.html'); // 加载页面
- } );
amdjs 的API https://github.com/amdjs/amdjs-api/wiki
RequireJS
- <script data-main='scripts/main' src='scripts/require.js'></script>
- define({
- method1: function(){},
- method2: function(){}
- });
- define(function(){
- return{
- method1: function(){},
- method2: function(){}
- }
- });
- define([ 'module1', 'module2' ], function(m1, m2){
- ...
- });
- define( function( require ){
- var m1 = require( 'module1' ),
- m2 = require( 'module2' );
- ...
- });
- require( ['foo', 'bar'], function( foo, bar ){
- foo.func();
- bar.func();
- } );
- define( function( require ){
- var m1 = require( 'module1' ),
- m2 = require( 'module2' );
- ...
- });
CMD 与 seaJS
CMD
- define({ "foo": "bar" });
- define('this is {{data}}.');
- define( function(require, exports, module) {
- // 模块代码
- });
- define( 'module', ['module1', 'module2'], function( require, exports, module ){
- // 模块代码
- } );
- define(function( require, exports ){
- var a = require('./a');
- a.doSomething();
- });
- define( function(require, exports, module) {
- require.async('.a', function(a){
- a.doSomething();
- });
- });
- define(function( require, exports ){
- exports.foo = 'bar'; // 向外提供的属性
- exports.do = function(){}; // 向外提供的方法
- });
- define(function( require, exports ){
- return{
- foo : 'bar', // 向外提供的属性
- do : function(){} // 向外提供的方法
- }
- });
- define({
- foo : 'bar', // 向外提供的属性
- do : function(){} // 向外提供的方法
- });
- define(function( require, exports ){
- exports = {
- foo : 'bar', // 向外提供的属性
- do : function(){} // 向外提供的方法
- }
- });
- define(function( require, exports, module ){
- module.exports = {
- foo : 'bar', // 向外提供的属性
- do : function(){} // 向外提供的方法
- }
- });
seaJS
- // 加载一个模块
- seajs.use('./a');
- // 加载模块,加载完成时执行回调
- seajs.use('./a',function(a){
- a.doSomething();
- });
- // 加载多个模块执行回调
- seajs.use(['./a','./b'],function(a , b){
- a.doSomething();
- b.doSomething();
- });
AMD 与 CMD 区别到底在哪里?
- // CMD
- define(function(require, exports, module) {
- var a = require('./a')
- a.doSomething()
- // 此处略去 100 行
- var b = require('./b') // 依赖可以就近书写
- b.doSomething()
- // ...
- })
- // AMD 默认推荐的是
- define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
- a.doSomething()
- // 此处略去 100 行
- b.doSomething()
- // ...
- })
amdjs 的 require 接口文档 https://github.com/amdjs/amdjs-api/wiki/require
amdjs 的接口文档 https://github.com/amdjs/amdjs-api/wiki
RequireJS和AMD规范 http://javascript.ruanyifeng.com/tool/requirejs.html
知乎 AMD 和 CMD 的区别有哪些? http://www.zhihu.com/question/20351507
JavaScript模块化开发 - AMD规范 http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-amd
模块化设计 http://baike.baidu.com/view/189730.htm
模块化 http://baike.baidu.com/view/182267.htm
JavaSript模块化 && AMD CMD 详解.....的更多相关文章
- Python包模块化调用方式详解
Python包模块化调用方式详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一般来说,编程语言中,库.包.模块是同一种概念,是代码组织方式. Python中只有一种模块对象类型 ...
- js模块化AMD/CMD
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统 ...
- .NETCore 千星项目模块化开发框架 SimplCommerce 详解
SimplCommerce 是 github 上过千星的.netcore 商城示例项目,本文详解他的模块化框架现实思路,其业务(如产品.订单)不作介绍.因作者文笔水平很差,它又很值得学习和推荐,就算不 ...
- route Cmd详解
第一条命令,配置外网网关: route -p add 0.0.0.0 mask 0.0.0.0 192.168.1.1 第二条命令,配置内网网关:route -p add 192.168.0.0 ma ...
- JavaSript模块化-AMD规范与CMD规范
JavaScript模块化 在了解AMD,CMD规范前,先来简单地了解下什么是模块化,模块化开发. 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处 ...
- Gulp实现静态网页模块化的方法详解
前言: 在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题.比如:整套代码有50个页面,其中有40个页面顶部和底部模块相同.那么同样的两段代码我们复制了40遍(最难受的方法).然后,这个问题就这样解 ...
- 05 ES6模块化规范基础详解
ES6模块规范 1.1 ES6规范说明 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ru ...
- es6的模块化--AMD/CMD/commonJS/ES6
, ); ); }) , )); }); , )); ; export { firstName, lastName, year }; // es6引用 import { firstName, last ...
- Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
随机推荐
- R包——ggplot2(一)
关于ggplot2包(一) 关于ggplot2包(一) ggplot2基本要素 数据(Data)和映射(Mapping) 几何对象(Geometric) 标尺(Scale) 统计变换(Statisti ...
- 通过springmvc的RequestMapping的headers属性的使用
直接上图: springmvc中可以通过@RequestMapping注解折配置headers属性,也就是通过headers属性来配置请求头信息,从而通过这个属性值来映射请求,因为不同浏览器的Acce ...
- C#学习日志 day 1 ------ hello C# !
首先是C#的编译器的安装.这里用vs2013.我用的是Windows 8.1系统,所以安装起来并不难. 双击vs_ultimate.exe 逐步安装就好.这里用校园邮箱在dream spark 上进行 ...
- [C++]Saving the Universe——Google Code Jam Qualification Round 2008
Google Code Jam 2008 资格赛的第一题:Saving the Universe. 问题描述如下: Problem The urban legend goes that if you ...
- 工作学习笔记——GDI泄露检测利器
用.Net写的地图编辑器,最近在一个长时间使用的策划手里频繁挂掉.定位到原因应该是GDI泄露.但在几千行代码里手工寻找泄漏点实在是有些困难,直到在网上找到了这个检测GDI泄露的工具GDILeaks.它 ...
- 男装电子零售商East Dane即将面世_衣装_YOKA时尚网
男装电子零售商East Dane即将面世_衣装_YOKA时尚网 男装电子零售商East Dane即将面世
- HDU1069:Monkey and Banana(DP+贪心)
Problem Description A group of researchers are designing an experiment to test the IQ of a monkey. T ...
- HBA简介及原理
HBA,即主机总线适配器英文“Host Bus Adapter”缩写.是一个使计算机在服务器和存储装置间提供输入/输出(I/O)处理和物理连接的电路板和/或集成电路适配器. 简介 主机总线适配器(Ho ...
- 【原创】ASP.NET Web开发,实现打印Log日志,步骤详解
添加Log需要四步: 一.引用log4net.dll,详见附件:http://pan.baidu.com/s/1c0hab2g 二.项目根目录下,添加 log4net.xml <?xml ver ...
- c# 遍历文件夹及其所有文件
利用VS创建一个winform应用程序,遍历指定文件夹(photos)内的所有文件夹及其文件.具体程序如下: namespace 遍历文件夹及其所有文件 { public partial class ...