JS模塊化

1、理解

一、什麼是模塊、模塊化?

將一個複雜的程序依據必定的規範封裝成幾個文件,並進行組合在一塊兒javascript

二、爲何要模塊化?

下降複雜度,提升解耦性,部署方便前端

三、模塊化的好處

  • 避免命名衝突(減小命名空間污染)
  • 更好的分離,按需加載
  • 更高複用性
  • 高可維護性

四、頁面引入加載script

 模塊的使用  舉例來講:前端框架layui 的js部分就是採用模塊化(用的本身定義的模塊化方法)java

layui.use就是引入模塊 layui,define就是定義模塊node

2、模塊化規範

一、CommonJS(node根據該規範編寫)

說明:

每個文件均可以當作一個模塊npm

在服務器端:模塊的加載 是運行時同步加載的瀏覽器

在瀏覽器端:模塊須要提早編譯打包處理前端框架

基本語法:

模塊引入:require(xxx)服務器

  第三方模塊:xxx爲模塊名app

  自定義模塊:xxx爲模塊文件路徑框架

暴露模塊:exports.xxx = value 和 module.exports = value

  暴露的模塊 本質是 exports 對象  

  exports自己是一個空對象 exports.xxx = value是給exports對象添加屬性或方法

  module.exports = value 是直接用value新對象來覆蓋原來的空對象

實現:

服務器端實現:Node.js

瀏覽器端實現:Browserify (CommonJS的瀏覽器端的打包工具)

下載安裝browserify

  全局:npm install browserify -g

  局部:npm install browserify --save-dev

定義模塊代碼(js文件代碼 並暴露相應內容)

引入模塊  在app.js 中用require引入模塊 可是瀏覽器不認識require方法,須要打包處理js

  在根目錄下 終端輸入 browserify js/src/app.js -o js/dist/bundle.js  (js/src/app.js源文件 js/dist/bundle.js 是打包輸出的文件)

頁面使用引入:

<script type="text/javascript" src="js/dist/bundle.js"></script> (瀏覽器真正跑的是打包生成的文件)

二、AMD

說明:

專門用於瀏覽器端的模塊化規範,模塊的加載是異步的

基本語法:

定義暴露模塊:

  //定義沒有依賴的模塊:

  define(function(){

    return 模塊

  })

  //定義有依賴的模塊:

  define(['module1','module2'],function(m1,m2){

    return 模塊

  })

引入使用模塊:

   require(['module1','module2'],function(m1,m2){

    使用m1/m2

  })

實現(瀏覽器端):

Require.js

三、CMD(瞭解)

說明:專門用於瀏覽器端,模塊的加載是異步的,模塊使用時纔會加載執行

基本語法:

定義暴露模塊:

  //定義沒有依賴的模塊:

  define(function(require,exports,module){

    exports.xxx = value

    module.exports = value

  })

  //定義有依賴的模塊:

  define(function(require,exports,module){

    //引入依賴模塊(同步)

    var module2 = require("./module2")

    //引入依賴模塊(異步)

    require.async("./module3",function(m3){

    })

    //暴露模塊

    exports.xxx = value

  })

引入使用模塊:

   require(function(require){

    var m1 = require('./module1')

    var m4 = require('./module4')

    m1.show()

    m4.show()

  })

實現(瀏覽器端):Sea.js

四、ES6

說明:依賴模塊須要編譯打包處理

語法:

  導出模塊:export xxx

  引入模塊:import  xxx from "url"

頁面引入

實現(瀏覽器端):

  使用Babel將ES6編譯爲ES5代碼

  使用Browserify編譯打包js

相關文章
相關標籤/搜索