模塊化開發（1）

　　　　　　　　　　　　　　　　　　　　　　模塊化開發 mobile（1）

1.模塊==包

　

　傳統開發：整個網頁咱們寫了一個js文件，全部的特效都寫在裏面了；

　缺點：耦合度過高，代碼關聯性太強，不便於後期維護，會形成全局污染

　 

　　發生的請求次數太多，依賴模糊，難於維護。

　　以上都是傳統的開發模式，都被拋棄了

.2.使用模塊化開發

　　爲何使用模塊化開發？

　　減小代碼之間的關聯度，部署方便，更好的分離 按需加載，避免命名衝突，容易維護。

3.什麼是模塊化？

　　node自帶的規範 commonjs規範

　　commonjs是node的規範，運行在服務端，不是瀏覽器端，若是使用在瀏覽器端，須要使用對該文件進行打包編譯(借鑑工具 browserify,webpack,gulp等)

　　書寫模塊的時候，對外暴露接口 module.exports={} esports.xxx=

　　引入模塊 require(路徑)

　　commonjs暴露的本質是一個叫exports的對象

　　Module.exports={}和exports.xxx=

　　兩者暴露的本質是同樣的，都是暴露一個exports對象

　　commonjs是node的規範，但他是同步加載的，同步加載在瀏覽器端是一個坑，只要一個環節卡住了，後面的就無法執行。因此不建議使用，若是非要使用就須要編輯打包。

　　web端

　　　每一個js都是一個模塊，每一個模塊都必須有一個暴露接口，每一個js文件有一個全局的方法叫require() 用於引入模塊。

　　模塊：

　　　1.node自帶的模塊(包) path url fs

　　　2.第三方模塊 weui jquery axios zepto

　　　　npm全名 node package manager  node包管理工具 增刪查改

　　　　https://www.npm js.com/

　　　　若是npm操做太慢 能夠安裝npm鏡像

　　　　npm install -g cnpm --registry=https://registry.npm.taobao.org

　　　　　

　　　　　下載

　　　　　　npm install jquery

　　　　　下載存放的位置

　　　　　　全局下載 在任何一個文件夾下都能使用這個包 全局安裝目錄

　　　　　　C:\Users\Administrator\Appdata\Roaming\npm\node_modules

　　　　　    如何全局安裝

　　　　　　npm install -g jquery

　　　　　　局部安裝

　　　　　　npm install jquery

　　　　　　就會在當前目錄下生成一個node_modules的文件夾裏面

　　　　　　npm install jquery -save -dev

　　　　　　這個是下載運行環境(生產環境)的包 好比 npm browserify

　　　　　兩者區別：

　　　　　　前者-save是上線時會被壓縮的包 後者-save-dev是上線時會被拋棄的包

　　　　　　

　　　　　　　　指定版本下載

　　　　　　　　npm install jquery@3.2.1 -save

　　　　　　刪除

　　　　　　　npm uninstall jquery

　　　　　　查版本

　　　　　　　npm search jquery

　　　　　　更新

　　　　　　　npm update jquery

　　　　3.自定義模塊  咱們寫的

　　　　　1.配置模塊說明文件 npm init 就會生成一個package.json的文件

　　　　　

　　　　　main：index.js 咱們的主文件是index.js

　　　　　index.js是這個包的輸出文件，即使刪除了package.json 只要不改變index.js的文件名就沒事，一旦改了就報錯。是由於包的輸出文件默認是index.js

　　　2.var obj=require("cui")

　　　　默認在node_modles文件下找這個包

 

　　　　在瀏覽器端，說require is not defined說明瀏覽器不支持commonjs,須要借鑑打包工具