当没有使用模块系统时
在没有模块系统 (比如 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
到任何你所需要的地方。这是一个典型的显式做法,因为在每个文件里你都能得到一份依赖清单。你可以准确地知道每个依赖的来历。
虽然毫无疑问它更啰嗦,但是这种方法确实是最可维护的,尤其是当和多人一起协作一个大型应用的时候。
网友评论