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


Posted in Javascript onApril 25, 2017

在诸多 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.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)细节, 如是否允许属性可写? 是否允许属性在 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..');
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实现的鼠标经过时播放声音
May 18 Javascript
jquery异步循环获取功能实现代码
Sep 19 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 #Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 #Javascript
ES6中Math对象新增的方法实例详解
Apr 25 #Javascript
jquery.form.js异步提交表单详解
Apr 25 #jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 #jQuery
深入理解Javascript中的作用域链和闭包
Apr 25 #Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 #Javascript
You might like
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
js省市区级联查询(插件版&无插件版)
2017/03/21 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
详解vue中组件参数
2018/07/09 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
Python中变量交换的例子
2014/08/25 Python
详解Python中break语句的用法
2015/05/14 Python
python避免死锁方法实例分析
2015/06/04 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
python实现抖音点赞功能
2019/04/07 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
python scatter函数用法实例详解
2020/02/11 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
单位门卫岗位职责
2013/12/20 职场文书
小学生期末评语
2014/04/21 职场文书
学生保证书
2015/01/16 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript