題目1: 為什么要使用模塊化?
- 避免命名沖突(減少命名空間污染)
- 依賴管理
- 更好的分離, 按需加載
- 代碼解耦刃泡,提高復(fù)用性
- 高可維護性
題目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)