在諸多 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)開發者不能在組件內去做一些很愚蠢的事情, 就像這樣: