在諸多 Vue.js 應(yīng)用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 庫(kù). 但隨著項(xiàng)目越來(lái)越復(fù)雜, 可能會(huì)采取組件化和模塊化的方式來(lái)組織代碼, 還可能要使應(yīng)用支持不同環(huán)境下的服務(wù)端渲染. 除非你找到了一個(gè)簡(jiǎn)單而又健壯的方式來(lái)引入這些庫(kù)供不同的組件和模塊使用, 不然, 這些第三方庫(kù)的管理會(huì)給你帶來(lái)一些麻煩.

本文將介紹一些在 Vue.js 中使用第三方庫(kù)的方式.

全局變量

在項(xiàng)目中添加第三方庫(kù)的最簡(jiǎn)單方式是講其作為一個(gè)全局變量, 掛載到 window 對(duì)象上:

entry.js

window._ = require('lodash');

MyComponent.vue

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

這種方式不適合于服務(wù)端渲染, 因?yàn)榉?wù)端沒(méi)有 window 對(duì)象, 是 undefined , 當(dāng)試圖去訪問(wèn)屬性時(shí)會(huì)報(bào)錯(cuò).

在每個(gè)文件中引入

另一個(gè)簡(jiǎn)單的方式是在每一個(gè)需要該庫(kù)的文件中導(dǎo)入:

MyComponent.vue

import _ from 'lodash';

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

這種方式是允許的, 但是比較繁瑣, 并且?guī)?lái)的問(wèn)題是: 你必須記住在哪些文件引用了該庫(kù), 如果項(xiàng)目不再依賴這個(gè)庫(kù)時(shí), 得去找到每一個(gè)引用該庫(kù)的文件并刪除該庫(kù)的引用. 如果構(gòu)建工具沒(méi)設(shè)置正確, 可能導(dǎo)致該庫(kù)的多份拷貝被引用.

優(yōu)雅的方式

在 Vuejs 項(xiàng)目中使用 JavaScript 庫(kù)的一個(gè)優(yōu)雅方式是講其代理到 Vue 的原型對(duì)象上去. 按照這種方式, 我們引入 Moment 庫(kù):

entry.js

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

由于所有的組件都會(huì)從 Vue 的原型對(duì)象上繼承它們的方法, 因此在所有組件/實(shí)例中都可以通過(guò) this.$moment: 的方式訪問(wèn) Moment 而不需要定義全局變量或者手動(dòng)的引入.

MyNewComponent.vue

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

接下來(lái)就了解下這種方式的工作原理.

Object.defineProperty

一般而言, 可以按照下面的方式來(lái)給對(duì)象設(shè)置屬性:

Vue.prototype.$moment = moment;

可以這樣做, 但是 Object.defineProperty 允許我們通過(guò)一個(gè) descriptor 來(lái)定義屬性. Descriptor 運(yùn)行我們?nèi)ピO(shè)置對(duì)象屬性的一些底層(low-level)細(xì)節(jié), 如是否允許屬性可寫(xiě)? 是否允許屬性在 for 循環(huán)中被遍歷.

通常, 我們不會(huì)為此感到困擾, 因?yàn)榇蟛糠謺r(shí)候, 對(duì)于屬性賦值, 我們不需要考慮這樣的細(xì)節(jié). 但這有一個(gè)明顯的優(yōu)點(diǎn): 通過(guò) descriptor 創(chuàng)建的屬性默認(rèn)是只讀的 .

這就意味著, 一些處于迷糊狀態(tài)的(coffee-deprived)開(kāi)發(fā)者不能在組件內(nèi)去做一些很愚蠢的事情, 就像這樣:

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

此外, 試圖給只讀實(shí)例的方法重新賦值會(huì)得到 TypeError: Cannot assign to read only property 的錯(cuò)誤.

$

你可能會(huì)注意到, 代理第三庫(kù)的屬性會(huì)有一個(gè) $ 前綴, 也可能看到其它類似 $refs, $on, $mount 的屬性和方式, 它們也有這個(gè)前綴.

這個(gè)不是強(qiáng)制要求, 給屬性添加 $ 前綴是提供那些處于迷糊狀態(tài)(coffee-deprived)的開(kāi)發(fā)者這是一個(gè)公開(kāi)的 API, 和 Vuejs 的一些內(nèi)部屬性和方法區(qū)分開(kāi)來(lái).

this

你還可能注意到, 在組件內(nèi)是通過(guò) this.libraryName 的方式來(lái)使用第三方庫(kù)的, 當(dāng)你知道它是一個(gè)實(shí)例方法時(shí)就不會(huì)感到意外了. 但與全局變量不同, 通過(guò) this 來(lái)使用第三方庫(kù)時(shí), 必須確保 this 處于正確的作用域. 在回調(diào)方法中 this 的作用域會(huì)有不同, 但箭頭式回調(diào)風(fēng)格能保證 this 的作用域是正確的:

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

插件

如果你想在多個(gè)項(xiàng)目中使用同一個(gè)庫(kù), 或者想將其分享給其他人, 可以將其寫(xiě)成一個(gè)插件:

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

在應(yīng)用的入口引入插件之后, 就可以在任何一個(gè)組件內(nèi)像使用 Vue Router , Vuex 一樣使用你定義的庫(kù)了.

寫(xiě)一個(gè)插件

首先, 創(chuàng)建一個(gè)文件用于編寫(xiě)自己的插件. 在示例中, 我會(huì)將 Axios 作為插件添加到項(xiàng)目中, 因而我給文件起名為 axios.js . 其次, 插件要對(duì)外暴露一個(gè) install 方法, 該方法的第一個(gè)參數(shù)是 Vue 的構(gòu)造函數(shù):

axios.js

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

可以使用先前將庫(kù)添加到原型對(duì)象上的方法:

axios.js

import axios from 'axios';

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

最后, 利用 Vue 的實(shí)例方法 use 將插件添加到項(xiàng)目中:

entry.js

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

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

彩蛋: 插件的可選參數(shù)

插件的 install 方法可以接受可選參數(shù). 一些開(kāi)發(fā)可能不喜歡將 Axios 實(shí)例命名為 $http , 因?yàn)檫@是 Vue Resource 提供的一個(gè)通用名字. 因而可以提供一個(gè)可選的參數(shù)允許他們隨意命名:

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..');
 }
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論