前端模組化

2021-08-27 17:29:26 字數 1329 閱讀 7795

前端模組化解決什麼問題?

有了模組,我就可以很方便的使用別人的**,想要什麼功能,就用載入什麼模組。但是,這樣做需要有乙個前提,那就是大家必須以同樣的方式編寫模組,否則就亂套了。所以組內需要有一套統一的模組規範。

如何實現模組?

1、物件字面量的變體

2、js設計模式的模組模式

3、採用成熟的庫檔案。前兩種方式各模組的指令碼被串在一起注入到dom中,整個體系架構在這種模式下,可能會命名衝突。要簡潔地管理依賴關係,不通過一些手工處理或借助第三方庫往往是不可能的。

先理清一些概念 :

伺服器端模組:在伺服器端執行的模組,因為所有的模組都存放在本地硬碟,可以同步載入完成,等待時間就是硬碟的讀取時間。

瀏覽器端模組:對於瀏覽器載入模組,模組原先都放在伺服器端,等待時間取決於網速的快慢,可能要等很長時間,瀏覽器處於"假死"狀態。因此,瀏覽器端的模組,不能採用"同步載入"(synchronous),只能採用"非同步載入"(asynchronous)。這也是amd規範誕生的背景。

目前流行的模組規範:

1、commonjs規範: 伺服器端模組的規範,node.js(node modules)採用了這個規範。

​module 1.0

已被module1.1取代。主要包含模組標準和程式包標準。

​2、cmd規範

瀏覽器端模組的規範,

3、amd規範

瀏覽器端模組的規範。

4、ecmascript6/harmony 模組規範:js標準草案。包括可在伺服器端和瀏覽器端使用的module,乙個module loader,和其他。雖然可以在某種程度上可以嘗試一下這樣的特性,但是要記住可能用 harmony 來規劃你的系統可能並不是個好主意(只是說目前還不是)。規範發生變化以及潛在的在跨瀏覽器層面的問題都會帶來風險(比如 ie9 可能會要過較長的時間才會消亡),所以在標準最終確定及其覆蓋率不成問題之前,你最好還是把注下在 amd(用於瀏覽器內執行的模組)與 commonjs(用於伺服器)身上。

流行的瀏覽器指令碼載入器:

1、requirejs:遵循amd規範,既支援瀏覽器模組,又支援伺服器端模組。非同步載入,提前載入。

2、seajs:遵循cmd規範,支援瀏覽器模組。

非同步載入,

執行時載入。 ​

技術選型選擇seajs,關於seajs的資料:

seajs元件庫,

前端模組化

定義 具有相同屬性和行為的事物的集合 在前端中 將一些屬性比較類似和行為比較類似的內容放在同乙個js檔案裡面,把這個js檔案稱為模組 目的 為了每個js檔案只關注與自身有關的事情,讓每個js檔案各行其職 模組化 指的就是遵守commonjs規範,解決不同js模組之間相互呼叫問題 commonjs a...

前端模組化

當多人開發同一專案時,很容易就會產生命名衝突的問題,尤其是js檔案,任何的js引入順序的打亂都可能導致專案執行失敗,為了解決命名衝突的問題,在es6之前,可以使用函式閉包來解決這個問題。即可能像這樣 function 這樣雖然可以解決命名衝突的問題,但也使得 的復用性變得極差,因為其它的檔案將無法再...

前端模組化

1.前端模組化的必需性 原先只需要寫在標籤中即可 隨著 量的增多,同一程式需要有多個人來寫 我們將 組織在多個js檔案中,但會存在 全域性變數同名問題 和 js檔案的順序依賴問題 我們希望在幾個檔案中的變數可以相互關聯使用而不衝突 因此,使用模組作為出口 a.建立匿名函式 function b.在匿...