范與 RequireJS 實(shí)戰(zhàn)詳解)
文檔教程前端【免費(fèi)下載鏈接】Web千古前端圖文教程超詳細(xì)的前端入門到進(jìn)階知識(shí)庫。從零開始學(xué)前端做一名精致優(yōu)雅的前端工程師。項(xiàng)目地址https://gitcode.com/gh_mirrors/we/Web點(diǎn)擊查看免費(fèi)下載導(dǎo)讀本文基于千古前端圖文教程本倉庫中的《JavaScript模塊化AMD》一文系統(tǒng)講解瀏覽器端異步模塊化方案AMDAsynchronous Module Definition規(guī)范的核心語法、RequireJS 加載器的安裝與配置以及一個(gè)完整的自定義模塊實(shí)戰(zhàn)項(xiàng)目dataService → alerter → main 三級(jí)依賴。讀完本文你將理解 AMD依賴前置、異步加載的設(shè)計(jì)理念掌握define定義模塊、require引入模塊、requirejs.config配置路徑映射的完整用法并能獨(dú)立搭建基于 RequireJS 的模塊化前端工程。文中結(jié)合本倉庫中 CommonJS 模塊化規(guī)范、CMD 規(guī)范 與 ES6 模塊化 等姊妹文檔幫你橫向?qū)Ρ雀髦髁髂K化方案。AMD 的基本語法AMD 的概念A(yù)MDAsynchronous Module Definition異步模塊定義。AMD 專門用于瀏覽器端模塊的加載是異步的。AMD 規(guī)范是RequireJS在推廣過程中對模塊化定義的規(guī)范化產(chǎn)出。RequireJS 就是一個(gè)基于 AMD 規(guī)范實(shí)現(xiàn)的模塊化開發(fā)解決方案模塊加載器。為什么要異步加載因?yàn)樵跒g覽器端JavaScript 文件依賴網(wǎng)絡(luò)下載如果采用同步阻塞的方式加載腳本頁面渲染會(huì)被卡住嚴(yán)重影響用戶體驗(yàn)。AMD 通過異步加載 依賴前置的方式讓模塊在后臺(tái)并行加載加載完成后再執(zhí)行依賴模塊的回調(diào)邏輯。補(bǔ)充背景模塊化開發(fā)最早起源于 Node.js服務(wù)端CommonJS 規(guī)范而如何把模塊化思維應(yīng)用到前端瀏覽器端就產(chǎn)生了兩個(gè)代表性的加載器RequireJSAMD和 SeaJSCMD。這一點(diǎn)在倉庫的 04-Node.js模塊化規(guī)范CommonJS 中有明確說明。暴露模塊的方式定義沒有依賴的模塊參數(shù)只有一個(gè) functiondefine(function () { return 模塊 })定義有依賴的模塊參數(shù)有兩個(gè)模塊名數(shù)組、function//定義有依賴的模塊第一個(gè)參數(shù)為數(shù)組 define([module1, module2], function (m1, m2) { return 模塊 })代碼解釋第一個(gè)參數(shù)必須是數(shù)組里面存放的是需要依賴的其他模塊模塊名/模塊標(biāo)識(shí)。第二個(gè)參數(shù)是 function里面帶了形參 m1 和 m2分別代表了 module1 和 module2。這個(gè)形參的作用是前面依賴的模塊一旦聲明了就可以一一對應(yīng)地注入到 function 中去從而在 function 內(nèi)部使用依賴的模塊。這種方式稱之為顯式聲明依賴注入。這里體現(xiàn)的正是 AMD 的兩大特性依賴前置模塊所依賴的其他模塊必須在define的第一個(gè)數(shù)組參數(shù)中全部提前聲明提前執(zhí)行所有依賴模塊加載并執(zhí)行完畢后才會(huì)執(zhí)行當(dāng)前模塊的回調(diào)函數(shù)。倉庫中的 04-Node.js模塊化規(guī)范CommonJS 把這一特性概括為把所有的包都 require 成功再繼續(xù)執(zhí)行代碼。引入模塊的方式在主模塊中引入其他的模塊//在主模塊中引入其他的模塊 require([module1, module2], function (m1, m2) { 使用m1 / m2 })require([module1, module2], callback)與define的寫法結(jié)構(gòu)一致第一個(gè)參數(shù)是依賴模塊的數(shù)組第二個(gè)參數(shù)是依賴加載完成后執(zhí)行的回調(diào)函數(shù)回調(diào)函數(shù)的形參與數(shù)組中的模塊一一對應(yīng)。這種統(tǒng)一的 API 設(shè)計(jì)正是 AMD 規(guī)范依賴前置、顯式聲明思想的體現(xiàn)。RequireJS是 AMD 的實(shí)現(xiàn)RequireJS 是目前最流行、也最成熟的 AMD 規(guī)范實(shí)現(xiàn)之一它同時(shí)提供了兩個(gè)能力一個(gè) JavaScript 模塊加載器可以在瀏覽器中異步加載模塊一個(gè)優(yōu)化工具r.js可用來合并、壓縮模塊文件。本倉庫的 04-靜態(tài)資源優(yōu)化 在JavaScript 模塊化加載方案和選型一節(jié)中也明確將 AMD 規(guī)范與 RequireJS 對應(yīng)起來RequireJS 模塊化加載器是基于 AMD API 實(shí)現(xiàn)的。RequireJS 的使用舉例自定義模塊下面通過一個(gè)完整的實(shí)戰(zhàn)項(xiàng)目演示如何用 RequireJS 組織模塊化的前端代碼。整個(gè)示例的結(jié)構(gòu)與代碼完整繼承了原文檔的示例工程你可以照著逐步操作。1、創(chuàng)建項(xiàng)目結(jié)構(gòu)在工程文件中新建如下目錄js | libs | modules | alerter.js | dataService.js | main.js index.html2、下載 require.js并導(dǎo)入到 RequireJS 官網(wǎng)的下載頁面獲取require.js文件官網(wǎng)提供壓縮版與未壓縮版開發(fā)調(diào)試階段建議使用未壓縮版方便閱讀源碼然后將require.js文件拷貝到項(xiàng)目的js/libs/目錄中。這樣的話就導(dǎo)入成功了。3、自定義模塊1dataService.js —— 定義沒有依賴的模塊//定義沒有依賴的模塊 define(function () { let name 我是 dataService.js中的內(nèi)容; function getName() { return name; } //暴露模塊 return { getName }; });這個(gè)模塊沒有依賴任何其他模塊因此在define中只傳入了一個(gè) function。模塊內(nèi)部先定義私有變量name和私有函數(shù)getName最后通過return { getName }把接口暴露出去。這也是 AMD 模塊與 CommonJS 模塊的一個(gè)顯著差異AMD 使用return來暴露模塊內(nèi)容而 CommonJS 使用module.exports/exports對象。2alerter.js —— 定義有依賴的模塊//定義有依賴的模塊 define([myDataService], function (dataService) { let msg 我是 aleter.js中的內(nèi)容; function showMsg() { console.log(dataService.getName()); //調(diào)用了 myDataService 模塊中的內(nèi)容 console.log(msg); } //暴露模塊 return { showMsg }; });這個(gè)模塊依賴了myDataService這個(gè)模塊模塊名是我自己起的即模塊標(biāo)識(shí)。注意這里出現(xiàn)的myDataService只是一個(gè)邏輯上的模塊名它和物理文件dataService.js之間并不自動(dòng)對應(yīng)需要我們稍后在main.js中做映射將myDataService這個(gè)名字和dataService.js文件關(guān)聯(lián)起來。這正是 AMD顯式聲明依賴注入的落地先聲明依賴名再由加載器根據(jù)映射去解析并注入真實(shí)的模塊實(shí)例。3main.js —— 主模塊requirejs.config({ //baseUrl: js/, //基本路徑 paths: { //配置路徑 myDataService: ./modules/dataService, myAlerter: ./modules/alerter } }); requirejs([myAlerter], function (alerter) { alerter.showMsg(); })();這個(gè)模塊依賴了myAlerter這個(gè)模塊模塊名是我自己起的。并且我們在文件的上方做了映射將myAlerter這個(gè)名字和alerter.js文件關(guān)聯(lián)了起來。整個(gè)示例的依賴鏈條是文件3依賴了文件2文件2依賴了文件1。RequireJS 會(huì)按照這條依賴鏈自動(dòng)按需加載、異步并行地拉取所有模塊文件再按依賴順序執(zhí)行。我們來講一下最上方的幾行代碼即requirejs.config里的內(nèi)容的意思paths里做的就是映射將鍵myDataService和文件dataService.js進(jìn)行關(guān)聯(lián)將鍵myAlerter和文件alerter.js進(jìn)行關(guān)聯(lián)。paths中的路徑值可以省略.js后綴RequireJS 會(huì)自動(dòng)補(bǔ)全。另外再講一下注釋里的baseUrl的用法如果沒有這行配置那么paths里的路徑是從當(dāng)前這個(gè)文件main.js的角度出發(fā)的即相對路徑如果加了一行baseUrl表明它是paths里所有路徑的最開頭的部分baseUrl的路徑是從項(xiàng)目的根目錄的角度出發(fā)的。例如配置baseUrl: js/后paths中的myDataService: modules/dataService最終會(huì)解析為js/modules/dataService。合理使用baseUrl可以讓路徑配置與頁面/入口文件的位置解耦便于工程目錄結(jié)構(gòu)調(diào)整。4index.html —— 入口文件!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleDocument/title /head body !-- 先通過 src 引入 require.js 文件然后通過>贊分享文檔教程前端【免費(fèi)下載鏈接】Web千古前端圖文教程超詳細(xì)的前端入門到進(jìn)階知識(shí)庫。從零開始學(xué)前端做一名精致優(yōu)雅的前端工程師。項(xiàng)目地址https://gitcode.com/gh_mirrors/we/Web點(diǎn)擊查看免費(fèi)下載相關(guān)推薦JavaScript 原型鏈圖文詳解構(gòu)造函數(shù)、五條原型規(guī)則與 instanceof 實(shí)戰(zhàn)千古前端圖文教程JavaScript 原型鏈圖文詳解構(gòu)造函數(shù)、五條原型規(guī)則與 instanceof 實(shí)戰(zhàn)千古前端圖文教程 導(dǎo)讀 本文源自《千古前端圖文教程》 READM文檔教程前端千古前端圖文教程JavaScript 基本數(shù)據(jù)類型 Undefined 與 Null 詳解千古前端圖文教程JavaScript 基本數(shù)據(jù)類型 Undefined 與 Null 詳解 導(dǎo)讀 本文是「千古前端圖文教程」JavaScript 基礎(chǔ)系列中關(guān)文檔教程前端千古前端圖文教程BOM 簡介與 navigator.userAgent / History / Location 實(shí)戰(zhàn)詳解千古前端圖文教程BOM 簡介與 navigator.userAgent / History / Location 實(shí)戰(zhàn)詳解 導(dǎo)讀 本文是「千古前端圖文教程」中文檔教程前端上一篇SeaTunnel Web 可視化數(shù)據(jù)集成界面把同步任務(wù)跑起來并盯住它下一篇NVIDIA Profile Inspector解鎖NVIDIA顯卡隱藏性能的終極指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 千古前端圖文教程：JavaScript 模塊化之 AMD 規(guī)范與 RequireJS 實(shí)戰(zhàn)詳解
文檔教程前端【免費(fèi)下載鏈接】Web千古前端圖文教程超詳細(xì)的前端入門到進(jìn)階知識(shí)庫。從零開始學(xué)前端做一名精致優(yōu)雅的前端工程師。項(xiàng)目地址https://gitcode.com/gh_mirrors/we/Web點(diǎn)擊查看免費(fèi)下載導(dǎo)讀本文基于千古前端圖文教程本倉庫中的《JavaScript模塊化AMD》一文系統(tǒng)講解瀏覽器端異步模塊化方案AMDAsynchronous Module Definition規(guī)范的核心語法、RequireJS 加載器的安裝與配置以及一個(gè)完整的自定義模塊實(shí)戰(zhàn)項(xiàng)目dataService → alerter → main 三級(jí)依賴。讀完本文你將理解 AMD依賴前置、異步加載的設(shè)計(jì)理念掌握define定義模塊、require引入模塊、requirejs.config配置路徑映射的完整用法并能獨(dú)立搭建基于 RequireJS 的模塊化前端工程。文中結(jié)合本倉庫中 CommonJS 模塊化規(guī)范、CMD 規(guī)范 與 ES6 模塊化 等姊妹文檔幫你橫向?qū)Ρ雀髦髁髂K化方案。AMD 的基本語法AMD 的概念A(yù)MDAsynchronous Module Definition異步模塊定義。AMD 專門用于瀏覽器端模塊的加載是異步的。AMD 規(guī)范是RequireJS在推廣過程中對模塊化定義的規(guī)范化產(chǎn)出。RequireJS 就是一個(gè)基于 AMD 規(guī)范實(shí)現(xiàn)的模塊化開發(fā)解決方案模塊加載器。為什么要異步加載因?yàn)樵跒g覽器端JavaScript 文件依賴網(wǎng)絡(luò)下載如果采用同步阻塞的方式加載腳本頁面渲染會(huì)被卡住嚴(yán)重影響用戶體驗(yàn)。AMD 通過異步加載 依賴前置的方式讓模塊在后臺(tái)并行加載加載完成后再執(zhí)行依賴模塊的回調(diào)邏輯。補(bǔ)充背景模塊化開發(fā)最早起源于 Node.js服務(wù)端CommonJS 規(guī)范而如何把模塊化思維應(yīng)用到前端瀏覽器端就產(chǎn)生了兩個(gè)代表性的加載器RequireJSAMD和 SeaJSCMD。這一點(diǎn)在倉庫的 04-Node.js模塊化規(guī)范CommonJS 中有明確說明。暴露模塊的方式定義沒有依賴的模塊參數(shù)只有一個(gè) functiondefine(function () { return 模塊 })定義有依賴的模塊參數(shù)有兩個(gè)模塊名數(shù)組、function//定義有依賴的模塊第一個(gè)參數(shù)為數(shù)組 define([module1, module2], function (m1, m2) { return 模塊 })代碼解釋第一個(gè)參數(shù)必須是數(shù)組里面存放的是需要依賴的其他模塊模塊名/模塊標(biāo)識(shí)。第二個(gè)參數(shù)是 function里面帶了形參 m1 和 m2分別代表了 module1 和 module2。這個(gè)形參的作用是前面依賴的模塊一旦聲明了就可以一一對應(yīng)地注入到 function 中去從而在 function 內(nèi)部使用依賴的模塊。這種方式稱之為顯式聲明依賴注入。這里體現(xiàn)的正是 AMD 的兩大特性依賴前置模塊所依賴的其他模塊必須在define的第一個(gè)數(shù)組參數(shù)中全部提前聲明提前執(zhí)行所有依賴模塊加載并執(zhí)行完畢后才會(huì)執(zhí)行當(dāng)前模塊的回調(diào)函數(shù)。倉庫中的 04-Node.js模塊化規(guī)范CommonJS 把這一特性概括為把所有的包都 require 成功再繼續(xù)執(zhí)行代碼。引入模塊的方式在主模塊中引入其他的模塊//在主模塊中引入其他的模塊 require([module1, module2], function (m1, m2) { 使用m1 / m2 })require([module1, module2], callback)與define的寫法結(jié)構(gòu)一致第一個(gè)參數(shù)是依賴模塊的數(shù)組第二個(gè)參數(shù)是依賴加載完成后執(zhí)行的回調(diào)函數(shù)回調(diào)函數(shù)的形參與數(shù)組中的模塊一一對應(yīng)。這種統(tǒng)一的 API 設(shè)計(jì)正是 AMD 規(guī)范依賴前置、顯式聲明思想的體現(xiàn)。RequireJS是 AMD 的實(shí)現(xiàn)RequireJS 是目前最流行、也最成熟的 AMD 規(guī)范實(shí)現(xiàn)之一它同時(shí)提供了兩個(gè)能力一個(gè) JavaScript 模塊加載器可以在瀏覽器中異步加載模塊一個(gè)優(yōu)化工具r.js可用來合并、壓縮模塊文件。本倉庫的 04-靜態(tài)資源優(yōu)化 在JavaScript 模塊化加載方案和選型一節(jié)中也明確將 AMD 規(guī)范與 RequireJS 對應(yīng)起來RequireJS 模塊化加載器是基于 AMD API 實(shí)現(xiàn)的。RequireJS 的使用舉例自定義模塊下面通過一個(gè)完整的實(shí)戰(zhàn)項(xiàng)目演示如何用 RequireJS 組織模塊化的前端代碼。整個(gè)示例的結(jié)構(gòu)與代碼完整繼承了原文檔的示例工程你可以照著逐步操作。1、創(chuàng)建項(xiàng)目結(jié)構(gòu)在工程文件中新建如下目錄js | libs | modules | alerter.js | dataService.js | main.js index.html2、下載 require.js并導(dǎo)入到 RequireJS 官網(wǎng)的下載頁面獲取require.js文件官網(wǎng)提供壓縮版與未壓縮版開發(fā)調(diào)試階段建議使用未壓縮版方便閱讀源碼然后將require.js文件拷貝到項(xiàng)目的js/libs/目錄中。這樣的話就導(dǎo)入成功了。3、自定義模塊1dataService.js —— 定義沒有依賴的模塊//定義沒有依賴的模塊 define(function () { let name 我是 dataService.js中的內(nèi)容; function getName() { return name; } //暴露模塊 return { getName }; });這個(gè)模塊沒有依賴任何其他模塊因此在define中只傳入了一個(gè) function。模塊內(nèi)部先定義私有變量name和私有函數(shù)getName最后通過return { getName }把接口暴露出去。這也是 AMD 模塊與 CommonJS 模塊的一個(gè)顯著差異AMD 使用return來暴露模塊內(nèi)容而 CommonJS 使用module.exports/exports對象。2alerter.js —— 定義有依賴的模塊//定義有依賴的模塊 define([myDataService], function (dataService) { let msg 我是 aleter.js中的內(nèi)容; function showMsg() { console.log(dataService.getName()); //調(diào)用了 myDataService 模塊中的內(nèi)容 console.log(msg); } //暴露模塊 return { showMsg }; });這個(gè)模塊依賴了myDataService這個(gè)模塊模塊名是我自己起的即模塊標(biāo)識(shí)。注意這里出現(xiàn)的myDataService只是一個(gè)邏輯上的模塊名它和物理文件dataService.js之間并不自動(dòng)對應(yīng)需要我們稍后在main.js中做映射將myDataService這個(gè)名字和dataService.js文件關(guān)聯(lián)起來。這正是 AMD顯式聲明依賴注入的落地先聲明依賴名再由加載器根據(jù)映射去解析并注入真實(shí)的模塊實(shí)例。3main.js —— 主模塊requirejs.config({ //baseUrl: js/, //基本路徑 paths: { //配置路徑 myDataService: ./modules/dataService, myAlerter: ./modules/alerter } }); requirejs([myAlerter], function (alerter) { alerter.showMsg(); })();這個(gè)模塊依賴了myAlerter這個(gè)模塊模塊名是我自己起的。并且我們在文件的上方做了映射將myAlerter這個(gè)名字和alerter.js文件關(guān)聯(lián)了起來。整個(gè)示例的依賴鏈條是文件3依賴了文件2文件2依賴了文件1。RequireJS 會(huì)按照這條依賴鏈自動(dòng)按需加載、異步并行地拉取所有模塊文件再按依賴順序執(zhí)行。我們來講一下最上方的幾行代碼即requirejs.config里的內(nèi)容的意思paths里做的就是映射將鍵myDataService和文件dataService.js進(jìn)行關(guān)聯(lián)將鍵myAlerter和文件alerter.js進(jìn)行關(guān)聯(lián)。paths中的路徑值可以省略.js后綴RequireJS 會(huì)自動(dòng)補(bǔ)全。另外再講一下注釋里的baseUrl的用法如果沒有這行配置那么paths里的路徑是從當(dāng)前這個(gè)文件main.js的角度出發(fā)的即相對路徑如果加了一行baseUrl表明它是paths里所有路徑的最開頭的部分baseUrl的路徑是從項(xiàng)目的根目錄的角度出發(fā)的。例如配置baseUrl: js/后paths中的myDataService: modules/dataService最終會(huì)解析為js/modules/dataService。合理使用baseUrl可以讓路徑配置與頁面/入口文件的位置解耦便于工程目錄結(jié)構(gòu)調(diào)整。4index.html —— 入口文件!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleDocument/title /head body !-- 先通過 src 引入 require.js 文件然后通過>贊分享文檔教程前端【免費(fèi)下載鏈接】Web千古前端圖文教程超詳細(xì)的前端入門到進(jìn)階知識(shí)庫。從零開始學(xué)前端做一名精致優(yōu)雅的前端工程師。項(xiàng)目地址https://gitcode.com/gh_mirrors/we/Web點(diǎn)擊查看免費(fèi)下載相關(guān)推薦JavaScript 原型鏈圖文詳解構(gòu)造函數(shù)、五條原型規(guī)則與 instanceof 實(shí)戰(zhàn)千古前端圖文教程JavaScript 原型鏈圖文詳解構(gòu)造函數(shù)、五條原型規(guī)則與 instanceof 實(shí)戰(zhàn)千古前端圖文教程 導(dǎo)讀 本文源自《千古前端圖文教程》 READM文檔教程前端千古前端圖文教程JavaScript 基本數(shù)據(jù)類型 Undefined 與 Null 詳解千古前端圖文教程JavaScript 基本數(shù)據(jù)類型 Undefined 與 Null 詳解 導(dǎo)讀 本文是「千古前端圖文教程」JavaScript 基礎(chǔ)系列中關(guān)文檔教程前端千古前端圖文教程BOM 簡介與 navigator.userAgent / History / Location 實(shí)戰(zhàn)詳解千古前端圖文教程BOM 簡介與 navigator.userAgent / History / Location 實(shí)戰(zhàn)詳解 導(dǎo)讀 本文是「千古前端圖文教程」中文檔教程前端上一篇SeaTunnel Web 可視化數(shù)據(jù)集成界面把同步任務(wù)跑起來并盯住它下一篇NVIDIA Profile Inspector解鎖NVIDIA顯卡隱藏性能的終極指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考