vue 学习篇

当没有使用模块系统时

在没有模块系统 (比如 webpack 或 Browserify) 的应用中，存在一种任何重 JS 前端应用都常用的模式：一个全局的 App 对象。

如果你想要添加的东西跟 Vue 本身没有太多关系，那么这是一个不错的替代方案。举个例子：

var App = Object.freeze({
  name: 'My App',
  version: '2.1.4',
  helpers: {
    // 这是我们之前见到过的 `$reverseText` 方法
    // 的一个纯函数版本
    reverseText: function (text) {
      return text
        .split('')
        .reverse()
        .join('')
    }
  }
})

如果你在好奇 Object.freeze，它做的事情是阻止这个对象在未来被修改。这实质上是将它的属性都设为了常量，避免在未来出现状态的 bug。

现在这些被共享的属性的来源就更加明显了：在应用中的某个地方有一个被定义好的 App 对象。你只需在项目中搜索就可以找到它。

这样做的另一个好处是 App 可以在你代码的任何地方使用，不管它是否是 Vue 相关的。包括向实例选项直接附加一些值而不必进入一个函数去访问 this 上的属性来得到这些值：

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

当使用模块系统时

当使用模块系统的时候，你可以轻松地把共享的代码组织成模块，然后把那些模块 require/import 到任何你所需要的地方。这是一个典型的显式做法，因为在每个文件里你都能得到一份依赖清单。你可以准确地知道每个依赖的来历。

虽然毫无疑问它更啰嗦，但是这种方法确实是最可维护的，尤其是当和多人一起协作一个大型应用的时候。