前端的模塊化

1.前端的模塊化

　　js中提供了三種規範

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

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

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

2.模塊化的操做

　　1.commonjs的操做

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

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

　　　　require() 引入一個模塊

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

 

 

　　拓展

　　　　var a:

　　　　var  a 就是聲明一個變量a,就是瀏覽器往window上添加一個屬性a。

前端模塊

　　自定義前端模塊

　　案例分析

　　定義一個a模塊，沒有任何依賴，定義一個b模塊，這個模塊依賴a模塊，定義一個主文件index.js，依賴b模塊。

　　

html文件

注意事項

依賴關係千萬不能出錯

這種模塊的缺點

會發送屢次請求，依賴關係不能放錯順序。

3.前端模塊化規範amd

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

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

　　定義模塊分兩種 1不依賴其餘模塊  2.依賴其餘模塊

　　不依賴其餘模塊

　

　　定義一個有依賴的模塊

如何使用這些模塊

在主文件中分兩部分，一部分是配置模塊     一部分是使用模塊