如何在 Vue.js 中使用第三方庫
在諸多 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
importmomentfrom '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
一般而言, 可以按照下面的方式來給對象設置屬性:
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.
}
});
插件
如果你想在多個項目中使用同一個庫, 或者想將其分享給其他人, 可以將其寫成一個插件:
importMyLibraryPluginfrom '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
importaxiosfrom 'axios';
export default {
install: function(Vue,) {
Object.defineProperty(Vue.prototype, '$http', { value: axios });
}
}
最后, 利用 Vue 的實例方法 use 將插件添加到項目中:
entry.js
importAxiosPluginfrom './axios.js';
Vue.use(AxiosPlugin);
new Vue({
created() {
console.log(this.$http ? 'Axios works!' : 'Uh oh..');
}
})
彩蛋: 插件的可選參數
插件的 install 方法可以接受可選參數. 一些開發可能不喜歡將 Axios 實例命名為 $http, 因為這是 Vue Resource 提供的一個通用名字. 因而可以提供一個可選的參數允許他們隨意命名:
axions.js
importaxiosfrom 'axios';
export default {
install: function(Vue, name = '$http') {
Object.defineProperty(Vue.prototype, name, { value: axios });
}
}
entry.js
importAxiosPluginfrom './axios.js';
Vue.use(AxiosPlugin, '$axios');
new Vue({
created() {
console.log(this.$axios ? 'Axios works!' : 'Uh oh..');
}
})
參考
Use Any Javascript Library With Vue.js
來自：http://web.jobbole.com/91153/