模块化

为什么要使用模块化

在以前,网页功能很简单,几行JS就能满足交互需求。
现在网页变得越来越复杂,JS也变得越来越庞大,这个时候就要对JS进行模块化的管理,把不同功能的JS划分为不同模块,需要什么功能只要调用该模块就可以。
模块化以后,提高了代码的复用性,同时也能更好的管理文件与文件之间的依赖。

CMD、AMD、CommonJS

编写模块需要遵守一些规范,大家都按照一个规范进行模块的编写,这样才能相互调用。假如每个人都按自己的规范编写模块,就会变得混乱,失去了模块化的初衷。
CommonJS
Node.js的模块系统,就是参照CommonJS规范实现的
假如有这么一个Math模块,可以这样调用

var Math = require('Math')
Math.add(1,1)

通过require()这个方法加载模块,然后就可以使用该模块的功能
而在Math这个模块中,需要使用exports来输出该模块提供的功能

exports.add = function() {
    //code..
}

但是该规范在浏览器中有个缺陷,以上面的例子,当我require('Math')时,Math这个模块是存放在服务器中的,只有当Math模块下载完成了,Math.add(1,1)才会执行,就是所谓的“同步加载”。
假设我网速很慢,Math模块加载时间相当长,浏览器就会进入“假死状态”,这显然不是我们想要的。
这个问题在服务器端就不存在,因为服务器的模块都存在本地,加载模块的时间就是读取硬盘数据的时间。
AMD
AMD(Asynchronous Module Definition),意为"异步模块定义"。
在前端中,模块的加载都需要采取“异步加载”,避免出现假死的情况,因此诞生了AMD规范
而requie.js是遵循AMD的库之一
requie.js和CommonJS一样,都采用require()方法进行模块的加载,但是其接受不一样的参数

require([module], callback);

[module]为模块名,callback为模块加载成功后需要执行的函数,因此Math的例子可以写为

require(['Math'],function(Math){
    Math.add(1,1)
})

模块则要按ADM规范写

define(id?, dependencies?, factory);

id是可选参数,为该模块名称,不提供该参数,则模块名默认为该脚本的名字
dependencies?为该模块的依赖,依赖模块标识的数组字面量,如果该模块不依赖其他模块,这可忽略该参数,
如果忽略此参数,它应该默认为["require", "exports", "module"]
factory是工厂函数,是该模块的初始化函数或对象
上面的Math模块假设依赖了jQuery,在AMD规范中该这样写

define(['jquery'],function($) {
    var Math = (function() {
        return {
            add: function() {
                //code...
            }
        }
    })()
    return Math
})

CMD
CMD是Sea.js推广的过程中产生的,与AMD只是语法上的区别
ADM是预先加载好所有的依赖模块,而CMD是当我需要这个模块时,才进行加载
像上面到Math模块在CMD中这样写

define(function(require, exports, module){
    exports.add = function() {
        //code..
    }
})

require是一个方法,接受模块标识 作为唯一参数,用来获取其他模块提供的接口
exports是一个对象,用来向外提供模块接口
module是一个对象,上面存储了与当前模块相关联的一些属性和方法
调用Math时

var math = require('Math')
math.add()

由于github链接太慢,可能会出现bug
本地测试功能完整!
预览Demo
源码

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

推荐阅读更多精彩内容