高級4 requireJS

題目1: 為什么要使用模塊化?

  1. 避免命名沖突(減少命名空間污染)
  2. 依賴管理
  3. 更好的分離, 按需加載
  4. 代碼解耦刃泡,提高復(fù)用性
  5. 高可維護性

題目2: CMD巍杈、AMD匿刮、CommonJS 規(guī)范分別指什么?有哪些應(yīng)用

**CommonJS規(guī)范 **

  • 一個單獨的文件就是一個模塊掂榔。每一個模塊都是一個單獨的作用域继效,也就是說,在該模塊內(nèi)部定義的變量装获,無法被其他模塊讀取瑞信,除非定義為global對象的屬性
  • 模塊只有一個出口,module.exports對象穴豫,我們需要把模塊希望輸出的內(nèi)容放入該對象
  • 加載模塊使用require方法凡简,該方法讀取一個文件并執(zhí)行,返回文件內(nèi)部的module.exports對象
//模塊定義 myModel.js

var name = 'Byron';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加載模塊

var nameModule = require('./myModel.js');

nameModule.printName();

AMD規(guī)范
AMD即(Asynchronous Module Definition)绩郎,異步模塊定義規(guī)范潘鲫,它是一個在瀏覽器端模塊化開發(fā)的規(guī)范。
requireJS主要解決兩個問題
1.多個js文件可能有依賴關(guān)系肋杖,被依賴的文件需要早于依賴它的文件加載到瀏覽器
2.js加載的時候瀏覽器會停止頁面渲染溉仑,加載文件越多,頁面失去響應(yīng)時間越長

define(id?, dependencies?, factory);

id:可選參數(shù)状植,用來定義模塊的標識浊竟,如果沒有提供該參數(shù),腳本文件名(去掉拓展名)
dependencies:是一個當前模塊依賴的模塊名稱數(shù)組
factory:工廠方法津畸,模塊初始化要執(zhí)行的函數(shù)或?qū)ο笳穸āH绻麨楹瘮?shù),它應(yīng)該只被執(zhí)行一次肉拓。如果是對象后频,此對象應(yīng)該為模塊的輸出值
在頁面上使用require函數(shù)加載模塊

require([dependencies], function(){});

require()函數(shù)接受兩個參數(shù)
第一個參數(shù)是一個數(shù)組,表示所依賴的模塊
第二個參數(shù)是一個回調(diào)函數(shù)暖途,當前面指定的模塊都加載成功后卑惜,它將被調(diào)用。加載的模塊會以參數(shù)形式傳入該函數(shù)驻售,從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊
require()函數(shù)在加載依賴的函數(shù)的時候是異步加載的露久,這樣瀏覽器不會失去響應(yīng),它指定的回調(diào)函數(shù)欺栗,只有前面的模塊都加載成功后毫痕,才會運行征峦,解決了依賴性的問題。
CMD規(guī)范
CMD 即Common Module Definition通用模塊定義消请,CMD規(guī)范是國內(nèi)發(fā)展出來的栏笆,就像AMD有個requireJS,CMD有個瀏覽器的實現(xiàn)SeaJS梯啤,SeaJS要解決的問題和requireJS一樣竖伯,只不過在模塊定義方式和模塊加載(可以說運行、解析)時機上有所不同

define(id?, deps?, factory)```
一個文件一個模塊因宇,所以經(jīng)常就用文件名作為模塊id
CMD推崇依賴就近七婴,所以一般不在define的參數(shù)中寫依賴,在factory中寫
factory有三個參數(shù)

function(require, exports, module)

require
require 是 factory 函數(shù)的第一個參數(shù)

require(id)
require 是一個方法察滑,接受 模塊標識 作為唯一參數(shù)打厘,用來獲取其他模塊提供的接口

exports
exports 是一個對象,用來向外提供模塊接口

module
module 是一個對象贺辰,上面存儲了與當前模塊相關(guān)聯(lián)的一些屬性和方法

## 題目3: 使用 requirejs 完善入門任務(wù)15户盯,包括如下功能:
[效果預(yù)覽](https://zhangmac.github.io/demos/huolulu/%E7%81%AB%E5%8D%A4%E5%8D%A4.html)
[代碼](https://github.com/zhangmac/demos/tree/master/huolulu)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市饲化,隨后出現(xiàn)的幾起案子莽鸭,更是在濱河造成了極大的恐慌,老刑警劉巖吃靠,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件硫眨,死亡現(xiàn)場離奇詭異,居然都是意外死亡巢块,警方通過查閱死者的電腦和手機礁阁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來族奢,“玉大人姥闭,你說我怎么就攤上這事≡阶撸” “怎么了棚品?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長廊敌。 經(jīng)常有香客問我南片,道長,這世上最難降的妖魔是什么庭敦? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮薪缆,結(jié)果婚禮上秧廉,老公的妹妹穿的比我還像新娘伞广。我一直安慰自己,他們只是感情好疼电,可當我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布嚼锄。 她就那樣靜靜地躺著,像睡著了一般蔽豺。 火紅的嫁衣襯著肌膚如雪区丑。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天修陡,我揣著相機與錄音沧侥,去河邊找鬼。 笑死魄鸦,一個胖子當著我的面吹牛宴杀,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播拾因,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼旺罢,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了绢记?” 一聲冷哼從身側(cè)響起扁达,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蠢熄,沒想到半個月后跪解,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡护赊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年惠遏,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片骏啰。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡节吮,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出判耕,到底是詐尸還是另有隱情透绩,我是刑警寧澤,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布壁熄,位于F島的核電站帚豪,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏草丧。R本人自食惡果不足惜狸臣,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望昌执。 院中可真熱鬧烛亦,春花似錦诈泼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至檬果,卻和暖如春瓮孙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背选脊。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工杭抠, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人知牌。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓祈争,卻偏偏與公主長得像,于是被迫代替她去往敵國和親角寸。 傳聞我的和親對象是個殘疾皇子菩混,可洞房花燭夜當晚...
    茶點故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 為什么要使用模塊化亿柑? 最主要的目的:解決命名沖突依賴管理 其他價值提高代碼可讀性代碼解耦邢疙,提高復(fù)用性 CMD、AM...
    Eazer閱讀 656評論 3 1
  • 在JavaScript發(fā)展初期就是為了實現(xiàn)簡單的頁面交互邏輯望薄,寥寥數(shù)語即可疟游;如今CPU、瀏覽器性能得到了極大的提升...
    簡不簡單_都好閱讀 219評論 0 0
  • 前端模塊化 在JavaScript發(fā)展初期就是為了實現(xiàn)簡單的頁面交互邏輯痕支,寥寥數(shù)語即可颁虐;如今CPU、瀏覽器性能得到...
    景岳閱讀 240評論 2 4
  • 什么是模塊化開發(fā)卧须? 前端開發(fā)中另绩,起初只要在script標簽中嵌入幾十上百行代碼就能實現(xiàn)一些基本的交互效果,后來js...
    半世韶華憶闌珊閱讀 651評論 0 0
  • 時常在想花嘶,會不會有那么一天你會喜歡上我笋籽,又或者我喜歡上你,或者我們能不能一直這樣下去 ‘起床的時候太陽曬...
    布吉道閱讀 261評論 0 0