前端模組化

js模組提供的三種規範

1.commen.js 規範代表就是node.js,適合後台開發，因為是同步的，伺服器的執行比較快，等待時間不長，commen.js 不適合用於前端，前端的客戶是瀏覽器，瀏覽器追求的是非同步載入，瀏覽器不能等待太長時間

2.前端模組的規範是 amd規範，代表就是requirejs，它是非同步載入的，很多前端框架都是用的amd規範，比如jquery，angular等

3.第三個模組化規範是es6

模組化操作

1.commonjs的規範

所有的模組化都是兩個方向，暴露模組介面和引入模組

module.exports={} 暴露的是乙個叫 exports 的物件

require（）引入乙個模組

這是後台的規範，在node.js 環境可以直接執行，但是在客戶端不能直接執行，需要對檔案打包編譯（打包編譯的工具有 webpack gulp）

2.拓展

var a

var a 就是宣告乙個變數a ，就是瀏覽器往window 上新增的乙個屬性 a

3.前端模組

自定義前端模組

案例分析：定義乙個a1模組，沒有任何的依賴，沒有任何的第三方模組，再定義乙個 b1模組，b1 模組依賴a1 模組，定義乙個主檔案 index.js（主檔案的名字也不一定非要叫index，看自己需求而定），main.js 依賴 b1.js 模組，看以下**

這是a1.js 模組

這是 b1.js 模組，此模組依賴a.js 模組

index.js 依賴的 b1.js 的檔案

html檔案的內容

注意事項：

依賴關係千萬不能出錯，這種請求是不需要第三方的外掛程式，但是有一定的缺點，會傳送多次請求，依賴關係不能放錯順序

前端模組化規範 amd

1.amd 是前端模組化的一種規範，全稱 async module function 非同步模組載入機制，所以需要按照這個規範去定義模組和模組的使用

2.require 提供了乙個全域性的方法叫define（）用來定義模組

定義的模組分兩種：（1）不依賴其它模組（2）依賴其它模組

不依賴其它模組

然後再定義乙個有依賴的模組，此模組依賴xiaohe模組和jquery'模組（jquery的引數比較特殊，要寫成$,這是要求）

這些模組和依賴的模組也都完成了，那如何使用那？

在主檔案中分兩部分一部分是配置模組，一部分是使用模組