如何在 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条件判断使用小技巧总结
Sep 08 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 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安全性漫谈
2012/06/28 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
php实现小程序支付完整版
2018/10/09 PHP
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
python求解水仙花数的方法
2015/05/11 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
在keras中实现查看其训练loss值
2020/06/16 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
animation和transition的区别
2020/10/12 HTML / CSS
Linux开机引导的步骤是什么
2015/10/19 面试题
有多年工作经验的自我评价
2014/03/02 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
降价通知函
2015/04/23 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
李强为自己工作观后感
2015/06/11 职场文书
零基础学java之循环语句的使用
2022/04/10 Java/Android
MySQL索引失效场景及解决方案
2022/07/23 MySQL