前端模塊化----學習指南

前端模塊化：

　　js模塊化提供了三種規範

　　　　一、commonjs規範，表明就是node.js，適合後臺開發，由於是同步的，服務器的，運行比較快，等待的時間不長，commonjs不適合於前端，前端的客戶端是瀏覽器，瀏覽器追求異步加載，瀏覽器不能等待太長時間

　　　　二、前端模塊的規範是Amd規範，表明的是requirejs，他是異步的，不少前端框架都是用的amd規範，好比：jquery。angular等

　　　　三、第三個模塊規範是es6

模塊化的操做：

　　commonjs規範的操做

　　　　全部的模塊化都是兩個方向，暴露模塊接口和引入模塊接口

　　　　module.exports={ }　　　　暴露的本質是一個exports對象

　　　　require("路徑")　　　　　　引入一個模塊

　　　　這是後臺規範，在nodejs環境下直接運行，在客戶端下不能直接運行，須要對該文件進行打包解析，webpack，gulp

　　自定義前端模塊：

　　　　不借助任何規範，本身寫

　　　　案例分析：

　　　　　　定義一個mokuai1模塊，沒有任何依賴，定義一個mokuai2模塊，這個模塊依賴mokuai1模塊，定義一個主文件，他依賴mokuai2模塊

　　　　　　一、定義一個mokuai1模塊（mokuai1.js）

　　　　　　　　

　　　　　　二、定義一個mokuai2模塊（mokuai2.js）

　　　　　　　　

　　　　　　三、定義主文件

　　　　　　　　

　　　　　　四、html文件中的依賴

　　　　　　　　

　　　　自定義模塊中的問題：

　　　　　　爲何要加一個自調用函數？

　　　　　　　　由於自調用函數執行的時候會造成一個私有的做用域，對內部的變量進行保護

　　　　　　爲何要注入window？

　　　　　　　　是爲了讓其餘模塊在window下均可以使用

　　　　注意事項：

　　　　　　依賴關係千萬不能出錯

　　　　優勢：避免命名衝突

　　　　缺點：會發送屢次請求，模塊引入的順序不能放錯

　　前端模塊化規範amd：

　　　　amd是全段模塊化的一種規範，全稱：async module definition，它是異步加載機制，因此須要按照這個規範去定義模塊和使用模塊

　　　　require提供了一個全局的方法，叫define()用來定義模塊的

　　　　return{} 是用來暴露接口的

　　　　定義模塊分爲兩種：一種是不依賴其餘模塊，另外一種就是依賴其餘模塊

　　　　定義一個不依賴其餘模塊(xiao.js)：不依賴其餘模塊裏面就是一個函數

　　　　　　

　　　　定義依賴其餘模塊(mk.js)：依賴其餘模塊須要注入其餘模塊

　　　　　　

　　　　　　[ ]中寫的是要依賴的模塊

　　　　　　function的括號中的mhe這個參數表明的是要依賴模塊所返回的對象，依賴多少個模塊，就有多少個參數

　　　　如何使用寫的模塊：

　　　　　　定義一個主文件(index.js)，在主文件中分爲兩部分，一部分是配置模塊，另外一部分是使用模塊(引入模塊)

　　　　　　　

　　　　　　　requirejs.config()是配置模塊

　　　　　　　require是引入模塊

　　　　　在html中引入主文件(index.js)和require.js

　　　　　　　

　　　　　　　src引入的是主文件，data-main引入的是主文件