在vue项目中处理通用的数据和函数

原型方法的上下文

你可能没有意识到，在 JavaScript 中一个原型的方法会获得该实例的上下文。也就是说它们可以使用 this 访问数据、计算属性、方法或其它任何定义在实例上的东西。

让我们将其用在一个名为 $reverseText 的方法上：

Vue.prototype.$reverseText = function (propertyName) {
  this[propertyName] = this[propertyName]
    .split('')
    .reverse()
    .join('')
}

new Vue({
  data: {
    message: 'Hello'
  },
  created: function () {
    console.log(this.message) // => "Hello"
    this.$reverseText('message')
    console.log(this.message) // => "olleH"
  }
})

注意如果你使用了 ES6/2015 的箭头函数，则其绑定的上下文不会正常工作，因为它们会隐式地绑定其父级作用域。也就是说使用箭头函数的版本：

Vue.prototype.$reverseText = propertyName => {
  this[propertyName] = this[propertyName]
    .split('')
    .reverse()
    .join('')
}

会抛出一个错误：

Uncaught TypeError: Cannot read property 'split' of undefined

当没有使用模块系统时

在没有模块系统 (比如 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('')
    }
  }
})

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

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

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

当使用模块系统时

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

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