高級4 requireJS

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

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

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

**CommonJS規(guī)范 **

  • 一個(gè)單獨(dú)的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域,也就是說,在該模塊內(nèi)部定義的變量,無法被其他模塊讀取,除非定義為global對象的屬性
  • 模塊只有一個(gè)出口,module.exports對象,我們需要把模塊希望輸出的內(nèi)容放入該對象
  • 加載模塊使用require方法,該方法讀取一個(gè)文件并執(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ī)范,它是一個(gè)在瀏覽器端模塊化開發(fā)的規(guī)范。
requireJS主要解決兩個(gè)問題
1.多個(gè)js文件可能有依賴關(guān)系,被依賴的文件需要早于依賴它的文件加載到瀏覽器
2.js加載的時(shí)候?yàn)g覽器會(huì)停止頁面渲染,加載文件越多,頁面失去響應(yīng)時(shí)間越長

define(id?, dependencies?, factory);

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

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

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

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

function(require, exports, module)

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

require(id)
require 是一個(gè)方法,接受 模塊標(biāo)識 作為唯一參數(shù),用來獲取其他模塊提供的接口

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

module
module 是一個(gè)對象,上面存儲(chǔ)了與當(dāng)前模塊相關(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)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容