JavaScript中的三种模块化规范AMD CMD CommonJS,以及各自的实现方法:require.js sea.js node.js

为什么要使用模块化

网站越来越复杂,js代码、js文件也越来越多
    1.命名冲突
    2.文件依赖问题
  • 程序中的模块化
    • 开发效率高 一次编写多次使用
    • 方便维护了(维护的成本更低)模块之间有高耦合低内聚的特点

对象封装

  • 用命名空间的方式进行封装
  • 先约定命名的规范的形式
  • 对象里面的属性和方法很容易被修改掉,很不安全

划分私有空间

-通过匿名函数自执行的方法封装模块,
-可以保护私有变量和方法

模块的维护扩展

  • 开闭原则,对修改关闭,对扩展开放。
  • 增加了代码的健壮性和容错性

模块的第三方依赖

  • 模块职责唯一性
  • 把依赖的模块,通过依赖注入的形式,在你的参数上进行体现。

总结

  • 最大的问题,规范的问题
  • 如果在多人协作开发过程中,会有很大的问题
  • 多人协作开发过程中:代码的风格一定要统一

JavaScript模块化实现的三种技术规范

http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html 阮一峰博客

实际上,这三种第三方框架,目前已经很少用了,seajs最近一次更新是在2014年了。因为JS现在的语法越来越完善,正在向强语言进化,强语言本身就自带模块化。

AMD

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

AMD规范其实只有一个主要接口 define(id,dependencies,factory),它要在声明模块的时候指定所有的依赖dependencies,并且还要当做形参传到factory中,对于依赖的模块提前执行,依赖前置

    //定义模块
    define("module", ["dep1", "dep2"], function(d1, d2) {  
        return someExportedValue;  
    });  
    //引入模块
    require(["module", "../file"], function(module, file) { 

    });  

优点:

适合在浏览器环境异步加载
并行加载多个模块

缺点:

提高开发成本,代码阅读和书写比较困难
不符合通用的模块思维方式,是一种妥协的实现

实现:
require.js

CMD

CMD规范和AMD相似,尽量保持简单,并且与CommonJS和NodeJS的Modules规范保持了很大的兼容性。

    //定义模块
    define(function(require, exports, module) {  
        var $ = require('jquery');  
        var Spinning = require('./spinning');  
        exports.doSomething = ...  
        module.exports = ...  
    })  
    //导入模块
    //第一参数是入口模块的路径
    //第二个函数是回调函数
     seajs.use('路径',function(回调对象){
         //此回调对象就是moudle.exports对象。我们可以使用定义模块中,module.exports对象所有的属性与方法
     });

优点:

    依赖就近,延迟执行
    很容易在node中运行

缺点:

    依赖SPM打包,模块的加载逻辑偏重

实现: SeaJS

SeaJS路径配置

//seajs所在的路径为默认根目录
seajs.config({
    //配置根目录
    base: “../sea-modules/”,
    //别名
    alias : {
        “jquery”: “jquery/jquery/1.10.1/jquery.js(路径)”   //方便调用
    }
})

CommonJs

CommonJS是在浏览器环境之外构建JavaScript生态系统为目标产生的项目,比如服务器和桌面环境中。CommonJS规范是为了解决JavaScript的作用域问题而定义的模块形式,可以使每个模块在它自身的命名空间中执行。

该规范的主要内容是:模块必须通过 module.exports导出对外的变量或接口,通过require()来导入其他模块的输出到当前模块。

//定义模块
exports.doStuff = function() {};  
module.exports = someValue; 

//引入模块  -- 同步执行,不用回调
require("module");  
require("../file.js");  

优点:

服务器端便于重用
NPM中已经将近20w个模块包
简单并容易使用

缺点:

同步的模块方式不适合不适合在浏览器环境中,同步意味着阻塞加载,浏览器资源是异步加载的
不能非阻塞的并行加载多个模块

实现:node.js

nodejs中,原生已经实现了模块化,已经不需要导入第三方库了,可以直接require()

服务器端与浏览器端的技术选型?

服务器端模块化规范 -- CommonJS

老实说,在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限;但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程。

node.js的模块系统,就是参照CommonJS规范实现的。在CommonJS中,有一个全局性方法require(),用于加载模块

浏览器端 -- AMD(requirejs) CMD(Seajs)

因为服务器与APP都是加载的本地的资源,所以,不用回调这种操作,同步依次上下执行即可,导入操作 不会像浏览器端这样,占用太长时间。
因为上面这个原因,浏览器端,只能选择 AMD - CMD 两种规范,异步执行,不阻塞线程。

了解SeaJS,以及Seajs与requirejs之间的区别?

定义模块 define

  • 定义模块 define(function(){})
  • 函数体内的方法属性都属于这个方法,对外有封装性;解决了命名冲突问题,使js代码有了封装性
  • 直接调用 jQuery 插件等非标准模块的方法 http://my.oschina.net/briviowang/blog/208587
    //定义模块
    /*
    require
        加载文件依赖、模块依赖的,用于define函数体内
        在一个模块系统中,`require` 加载过的模块会被缓存
        默认 `require` 是同步加载模块的

    exports 和 module.exports
        module.exports曝露出一个完整的对象,只能扔一次只能曝露出来一个
        exports是module.exports的别名,可以用来单个属性、方法、对象的曝露,用.的形式,exports能做的事情module.exports也可以做
    */

    define(function(require, exports, module) {  
        var $ = require('jquery');  
        var Spinning = require('./spinning');  
        exports.doSomething = ...  
        module.exports = ...  
})  

启动模块 seajs.use

  • 加载入口模块,我们把define定义的js就叫模块
  • 这个用于在html代码里面的加载
  • seajs使用的时候,可以先在配置文件中,修改base设置基本路径,以后加载,都是相对seajs文件所在文件,但是安全起见,最好少用。
导入模块
    /*
    第一参数是入口模块的路径
    第二个函数是回调函数
    */
     seajs.use('路径',function(回调对象){
         //此回调对象就是moudle.exports对象。我们可以使用定义模块中,module.exports对象所有的属性与方法
     });
    //seajs.use 和 Document 的 ready 没有任何关系
    //要想保证 文档结构加载完毕再执行你的 js 代码,一定要在 seajs.use  内部通过 window.onload 或者 $(function(){})

requirejs与seajs的区别

requirejs是优先加载的
seajs是懒加载的,就是有拖延症,用的时候才加载

http://www.requirejs.cn/

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

推荐阅读更多精彩内容