模塊化

 一、什麼是模塊化  

模塊化開發 ，能夠一次性引入多個模塊文件 ，同時也沒有引入的順序 

require.js加載的模塊，採用AMD規範。也就是說，模塊必須按照AMD的規定來寫。

具體來講，就是模塊必須採用特定的define()函數來定義。若是一個模塊不依賴其餘模塊，那麼能夠直接定義在define()數之中。

 

引入時：須要注意 引入順序    頻繁引入

jquery.js

cookie.js 

ajax.js

public.js

 

 

二、如何實現模塊化開發（以requirejs來講）

 

第一步：

     在頁面中引入：<script src="require.js" data-main="main"></script>

                 data-main的值是一個入口文件   main 實際上就是 main.js

第二步： 入口函數實現：

 

     經過cinfig方法爲模塊指定別名

requirejs.config({  //爲引入的模塊指定別名

     paths:{

           jquery:"jquery-1.11.1.min"   //爲jquery庫文件指定一個別名，方便後期調用

     }

})

第三步： 經過requirejs方法將寫好的模塊引入,並根據他們編寫子代碼

三、requirejs模塊化開發經常使用的方法

 

①requirejs.config爲模塊指定別名,方便模塊的引用

 

②requirejs將寫好的模塊引入,並根據他們編寫子代碼

有兩個參數

第一個參數是一個數組：引入的每一個模塊名稱，

第二個參數是一個回調函數，函數中就是頁面要實現某個功能的子代碼

 

③define用它編寫模塊（功能），在相應的地方進行引入

有兩個參數

第一個參數是該模塊要依賴的其它模塊，是一個數組  （能夠省略）

第二個參數是一個回調函數  函數中實現該模塊的功能

 

四、關於requirejs（模塊化開發）好處

 

①整個項目中通常不會出現全局變量（防止全局變量的污染）

②整個項目中全部模塊的項目加載順序不固定（順序任意）

③整個項目中模塊之間的執行是異步的

④整個項目實現代碼均是面向對象的書寫方式，便於模塊的管理和維護

 

五、關於AMD

 

AMD：  requirejs所倡導的就是AMD開發方式

     是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

AMD推崇的是依賴前置

 

CMD seajs模塊化  推崇的是依賴就近

 

es5在AMD中引入子模塊 ： require()  例如gulp中插件的引入問題

 

六、es6的模塊化 ： 

 

import 和 export模塊 

• • export :負責進行模塊化，也是模塊的輸出。
  • import : 負責把模塊引入，也是模塊的引入操做。

將es6轉成es5須要經過 gulp-babel 插件完成    （babel配置過程）

 (此時運行:babel  src/index.js –o dist/index.js  )

 

npm install  -g babel-cli   全局安裝babel     打開cmd直接安裝

npm install --save-dev  babel-preset-es2015  babel-cli      本地gulp項目下安裝babel

項目目錄建立文件，新建-自定義文件:      .babelrc ，輸入代碼：

{

      "presets":[

           "es2015"

],

"plugins":[]

}

，再次運行  babel  src/index.js –o dist/index.js   ，就能夠正常的將es6代碼轉成es5了

 

export 多變量定義 ： 

 

var a = 9

 

var b = 8

 

var c = 90

 

export{ a,b,c }    起別名用  as

 

執行 import 導入的內容 ： 

import {name} from "./temp.js";

 

babel-node  src2/xx.js

 

 

七、模塊化

requireJs     seaJS       CommonJS      ES6 module

   異步           異步             同步                  同步

AMD            CMD           common             import

 

8.模塊化規範

如何導出模塊 如何接收模塊？

define定義  return導出   require接收（requireJs ）

 

module.exports 導出   require 導入（commonJS）

 

export default 導出    import 導入 (ES6 module)