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