前端模組化的三種規範

這次帶給大家前端模組化的三種規範，前端模組化規範的注意事項有哪些，下面就是實戰案例，一起來看一下。

說到模組化，不可否認這已經成為了前端開發的一個共識，而本人在開發中也逐漸接受了模組化這種理念，並且深深滴體會到模組化開發的好處。為啥這麼說呢？來看一段簡單的程式碼：（不使用模組化）

　　

#　　這是在未使用模組化之前經常可以見到的一種現象：把一堆js放在body底部，可是你知道嗎?這種方式有兩個很大的問題：

　　1，root.js,tree.js,leaf.js這三者從上到下的順序不能亂，因為leaf依賴tree，而tree又依賴root，順序一變就跑不通了；

　　2，如果我是一個新手或接盤俠，拿到leaf.js的時候，我知道它要依賴tree.js，但我知道tree.js其實是依賴root.js的嗎？也許root.js又要依賴別的js才能跑得起來呢？

　　模組化這時候就出現了，正是為了拯救這種js檔案之間不確定的依賴關係而來。

　　AMD規範

　　說到這個規範，現在用的人已經是少之又少了，這個規範的基石在於，你要在html檔中先引入一個require.js，就好像你用jQuery的語法就要先把jQuery.js載入進來一樣。引進這個討厭的require.js之後，在一堆js檔案中，分成三類：

#　　第一類：單純的define()，由於在require.js中，對於資源的引用（也就是資源作為參數傳入）一定要先define，再require/define，這類負責純定義；

##　　第二類：有參數的define(["其他定義好的的js"])，在這類中，把其他define好的js引用進來，同時自己又再define另外一個東西，承擔著雙重職責；

　　第三類：單純的require(["其他定義好的的js1","其他定義好的的js2",... ]),在這一類，只需負責專心引用資源，可以引用很多資源。

　　怎麼樣？是不是感覺賊麻煩。需要全域

定義函數，又要引用什麼require.js，怒棄之。

　　

CMD規範

　　其實CMD與AMD規範並沒什麼本質的區別，

區別在於他們對依賴模組的執行時機處理不同。 雖然兩者都是非同步載入模組，但是AMD依賴前置，js可以方便知道依賴模組是誰，要依賴什麼js那就先載入進來，至於你要依賴這些js來幹嗎得先等著，等我載入完了資源再商量；而CMD就近依賴，需要使用這個依賴模組時，我再載入進來用。

　　這就好比什麼？就好像我今晚要看5集三國演義。 AMD是先打開五個窗口，分別是1~5集，都緩衝著先，反正等下每集我都要看的；CMD則是先打開第一集的窗口，等到我第一集看完了，想看第二集了，就再跳到第二集。

　　CommonJS規格

　　總的來說，以上兩種都不是我的菜，現在使用頻率最高的，也是大家公認的好的模組化規範，是CommonJS。 #

　　CommonJS就很簡單了，一個js檔案要輸出去，只要用module.export={xxx:你要輸出的內容}，而在另一個js中，你要引用什麼，就透過var xxxx=require("xxxx")引用進來就行了，這玩意並不是非同步載入模組，而是同步一次性載入出來。個人感覺，這個規範可以說有些不錯，甚至用「666」來形容它也絲毫不虛，推薦大家用這規範。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue.js的表單輸入綁定

JS的型別值轉換成Boolean型別有哪些規則

以上是前端模組化的三種規範的詳細內容。更多資訊請關注PHP中文網其他相關文章！