模块化:常见规范

什么是模块化?为什么要模块化?

命名冲突:为了方便也避免重复造轮子,我们习惯于把一些通用的、底层的工具抽离出来,例如写成一个函数放在另一个文件中,我们需要的时候再去引用就可以;但是在工具中被定义的变量我不能在当前文件使用,因为会产生冲突导致工具无法正常使用。所以我们希望这个工具能是一个独立的空间,不要影响到当前页面的开发。
文件依赖:当我们在写一个新工具的时候,有可能会需要调用其它功能更小的工具;那么在执行时因为js的同步特性,要使用这个新工具就必须要先加载小工具,也就是说小工具要先于新工具去引入;当引入文件较多或者顺序乱了之后维护起来非常困难。
原因:使用模块化主要是为了解决两个问题:命名冲突和文件依赖。
模块化x命名冲突:用面向对象的方式将方法、工具绑在对象上;约定用关键字exports暴露接口返回对象。
模块化x文件依赖:约定关键字require来获取对象将文件依赖内置,不需要外部引入。

CMD、AMD、CommonJS 规范分别指什么?

Common JS:它是一个规范,它通过定义丰富的能解决一些通常的应用开发需求的API来补足了js官方关于标准库的不足。建立它的意图是希望开发者可以运用这些API去开发应用,而且所开发的应用能够在不同的js环境中运行而不仅仅是浏览器。服务器端的javascript应用node.js就是运用Common JS的一个例子,服务器端的程序比浏览器端要更复杂,也需要与操作系统和其他程序互动,因此服务器端必须要模块块以便应对上述问题。node.js参照Common JS 规范创建了模块系统,模块系统通过exports暴露接口返回对象,通过require获取接口返回的对象。例如

// math.js文件 的内容:
 exports.method=function(){
  var obj=xxx;
  // doing something
  return obj;
 };

 // main.js文件 的内容:
 var newObj= require('math').method;
 // 当然 main.js可以继续exports接口 以供其他文件调用

AMD"Asynchronous Module Definition"即异步模块定义,实现AMD的库有RequireJScurlDojo 等。在服务器端采用的Common JS规范到浏览器端因为同步执行加载的问题会导致浏览器在加载获取时处于假死状态什么都不能做只能等引用加载完,AMD在这种环境下诞生了;AMD采用异步加载的方式去获取引用的js,待加载完成后采取执行对应程序,从而避免了等待和浏览器假死的状况。它的语法和应用如下:

// 语法
define(id?,dependencies?,factory); 
// id 即对这个模块命名
// dependencies 这个模块所依赖的其他模块 多个时用数组传递
// factory 加载完成后执行的回调函数

// math.js文件 定义模块
define(function(){
  var obj=xxx;
  // doing somethig 
  return obj
})

// main.js文件 加载模块
define(method,['math'],function(math){
  //把加载的模块传递进来 doing something
})

CMD:CMD(Common Module Definition)是Sea JS推广过程中产生的。在 CMD 规范中,一个模块就是一个文件。其语法与comment js类似,不过多了一个外包装;且相对与AMD的提前设置依赖,CMD的区别就是它将依赖内置了,需要时就使用require去获取,从表面上看实现了comment js的浏览器端化,但实质是通过设置外包装 define(function(require, exports, module){}来包裹代码,提前去加载引用的模块,等加载完成后再同步执行。

// 语法 一个模块就是一个文件
define(factory);

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

推荐阅读更多精彩内容