在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦.
本文将介绍一些在 Vue.js 中使用第三方库的方式.
全局变量
在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 window 对象上:
entry.js
window._ = require('lodash');
MyComponent.vue
export default {
created() {
console.log(_.isEmpty() "htmlcode">
import _ from 'lodash';
export default {
created() {
console.log(_.isEmpty() "htmlcode">
import moment from 'moment';
Object.definePrototype(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)细节, 如是否允许属性可写"htmlcode">
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 "htmlcode">
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..');
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。