在諸多 Vue.js 應(yīng)用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 庫. 但隨著項目越來越復(fù)雜, 可能會采取組件化和模塊化的方式來組織代碼, 還可能要使應(yīng)用支持不同環(huán)境下的服務(wù)端渲染. 除非你找到了一個簡單而又健壯的方式來引入這些庫供不同的組件和模塊使用, 不然, 這些第三方庫的管理會給你帶來一些麻煩.
本文將介紹一些在 Vue.js 中使用第三方庫的方式.
全局變量
在項目中添加第三方庫的最簡單方式是講其作為一個全局變量, 掛載到?window?對象上:
entry.js
window._ = require('lodash');
MyComponent.vue
export default {
? created() {
? ? console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
? }
}
這種方式不適合于服務(wù)端渲染, 因為服務(wù)端沒有?window?對象, 是?undefined, 當試圖去訪問屬性時會報錯.
在每個文件中引入
另一個簡單的方式是在每一個需要該庫的文件中導(dǎo)入:
MyComponent.vue
import _ from 'lodash';
export default {
? created() {
? ? console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
? }
}
這種方式是允許的, 但是比較繁瑣, 并且?guī)淼膯栴}是: 你必須記住在哪些文件引用了該庫, 如果項目不再依賴這個庫時, 得去找到每一個引用該庫的文件并刪除該庫的引用. 如果構(gòu)建工具沒設(shè)置正確, 可能導(dǎo)致該庫的多份拷貝被引用.
優(yōu)雅的方式
在 Vuejs 項目中使用 JavaScript 庫的一個優(yōu)雅方式是講其代理到 Vue 的原型對象上去. 按照這種方式, 我們引入?Moment?庫:
entry.js
import moment from 'moment';
Object.defineProperty(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
一般而言, 可以按照下面的方式來給對象設(shè)置屬性:
Vue.prototype.$moment = moment;
可以這樣做, 但是?Object.defineProperty?允許我們通過一個?descriptor?來定義屬性. Descriptor 運行我們?nèi)ピO(shè)置對象屬性的一些底層(low-level)細節(jié), 如是否允許屬性可寫? 是否允許屬性在?for?循環(huán)中被遍歷.
通常, 我們不會為此感到困擾, 因為大部分時候, 對于屬性賦值, 我們不需要考慮這樣的細節(jié). 但這有一個明顯的優(yōu)點:?通過 descriptor 創(chuàng)建的屬性默認是只讀的.
這就意味著, 一些處于迷糊狀態(tài)的(coffee-deprived)開發(fā)者不能在組件內(nèi)去做一些很愚蠢的事情, 就像這樣:
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?的屬性和方式, 它們也有這個前綴.
這個不是強制要求, 給屬性添加?$?前綴是提供那些處于迷糊狀態(tài)(coffee-deprived)的開發(fā)者這是一個公開的 API, 和 Vuejs 的一些內(nèi)部屬性和方法區(qū)分開來.
this
你還可能注意到, 在組件內(nèi)是通過?this.libraryName?的方式來使用第三方庫的, 當你知道它是一個實例方法時就不會感到意外了. 但與全局變量不同, 通過?this?來使用第三方庫時, 必須確保?this?處于正確的作用域. 在回調(diào)方法中?this?的作用域會有不同, 但箭頭式回調(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.
? }
});
插件
如果你想在多個項目中使用同一個庫, 或者想將其分享給其他人, 可以將其寫成一個插件:
import MyLibraryPlugin from 'my-library-plugin';
Vue.use(MyLibraryPlugin);
在應(yīng)用的入口引入插件之后, 就可以在任何一個組件內(nèi)像使用?Vue Router,?Vuex?一樣使用你定義的庫了.
寫一個插件
首先, 創(chuàng)建一個文件用于編寫自己的插件. 在示例中, 我會將?Axios?作為插件添加到項目中, 因而我給文件起名為?axios.js. 其次, 插件要對外暴露一個?install?方法, 該方法的第一個參數(shù)是?Vue?的構(gòu)造函數(shù):
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..');
? }
})
彩蛋: 插件的可選參數(shù)
插件的?install?方法可以接受可選參數(shù). 一些開發(fā)可能不喜歡將?Axios?實例命名為?$http, 因為這是 Vue Resource 提供的一個通用名字. 因而可以提供一個可選的參數(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..');
? }
})
原文鏈接：如何在 Vue.js 中使用第三方庫
