當沒有使用模塊系統(tǒng)時

在沒有模塊系統(tǒng) (比如 webpack 或 Browserify) 的應用中，存在一種任何重 JS 前端應用都常用的模式：一個全局的 App 對象。

如果你想要添加的東西跟 Vue 本身沒有太多關系，那么這是一個不錯的替代方案。舉個例子：

var App = Object.freeze({
  name: 'My App',
  version: '2.1.4',
  helpers: {
    // 這是我們之前見到過的 `$reverseText` 方法
    // 的一個純函數(shù)版本
    reverseText: function (text) {
      return text
        .split('')
        .reverse()
        .join('')
    }
  }
})

如果你在好奇 Object.freeze，它做的事情是阻止這個對象在未來被修改。這實質上是將它的屬性都設為了常量，避免在未來出現(xiàn)狀態(tài)的 bug。

現(xiàn)在這些被共享的屬性的來源就更加明顯了：在應用中的某個地方有一個被定義好的 App 對象。你只需在項目中搜索就可以找到它。

這樣做的另一個好處是 App 可以在你代碼的任何地方使用，不管它是否是 Vue 相關的。包括向實例選項直接附加一些值而不必進入一個函數(shù)去訪問 this 上的屬性來得到這些值：

new Vue({
  data: {
    appVersion: App.version
  },
  methods: {
    reverseText: App.helpers.reverseText
  }
})

當使用模塊系統(tǒng)時

當使用模塊系統(tǒng)的時候，你可以輕松地把共享的代碼組織成模塊，然后把那些模塊 require/import 到任何你所需要的地方。這是一個典型的顯式做法，因為在每個文件里你都能得到一份依賴清單。你可以準確地知道每個依賴的來歷。

雖然毫無疑問它更啰嗦，但是這種方法確實是最可維護的，尤其是當和多人一起協(xié)作一個大型應用的時候。