amd-cmd-requirejs

为什么要使用模块化?

1.解决命名冲突
2.依赖管理
3.提高代码可读性
4.代码解耦,提高复用性

CMD、AMD、CommonJS 规范分别指什么?有哪些应用

CMD规范

CMD(Common Module Definition)即通用模块定义,用于浏览器端的规范, 在 CMD 规范中,一个模块就是一个文件.代码的书写格式如下:
define

define(id?,d?,factory)
因为CMD推崇一个文件一个模块,所以经常就用文件名作为模块id,CMD推崇依赖就近,所以一般不在define的参数中写依赖,factory 为函数时,表示是模块的构造方法。执行该构造方法,可以得到模块向外提供的接口。
factory 方法在执行时,默认会传入三个参数require、exports 和 module.

function(require,exports,module)
require 是一个方法,用来获取其他模块提供的接口
exports 是一个对象,用来向外提供模块接口
module 是一个对象,上面存储了与当前模块相关联的一些属性和方法
例如:

// math.js
define(function(require, exports, module) {
  exports.add = function() {   //向外提供add的接口
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});

//increment.js
define(function(require, exports, module) {
  var add = require('math').add;    //按需加载依赖math模块
  exports.increment = function(val) {  //向外提供increment的接口
    return add(val, 1);
  };
});

//program.js
define(function(require, exports, module) {
  var inc = require('increment').increment;
  var a = 1;
  inc(a); // 2
  module.id == "program";
});

例2:

// 定义模块 myModule.js  
define(function(require,exports,module) { 
      var $ = require('jquery.js') 
     $('div').addClass('active'); 
});
// 加载模块
 seajs.use(['myModule.js'],function(my){
    code
 });

对于CMD的应用,最有代表性的就是SeaJS了。

AMD规范

AMD(Asynchronous Module Definition)即异步模块定义规范,它是依赖前置 (依赖一开始就写好) ,所有的require都被提前执行,AMD可以解决两个问题:
1.多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器。
2.js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长。
  AMD定义模块的规则使模块和模块的依赖可以被异步加载,这和浏览器的异步加载模块的环境刚好适应。
它的模块定义如下:
define(id?, dependencies?, factory);
参数说明:
id
指定义中模块的名称,可选。如果没有提供该参数,模块的名称应该默认为模块加载器请求的指定脚本的名称。如果提供了该参数,模块名必须是“顶级”的和绝对的(不允许相对名称)。

dependencies
包含一组当前模块依赖的,已被模块定义的模块标识。依赖参数是可选的,如果忽略此参数,它应该默认为["require", "exports", "module"]。然而,如果工厂方法的长度属性小于3,加载器会选择以函数的长度属性指定的参数个数调用工厂方法。

factory(工厂方法)
模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值。
示例1:

define('modal', ['jQuery', 'dialog'], function($, Dialog){
   $('.modal').show();
   Dialog.open();
});

示例2:

<!DOCTYPE html>  
<html lang="en">  
<head>   
  <meta charset="UTF-8">   
  <title>AMD</title>  
</head>  
<body>   
  <script data-main="scripts/main" src="require.js"></script>  
</body>  
</html>
引入了require.js,然后使用data-main属性指定入口文件scripts/main(这里省略后缀.js)。

在index.html同级下创建一个文件夹scripts,创建三个js文件:a.js、b.js、mian.js.
scripts

//a.js
define('a', function(require, exports, module) {   
  exports.getTime = function() {   
    return new Date();   
  }  
});

//b,js
define('b', ['require', 'exports', 'a'], function(require, exports,a) {
  exports.test = function() {
    return {   
      now: a.getTime()    
    };   
  }  
});

main.js
require(['b'], function(b) {   
  console.log(b.test());  
});

AMD的应用有RequireJS 、curl 、Dojo 等。

CommonJS 规范

CommonJS是服务器端模块的规范,CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。
CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。

CommonJS模块的特点如下:

所有代码都运行在模块作用域,不会污染全局作用域。
模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存。
模块加载的顺序,按照其在代码中出现的顺序。

CommonJS定义的模块分为:模块引用(require)/ 模块定义(exports)/模块标识(module)。
示例:

//math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};

//increment.js
var add = require('math').add;
exports.increment = function(val) {
    return add(val, 1);
};

//program.js
var inc = require('increment').increment;
var a = 1;
inc(a); 
// 2

使用 requirejs 完善入门任务15,包括如下功能:

 1. 首屏大图为全屏轮播
 2. 有回到顶部功能
 3. 图片区使用瀑布流布局(图片高度不一),下部有加载更多按钮,点击加载更多会加载更多数据(数据在后端 mock)
 4.  使用 r.js 打包应用

代码

被build.js和main.js里的baseURL搞得心力交瘁,/(ㄒoㄒ)/~~,还是不太明白那几个路径的关系,只能用gitbash一个一个调。

若水GIF截图_2017年8月14日17点44分58秒.gif

参考
CMD 规范
AMD 规范
CommonJS 规范
详解 JavaScript 模块化开发

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 为什么要使用模块化? 最主要的目的:解决命名冲突依赖管理 其他价值提高代码可读性代码解耦,提高复用性 CMD、AM...
    Eazer阅读 650评论 3 1
  • 题目1: 为什么要使用模块化? 解决命令冲突 依赖管理 代码解耦,提高代码的重用性 提高代码的可读性参考 题目2:...
    Komolei阅读 243评论 0 0
  • 题目1: 为什么要使用模块化? 模块的由来:嵌入网页的JS代码越来越庞大,越来越像桌面程序,需要一个团队去分工协作...
    萧雪圣阅读 272评论 0 0
  • 题目1: 为什么要使用模块化? 最主要的目的:1.解决命名冲突2.依赖管理其他价值:1.提高代码可读性2.代码解耦...
    saintkl阅读 309评论 0 0
  • WebExtension是一个打包好的、可供发布的安装包,该安装包中包含若干文件,主要用于跨浏览器开发附加组件的工...
    请叫我妖神大人阅读 2,120评论 0 0