前端模塊化的意義

ThreeWords 發(fā)布于2019-08-26 10:59 / 3482人閱讀

摘要：而前端要使用模塊化的原因或者要解決的問題就是解決命名沖突管理依賴提高代碼的可復用性相關模塊化規(guī)范常見的規(guī)范有規(guī)范規(guī)范是在推廣過程中對模塊定義的規(guī)范化產出，主要用于瀏覽器端。目前的各類全局變量都可以模塊化。

開發(fā)中明顯可以感覺到加載一個HTML需要依賴很多的JS文件依賴，比如到一定階段的HTML頁面，尾部就是這樣的：

隨著所需功能越來越多，我們就需引入更多的JS依賴和CSS依賴，有時還會面臨著一個文件不夠需要拆分成幾個文件的情況。因此可能會遇到以下幾點問題：

管理依賴會成為一個很費時的工作，很可能引入的文件順序出現錯誤前端交互就不可以使用了。

當頁面加載的時候所有依賴會被全部同步加載，這樣也很難實現所有依賴按需加載的高級功能。

在團隊協作開發(fā)中，出現管理全局變量，變量命名空間困難的問題。

而前端要使用模塊化的原因或者要解決的問題就是：

解決命名沖突

管理依賴

提高代碼的可復用性

相關模塊化規(guī)范

常見的規(guī)范有 CMD、AMD、CommonJS 規(guī)范

CMD規(guī)范（Common Module Definition）：是sea.js在推廣過程中對模塊定義的規(guī)范化產出，主要用于瀏覽器端。它主要特點是：對于依賴的模塊是延遲執(zhí)行，依賴可以就近書寫，等到需要用這個依賴的時候再引入這個依賴。

AMD規(guī)范（Asynchronous Module Definition）：是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產出，也是主要用于瀏覽器端。其特點是：依賴前置，需要在定義時就寫好需要的依賴，提前執(zhí)行依賴。

CommonJS規(guī)范是在服務器端模塊的規(guī)范，是同步加載的，應用有node.js。

ES6 助推了前端模塊化，import語法會被JavaScript引擎靜態(tài)分析，這是一個很重要的功能，我們通常使用CommonJS時，代碼都是在運行時加載的，而ES6是在編譯時就引入模塊代碼，當然我們現在的瀏覽器還沒有這么強大的功能，需要借助各類的編譯工具（webpack）才能正確的姿勢來使用ES6的模塊化的功能。也正因為能夠編譯時就引入模塊代碼，所以使得靜態(tài)分析就能夠實現了。

ES6模塊化的優(yōu)點有

靜態(tài)化編譯。如果能夠靜態(tài)化，編譯的時候就能確定模塊的依賴關系，以及輸出和輸入的變量。CommonJS和AMD/CMD都只能在運行代碼時才能確定這些關系。

不需要特殊的UMD模塊化格式（Universal Module Definition（通用模塊規(guī)范）是由社區(qū)想出來的一種整合了CommonJS和AMD兩個模塊定義規(guī)范的方法）。不再需要UMD模塊的格式，將來服務器和瀏覽器都會支持ES6模塊格式。目前各種工具庫（webpack）其實已經做到這一點了。

目前的各類全局變量都可以模塊化。比如navigator現在是全局變量，以后就可以模塊化加載。這樣就不再需要對象作為命名空間。

參考鏈接：javascript模塊化之CommonJS、AMD、CMD、UMD、ES6

云服務器 GPU云服務器前端模塊化前端模塊云存儲的意義解釋域名的意義

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/106951.html

前端進階（1） - CSS 模塊化

摘要：比如以為例，一個組件，包括一個文件一個文件圖片組件在中便可如下加載使用導出為對象的模塊化其實，還有另外一種思路，就是將內置中，成為的一部分。 CSS 模塊化 CSS(Cascading Style Sheets)，從誕生之初就決定了它無法編程，甚至連解釋性語言都算不上，只能作為一種簡單的層疊樣式表，對 HTML 元素進行格式化。但隨著前端的發(fā)展，前端項目已經變得越來越龐大和復雜，社區(qū)...

lauren_liuling 2019-08-22 18:18 評論0 收藏0
前端進階（1） - CSS 模塊化

摘要：比如以為例，一個組件，包括一個文件一個文件圖片組件在中便可如下加載使用導出為對象的模塊化其實，還有另外一種思路，就是將內置中，成為的一部分。 CSS 模塊化 CSS(Cascading Style Sheets)，從誕生之初就決定了它無法編程，甚至連解釋性語言都算不上，只能作為一種簡單的層疊樣式表，對 HTML 元素進行格式化。但隨著前端的發(fā)展，前端項目已經變得越來越龐大和復雜，社區(qū)...

VishKozus 2019-08-30 15:53 評論0 收藏0
前端組件化開發(fā)的意義

摘要：組件化開發(fā)的優(yōu)點?？梢院艽蟪潭鹊慕档拖到y(tǒng)各個功能的耦合性，并且提高了功能內部的聚合性。耦合性的降低，提高了系統(tǒng)的伸展性，降低了開發(fā)的復雜度，提升開發(fā)效率，降低開發(fā)成本。這個是前端組件開發(fā)需要處理的難點。如今前端技術飛速發(fā)展，基本是基于三大框架開發(fā)的SPA（單頁面應用）。本文主要是總結一下組件化開發(fā)思想重要點。組件化可以幫助解決前端結構的復用性問題，整個頁面可以由不同的組件組合、嵌...

elisa.yang 2019-08-23 16:28 評論0 收藏0
前端組件化開發(fā)的意義

摘要：組件化開發(fā)的優(yōu)點?？梢院艽蟪潭鹊慕档拖到y(tǒng)各個功能的耦合性，并且提高了功能內部的聚合性。耦合性的降低，提高了系統(tǒng)的伸展性，降低了開發(fā)的復雜度，提升開發(fā)效率，降低開發(fā)成本。這個是前端組件開發(fā)需要處理的難點。如今前端技術飛速發(fā)展，基本是基于三大框架開發(fā)的SPA（單頁面應用）。本文主要是總結一下組件化開發(fā)思想重要點。組件化可以幫助解決前端結構的復用性問題，整個頁面可以由不同的組件組合、嵌...

高璐 2019-08-02 16:09 評論0 收藏0
web前端學習方案

摘要：學習計劃認識語義化的意義。這意味著可以在編程語言中很方便地表達靜態(tài)或動態(tài)的數據流，而相關的計算模型會自動將變化的值通過數據流進行傳播。熟悉，理解響應式編程思想在根據官方文檔學習的時候請優(yōu)先理解它的思想。學習計劃 HTML5 認識HTML5語義化的意義。熟悉HTML5新特性了解如何快速的加載HTML頁面，以及完善用戶體驗如：閱讀模式、無障礙設置，了解Canvas、Svg CS...

imccl 2019-08-29 17:01 評論0 收藏0