在 Vue.js 中运用恣意 JavaScript 第三方库

2024年1月19日 124次阅读 来源: 瘦猪

如安在 Vue.js 项目中 引入 JavaScript 第三方库

全局变量

将 JavaScript 第三方库 增加到项目中，最简朴的要领是经由过程将其附加到 window 对象上，以使其成为全局变量：

// entry.js 文件
window._ = require('lodash'); 
JavaScript 代码:
// MyComponent.vue 文件
export default {
  created() {
    console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
  }
}

这类状况会使 window 变量不停增进，然则最症结的是，他们不能运用服务器衬着。当应用程序在服务端运行时，window 对象是 undefined 的，因而尝试接见 window 下的属性将会抛出一个毛病。

在每一个文件中导入

另一种二流的要领是将库导入到每一个文件

// MyComponent.vue 文件
import _ from 'lodash';
export default {
  created() {
    console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
  }
}

这是有用的，然则你须要反复手动导入和移除，这是一个痛点：你必需记着将这个库导入到每一个文件中，然后当你的某个文件不必这个库的时刻, 记得要将它从这个文件中移除。假如你没有准确地设置你的构建东西，则能够会终究致使在构建包中存在同一个库的多个副本。

一个更好的体式格局

在Vue项目中运用Javascript库的最清洁，最硬朗的要领是将其代办为 Vue 原型对象的属性。我们用这类体式格局，将 Moment日期和时候库增加到我们的项目中：

JavaScript 代码:
// entry.js 文件
import moment from 'moment';
Object.definePrototype(Vue.prototype, '$moment', { value: moment });
由于统统组件都邑继续 Vue 原型对象上要领，这将使 Moment 自动可用于任何组件，没有全局变量或任何须要手动导入的组件。它能够在任何 实例/组件 中简朴地经由过程 this.$moment 接见被接见：

JavaScript 代码:
// MyComponent.vue 文件
export default {
  created() {
    console.log('The time is ' . this.$moment().format("HH:mm"));
  }
}

如今让我们花点时候相识一下这是怎样事变的。

Object.defineProperty
我们一般会像如许设置一个对象属性：

JavaScript 代码:
Vue.prototype.$moment = moment;

你能够这么做，然则经由过程运用 Object.defineProperty ，我们能够运用 描述符 来定义我们的属性。描述符许可我们设置一些初级细节，比方我们的属性是不是可写，以及在 for 循环中罗列时期是不是显现。

我们一般不会在一样平常运用 Javascript 中运用到描述符，由于 99％ 的时候我们不须要这么仔细的属性分派。但这里给我们一个显著的上风：默许状况下，运用描述符建立的属性是只读的。

这意味着，一些懵懂的开发人员（多是你）不能在组件内去做一些很愚昧的事变, 而且损坏统统.

JavaScript 代码:
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等等也都是以”$”开首。

虽然属性名上增加前缀不是必需的，然则如许做能够提示懵懂的开发人员（多是你），这是一个大众API属性或要领，迎接你运用，不像其他属性的实例，能够只是为了 Vue 的内部运用。

作为基于原型的言语，Javascript 中没有（真正的）类，因而也没有 “私有” 和 “大众” 变量或 “静态” 要领。 这个通例是一种很好的替代品，我们认为是值得恪守的商定。

this

你还会注意到，你能够运用 this.libraryName 来运用这个库 ，然则如许做会有个小小的题目，由于它如今是一个实例要领。

但是，如许做的结果是，与全局变量差别，您在运用库时必需确保处于准确的作用域中。内部的回调要领不能经由过程 this 来接见你的库。

幸亏，ES6中的箭头函数是一个不错的解决方案, 它能确保你在准确的作用域中:

JavaScript 代码:
// script.js
this.$http.get('/').then(res => {
  if (res.status !== 200) {
    this.$http.get('/') // etc
    // 只在箭头回调函数中起作用。愚人船埠注：你也能够运用ES5 的 bind();
  }
});

为何不使它成为一个插件？

假如您打算在多个 Vue 项目中运用 JavaScript 第三方库，或许您想与天下分享你的库，您能够将其构建成插件！

插件提取复杂性的部份，许可你在项目中简朴地实行以下操纵来增加你挑选的库：

JavaScript 代码:
// script.js
import MyLibraryPlugin from 'my-library-plugin';
Vue.use(MyLibraryPlugin);

运用这两行，我们能够在任何组件中运用 JavaScript 第三方库，就像我们能够运用 Vue Router ，Vuex 和其他运用 Vue.use 的插件一样。

编写一个插件
起首，为您的插件建立一个文件。在这个例子中，我将建立一个插件，将 Axios 增加到你统统的 Vue 实例和组件中，因而我将挪用文件 axios.js。

要相识的主要内容是：插件必需公然一个 install 要领，而且将 Vue 组织函数作为第一个参数：

JavaScript 代码:
// axios.js
export default {
  install: function(Vue) {
    // Do stuff
  }
}

如今我们能够运用之前引见的要领将库增加到原型对象中:

JavaScript 代码:
// axios.js
import axios from 'axios';
export default {
  install: function(Vue,) {
    Object.defineProperty(Vue.prototype, '$http', { value: axios });
  }
}

我们如今须要做的事变是 use 实例要领将我们的库增加到一个项目。比方，我们如今能够轻松地增加 Axios 库：

JavaScript 代码:
// 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 已运用了这个名字，所以让我们运用一个可选参数来让它们变成你所喜好的要领名：

JavaScript 代码:
// axios.js
import axios from 'axios';
export default {
  install: function(Vue, name = '$http') {
    Object.defineProperty(Vue.prototype, name, { value: axios });
  }
}
JavaScript 代码:
// entry.js
import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin, '$axios');
new Vue({
  created() {
    console.log(this.$axios ? 'Axios works!' : 'Uh oh..');
  }
})
    原文作者：瘦猪
    原文地址: https://segmentfault.com/a/1190000015848611
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞