模塊化開發學習指南←和→普通開發的區別

本章學習小編會圍繞如下知識點去爲你們講解：

1.什麼是模塊

2.什麼是傳統開發，傳統開發的區別？

3.什麼是模塊化開發？

4.爲何使用模塊化開發它的優勢有哪些？

 

一：什麼是模塊

1.模塊===包，簡單說模塊就至關於一個包(容器)

 二：什麼是傳統開發，傳統開發的缺點？

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

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

或者是這種：好比導航條是單獨的一個js文件或輪播圖是單獨的js文件，發送請求次數過多，依賴模糊，難以維護

以上是傳統開發形式，都被拋棄了。

 

 三：使用模塊化開發

　　1.爲何使用模塊化開發(優勢)

　　　　1.減小代碼之間的關聯

　　　　2.部署方便

　　　　3.更好的進行分離，按需加載

　　　　4.避免命名衝突，容易維護

　　3.什麼是模塊化？

　　　　node自帶的規範 commonjs規範

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

　　　　書寫模塊時候，對外暴露接口 module.expots={}或 exports.xxx=number或json

　　引入模塊 require(路徑)

直接在瀏覽器打開會報錯，要借用打包工具（後面說）

 

 

 

 

能夠看到咱們在終端能夠打印輸出nav.js的變量

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

module.export={}和exports.xxx=number/json的區別？

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

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

web端

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

 

模塊的分類：

　　

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

 

       2.第三方模塊 weui jquery axios zepto

 

引入第三方模塊1.用<script src=」本地路徑」>2.用網絡地址3.就是用npm

 

      npm網址： https://www.npmjs.com/

 

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

 

 

Npm 全名 node packsge manager node包管理工具 增刪查改

       下載

              Npm install jquery

              下載的存放位置在c盤

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

 

              如何全局安裝

              Npm install -g jquery

              局部安裝：在當前文件夾下有一個 package.json

              Npm install jquery

              局部安裝就會在當前目錄生成一個 node_modules的文件夾裏

              Npm install jquery –save

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

              Npm install jquery –save -dev

              這個是下載開發環境因此來的包 好比 npm browserify

              兩者區別：前者下載—save 是上線時會被壓縮的包，後者 -- save- dev

 

       刪除

       Npm uninstall jquery：能夠手動直接刪除

       查版本

       Npm search jquery

       更新

       Npm updata jquery

 

 

 

　

3.自定義模塊(咱們本身寫)

 

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

 

Main；index.js重要，意味着咱們的主文件是index.js

 

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

 

 

Var obj=require(「jin」)

默認在node_require 文件夾下找這個包

在瀏覽器端，說require is notdefined 說明瀏覽器不支持 common.js，須要借鑑打包工具。

1.第一個打包工具 browserify

 

 

 

 

 node簡單補充：

node是javascript的環境，在node裏面能夠運行js文件。指令node+文件名