Vue 模塊化開發

模塊化開發

JavaScript原始功能

• 在網頁開發的早期，js制作作為一種腳本語言，做一些簡單的表單驗證或動畫實現等，那個時候代碼還是很少的。

  • 那個時候的代碼是怎么寫的呢？直接將代碼寫在<script>標簽中即可

• 隨着ajax異步請求的出現，慢慢形成了前后端的分離

  • 客戶端需要完成的事情越來越多，代碼量也是與日俱增。
  • 為了應對代碼量的劇增，我們通常會將代碼組織在多個js文件中，進行維護。
  • 但是這種維護方式，依然不能避免一些災難性的問題。

利用匿名函數的解決方案

• 我們可以使用匿名函數來解決方面的重名問題
• 我們先創建兩個js文件
  • 在aaa.js文件中，我們使用匿名函數

(function() {
  var lazy = true
})

• 但是如果我們希望在main.js文件中，用到lazy，應該如何處理呢？
  • 顯然，另外一個文件中不容易使用，因為lazy是一個局部變量。

使用模塊作為出口

常見的模塊化規范：CommonJS、AMD、CMD，也有ES6的Modules

CommonJS

• 模塊化有兩個核心：導出和導入
• CommonJS的導出：

modul.exports = {
  lazy: true,
  test(a, b) {
    return a + b
  },
  demo(a, b) {
    return a * b
  }
}

CommonJS的導入

//CommonJs模塊
let {test, demo, lazy} = require('moduleA')

//等同於
let _mA = require('moduleA')
let test = _mA.text
let demo = _mA.demo
let lazy = _mA.lazy

ES6的export指令

• export指令用於導出變量，比如下面的代碼：

//info.js
export let name = 'why'
export let age = 18
export let height = 1.78

• 上面的代碼還有另外一種寫法：

//info.js
let name = 'why'
let age = 18
let height = 1.78

export {name, age, height}

• 上面我們主要輸出變量，也可以輸出函數或者輸出類
• 某些情況下，一個模塊中包含某個的功能，我們並不希望給這個功能命名，而且讓導入者可以自己來命名
  • 這個時候就可以使用export default

// info.js
export default function () {
  console.log('default function')
}

• 我們來到main.js中，這樣使用就可以了
• 這里的myLazy是我自己命名的，你可以根據需要命名它對應的名字

inport myLazy fron './info.js'
myLazy()

• 另外，需要注意：
  • export default在同一個模塊中，不允許同時存在多個
• 我們使用export指令導出了模塊對外提供的接口，下面我們就可以通過import命令來加載對應- 的這個模塊了
• 首先，我們需要在HTML代碼中引入兩個js文件，並且類型需要設置為module

<script src="info.js" type="module"></script>
<script src="main.js" type="module"></script>

• import指令用於導入模塊中的內容，比如main.js的代碼

inport {name, age, height} from "./info.js"
console.log(name, age, heigth)

• 如果我們希望某個模塊中所有的信息都導入，一個個導入顯然有些麻煩：
  • 通過*可以導入模塊中所有的export變量
  • 但是通常情況下我們需要給*起一個別名，方便后續的使用

import * as info from './info.js'
console.log(info.name, info.age, info.height, info.friends)