資訊專欄INFORMATION COLUMN
摘要：而前端要使用模塊化的原因或者要解決的問題就是解決命名沖突管理依賴提高代碼的可復(fù)用性相關(guān)模塊化規(guī)范常見的規(guī)范有規(guī)范規(guī)范是在推廣過程中對模塊定義的規(guī)范化產(chǎn)出，主要用于瀏覽器端。目前的各類全局變量都可以模塊化。
開發(fā)中明顯可以感覺到加載一個HTML需要依賴很多的JS文件依賴，比如到一定階段的HTML頁面，尾部就是這樣的：
隨著所需功能越來越多，我們就需引入更多的JS依賴和CSS依賴，有時還會面臨著一個文件不夠需要拆分成幾個文件的情況。因此可能會遇到以下幾點問題：
管理依賴會成為一個很費時的工作，很可能引入的文件順序出現(xiàn)錯誤前端交互就不可以使用了。
當(dāng)頁面加載的時候所有依賴會被全部同步加載，這樣也很難實現(xiàn)所有依賴按需加載的高級功能。
在團(tuán)隊協(xié)作開發(fā)中，出現(xiàn)管理全局變量，變量命名空間困難的問題。
而前端要使用模塊化的原因或者要解決的問題就是：
解決命名沖突
管理依賴
提高代碼的可復(fù)用性
相關(guān)模塊化規(guī)范常見的規(guī)范有 CMD、AMD、CommonJS 規(guī)范
CMD規(guī)范（Common Module Definition）：是sea.js在推廣過程中對模塊定義的規(guī)范化產(chǎn)出，主要用于瀏覽器端。它主要特點是：對于依賴的模塊是延遲執(zhí)行，依賴可以就近書寫，等到需要用這個依賴的時候再引入這個依賴。
AMD規(guī)范（Asynchronous Module Definition）：是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出，也是主要用于瀏覽器端。其特點是：依賴前置，需要在定義時就寫好需要的依賴，提前執(zhí)行依賴。
CommonJS規(guī)范是在服務(wù)器端模塊的規(guī)范，是同步加載的，應(yīng)用有node.js。
ES6 助推了前端模塊化，import語法會被JavaScript引擎靜態(tài)分析，這是一個很重要的功能，我們通常使用CommonJS時，代碼都是在運行時加載的，而ES6是在編譯時就引入模塊代碼，當(dāng)然我們現(xiàn)在的瀏覽器還沒有這么強(qiáng)大的功能，需要借助各類的編譯工具（webpack）才能正確的姿勢來使用ES6的模塊化的功能。也正因為能夠編譯時就引入模塊代碼，所以使得靜態(tài)分析就能夠?qū)崿F(xiàn)了。
ES6模塊化的優(yōu)點有
靜態(tài)化編譯。如果能夠靜態(tài)化，編譯的時候就能確定模塊的依賴關(guān)系，以及輸出和輸入的變量。CommonJS和AMD/CMD都只能在運行代碼時才能確定這些關(guān)系。
不需要特殊的UMD模塊化格式（Universal Module Definition（通用模塊規(guī)范）是由社區(qū)想出來的一種整合了CommonJS和AMD兩個模塊定義規(guī)范的方法）。不再需要UMD模塊的格式，將來服務(wù)器和瀏覽器都會支持ES6模塊格式。目前各種工具庫（webpack）其實已經(jīng)做到這一點了。
目前的各類全局變量都可以模塊化。比如navigator現(xiàn)在是全局變量，以后就可以模塊化加載。這樣就不再需要對象作為命名空間。
參考鏈接：javascript模塊化之CommonJS、AMD、CMD、UMD、ES6
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106951.html
摘要：比如以為例，一個組件，包括一個文件一個文件圖片組件在中便可如下加載使用導(dǎo)出為對象的模塊化其實，還有另外一種思路，就是將內(nèi)置中，成為的一部分。 CSS 模塊化 CSS(Cascading Style Sheets)，從誕生之初就決定了它無法編程，甚至連解釋性語言都算不上，只能作為一種簡單的層疊樣式表，對 HTML 元素進(jìn)行格式化。 但隨著前端的發(fā)展，前端項目已經(jīng)變得越來越龐大和復(fù)雜，社區(qū)...
摘要：比如以為例，一個組件，包括一個文件一個文件圖片組件在中便可如下加載使用導(dǎo)出為對象的模塊化其實，還有另外一種思路，就是將內(nèi)置中，成為的一部分。 CSS 模塊化 CSS(Cascading Style Sheets)，從誕生之初就決定了它無法編程，甚至連解釋性語言都算不上，只能作為一種簡單的層疊樣式表，對 HTML 元素進(jìn)行格式化。 但隨著前端的發(fā)展，前端項目已經(jīng)變得越來越龐大和復(fù)雜，社區(qū)...
摘要：組件化開發(fā)的優(yōu)點?？梢院艽蟪潭鹊慕档拖到y(tǒng)各個功能的耦合性，并且提高了功能內(nèi)部的聚合性。耦合性的降低，提高了系統(tǒng)的伸展性，降低了開發(fā)的復(fù)雜度，提升開發(fā)效率，降低開發(fā)成本。這個是前端組件開發(fā)需要處理的難點。 如今前端技術(shù)飛速發(fā)展，基本是基于三大框架開發(fā)的SPA（單頁面應(yīng)用）。本文主要是總結(jié)一下組件化開發(fā)思想重要點。 組件化可以幫助解決前端結(jié)構(gòu)的復(fù)用性問題，整個頁面可以由不同的組件組合、嵌...
摘要：組件化開發(fā)的優(yōu)點。可以很大程度的降低系統(tǒng)各個功能的耦合性，并且提高了功能內(nèi)部的聚合性。耦合性的降低，提高了系統(tǒng)的伸展性，降低了開發(fā)的復(fù)雜度，提升開發(fā)效率，降低開發(fā)成本。這個是前端組件開發(fā)需要處理的難點。 如今前端技術(shù)飛速發(fā)展，基本是基于三大框架開發(fā)的SPA（單頁面應(yīng)用）。本文主要是總結(jié)一下組件化開發(fā)思想重要點。 組件化可以幫助解決前端結(jié)構(gòu)的復(fù)用性問題，整個頁面可以由不同的組件組合、嵌...
摘要：學(xué)習(xí)計劃認(rèn)識語義化的意義。這意味著可以在編程語言中很方便地表達(dá)靜態(tài)或動態(tài)的數(shù)據(jù)流，而相關(guān)的計算模型會自動將變化的值通過數(shù)據(jù)流進(jìn)行傳播。熟悉，理解響應(yīng)式編程思想在根據(jù)官方文檔學(xué)習(xí)的時候請優(yōu)先理解它的思想。 學(xué)習(xí)計劃 HTML5 認(rèn)識HTML5語義化的意義。 熟悉HTML5新特性 了解如何快速的加載HTML頁面，以及完善用戶體驗如：閱讀模式、無障礙設(shè)置， 了解Canvas、Svg CS...
閱讀 2710·2023-04-25 19:13
閱讀 4057·2021-09-22 15:34
閱讀 3067·2019-08-30 14:23
閱讀 1479·2019-08-29 17:17
閱讀 1619·2019-08-29 16:05
閱讀 1553·2019-08-29 13:26
閱讀 1228·2019-08-29 13:19
閱讀 568·2019-08-29 13:16
