美文网首页
vue 学习篇

vue 学习篇

作者: 搬个菠萝晒太阳 | 来源:发表于2019-12-17 10:16 被阅读0次

    当没有使用模块系统时

    没有模块系统 (比如 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 到任何你所需要的地方。这是一个典型的显式做法,因为在每个文件里你都能得到一份依赖清单。你可以准确地知道每个依赖的来历。

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

    相关文章

      网友评论

          本文标题:vue 学习篇

          本文链接:https://www.haomeiwen.com/subject/skqdnctx.html