dwqs/blog

[译]如何在 Vue.js 中使用第三方库

dwqs opened this issue · 24 comments

dwqs commented

在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦.

本文将介绍一些在 Vue.js 中使用第三方库的方式.

全局变量

在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 window 对象上:

entry.js

window._ = require('lodash');

MyComponent.vue

export default {
  created() {
    console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
  }
}

这种方式不适合于服务端渲染, 因为服务端没有 window 对象, 是 undefined, 当试图去访问属性时会报错.

在每个文件中引入

另一个简单的方式是在每一个需要该库的文件中导入:

MyComponent.vue

import _ from 'lodash';

export default {
  created() {
    console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
  }
}

这种方式是允许的, 但是比较繁琐, 并且带来的问题是: 你必须记住在哪些文件引用了该库, 如果项目不再依赖这个库时, 得去找到每一个引用该库的文件并删除该库的引用. 如果构建工具没设置正确, 可能导致该库的多份拷贝被引用.

优雅的方式

在 Vuejs 项目中使用 JavaScript 库的一个优雅方式是讲其代理到 Vue 的原型对象上去. 按照这种方式, 我们引入 Moment 库:

entry.js

import moment from 'moment';
Object.defineProperty(Vue.prototype, '$moment', { value: moment });

由于所有的组件都会从 Vue 的原型对象上继承它们的方法, 因此在所有组件/实例中都可以通过 this.$moment: 的方式访问 Moment 而不需要定义全局变量或者手动的引入.

MyNewComponent.vue

export default {
  created() {
    console.log('The time is ' . this.$moment().format("HH:mm"));
  }
}

接下来就了解下这种方式的工作原理.

Object.defineProperty

一般而言, 可以按照下面的方式来给对象设置属性:

Vue.prototype.$moment = moment;

可以这样做, 但是 Object.defineProperty 允许我们通过一个 descriptor 来定义属性. Descriptor 运行我们去设置对象属性的一些底层(low-level)细节, 如是否允许属性可写? 是否允许属性在 for 循环中被遍历.

通常, 我们不会为此感到困扰, 因为大部分时候, 对于属性赋值, 我们不需要考虑这样的细节. 但这有一个明显的优点: 通过 descriptor 创建的属性默认是只读的.

这就意味着, 一些处于迷糊状态的(coffee-deprived)开发者不能在组件内去做一些很愚蠢的事情, 就像这样:

this.$http = 'Assign some random thing to the instance method';
this.$http.get('/'); // TypeError: this.$http.get is not a function

此外, 试图给只读实例的方法重新赋值会得到 TypeError: Cannot assign to read only property 的错误.

$

你可能会注意到, 代理第三库的属性会有一个 $ 前缀, 也可能看到其它类似 $refs, $on, $mount 的属性和方式, 它们也有这个前缀.

这个不是强制要求, 给属性添加 $ 前缀是提供那些处于迷糊状态(coffee-deprived)的开发者这是一个公开的 API, 和 Vuejs 的一些内部属性和方法区分开来.

this

你还可能注意到, 在组件内是通过 this.libraryName 的方式来使用第三方库的, 当你知道它是一个实例方法时就不会感到意外了. 但与全局变量不同, 通过 this 来使用第三方库时, 必须确保 this 处于正确的作用域. 在回调方法中 this 的作用域会有不同, 但箭头式回调风格能保证 this 的作用域是正确的:

this.$http.get('/').then(res => {
  if (res.status !== 200) {
    this.$http.get('/') // etc
    // Only works in a fat arrow callback.
  }
});

插件

如果你想在多个项目中使用同一个库, 或者想将其分享给其他人, 可以将其写成一个插件:

import MyLibraryPlugin from 'my-library-plugin';
Vue.use(MyLibraryPlugin);

在应用的入口引入插件之后, 就可以在任何一个组件内像使用 Vue Router, Vuex 一样使用你定义的库了.

写一个插件

首先, 创建一个文件用于编写自己的插件. 在示例中, 我会将 Axios 作为插件添加到项目中, 因而我给文件起名为 axios.js. 其次, 插件要对外暴露一个 install 方法, 该方法的第一个参数是 Vue 的构造函数:

axios.js

export default {
  install: function(Vue) {
    // Do stuff
  }
}

可以使用先前将库添加到原型对象上的方法:

axios.js

import axios from 'axios';

export default {
  install: function(Vue,) {
    Object.defineProperty(Vue.prototype, '$http', { value: axios });
  }
}

最后, 利用 Vue 的实例方法 use 将插件添加到项目中:

entry.js

import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin);

new Vue({
  created() {
    console.log(this.$http ? 'Axios works!' : 'Uh oh..');
  }
})

彩蛋: 插件的可选参数

插件的 install 方法可以接受可选参数. 一些开发可能不喜欢将 Axios 实例命名为 $http, 因为这是 Vue Resource 提供的一个通用名字. 因而可以提供一个可选的参数允许他们随意命名:

axions.js

import axios from 'axios';

export default {
  install: function(Vue, name = '$http') {
    Object.defineProperty(Vue.prototype, name, { value: axios });
  }
}

entry.js

import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin, '$axios');

new Vue({
  created() {
    console.log(this.$axios ? 'Axios works!' : 'Uh oh..');
  }
})

参考

Use Any Javascript Library With Vue.js

hkongm commented

很全面，优雅方式美

helxm commented

明白了很多

  • 👀1
cike8899 commented

Object.definePrototype(Vue.prototype, '$moment', { value: moment });这句写错了吧？应该是defineProperty

  • 👍11
dwqs commented

已经纠正 @cike8899

  • 👍4
  • 🎉2
cike8899 commented

Object.defineProperty(Vue.prototype, '$moment', { value: moment });想要添加的属性不被重新赋值，应该这么设置吧：Object.defineProperty(Vue.prototype, '$moment', { value: moment ,writable: false});默认writable: true 可以被重新赋值。

dwqs commented

默认是 false @cike8899

cike8899 commented

是的，不好意思，红宝书上这么一段话 *[[Writable]]：表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true。*是字面量的方式。

yola-0316 commented

另外有个疑问：

  1. 没有在npm中发布的包，怎么做？
  2. 一些多模块，需要配置后再使用的包，怎么配置比较好。如echarts等？
gnipbao commented

翻译的不错

  • 👍3
ipengyo commented

全局变量

这种方式 服务端没有window 但是都有global 啊。。

Tian-Hun commented

在 this 不指向 Vue 的地方如何使用？

lz82 commented

@Tian-Hun 用that 哈哈
this还指向Vue实例的时候，写一行 const that = this

Erik5169 commented

原型引入 lodash库后 这样使用总是报错，在create()函数中是能够打印输出this.$lodash（）对象的， 但是这样使用总是报错， 能帮忙分析下原因吗？十分感谢
methods: {
updateData: this.$lodash().debounce(function() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
}
})
}, 300),
}

zengyuangai commented

lodash 按需引入改怎么操作 比如只引入 array

wang777777 commented

这样的方式真的好吗？按需加载怎么办

  • 👍5
RuralHunter commented

其实并不算好，不同组件命名一样冲突了怎么办

lpy681 commented 
MyNewComponent.vue
export default {
  created() {
//    console.log('The time is ' . this.$moment().format("HH:mm"));
//改成 逗号
 console.log('The time is ', this.$moment().format("HH:mm"));
  }
}
heavenkiller2018 commented

very good!

jiangzdongw commented

非常棒

ChouJoe commented

其实并不算好，不同组件命名一样冲突了怎么办

这就算开发者写代码是否有良好习惯的问题了，对于vue中全局注册的属性或者方法(例如mixin，以及这篇文章提到的object.defineProperty方法）, 在命名的时候最好加上一个自定义的前缀用以区分这是个全局方法/属性。否则极容易出bug，而且很难意识到是因为命名重复的问题。

zhangjiaoalice commented

太优雅了吧，学到了

dwqs commented
nieshuangyan commented
Jetmet commented