前端模塊化

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的參數比較特殊，要寫成$,這是要求）

　　

　　這些模塊和依賴的模塊也都完成了，那如何使用那？
　　在主文件中分兩部分 一部分是 配置模塊，一部分是 使用模塊