前端模塊化

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。

前端模塊

自定義前端模塊

案例分析

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

　　

　　

　　

　　Html文件

　　　

注意事項

　　依賴關係千萬不能出錯

　　這種模塊的缺點

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

3.前端模塊化規範amd

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

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

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

　　　　不依賴其餘模塊

 　　　　　　

　　　　　定義一個有依賴的模塊

　　　　　

　　　　如何使用這寫模塊

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