在 Vue.js 中使用任意 JavaScript 第三方庫

SexySix 發布于2019-08-23 10:35 / 2920人閱讀

摘要：一個更好的方式在項目中使用庫的最干凈，最健壯的方法是將其代理為原型對象的屬性。然而，這樣做的結果是，與全局變量不同，您在使用庫時必須確保處于正確的作用域中。

如何在 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..");
  }
})

云服務器 GPU云服務器 php中使用javascript 在php中使用組件在VBScript中使用類 webrtc在webview中使用問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96481.html

后端開發者的Vue學習之路（一）

摘要：如果我們作為一個后端開發者想掌握一個前端框架，是一個好選擇，因為它足夠的易學。是語言的下一代標準。數據方法生命周期鉤子函數其他有些內容比較重要，留到后面講定義數據定義數據定義了數據，那么就可以在管理的區域中使用的獲取數據的語法來獲取數據。目錄前言： iview組件庫示例 element組件庫示例 ...

番茄西紅柿 2019-04-23 11:52 評論0 收藏0
第三方庫

摘要：微信支付，支付寶支付，銀聯支付三大支付總結支付寶植入總結支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程強大輕量的動畫庫 anime.js 入門教程來自B站的開源的MagicaSakura源...

seanHai 2019-08-22 13:58 評論0 收藏0
第三方庫

摘要：微信支付，支付寶支付，銀聯支付三大支付總結支付寶植入總結支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程強大輕量的動畫庫 anime.js 入門教程來自B站的開源的MagicaSakura源...

gityuan 2019-08-29 14:17 評論0 收藏0
vue開發看這篇文章就夠了

摘要：注意此處獲取的數據是更新后的數據，但是獲取頁面中的元素是更新之前的鉤子函數說明組件已經更新，所以你現在可以執行依賴于的操作。鉤子函數說明實例銷毀 Vue -漸進式JavaScript框架介紹 vue 中文網 vue github Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架庫和框架的區別我們所說的前端框架與庫的區別？ Library 庫，本質上是一...

fsmStudy 2019-08-21 18:37 評論0 收藏0
用WijmoJS玩轉您的Web應用 —— Vue.js

摘要：相反，我們將專注于將添加到用編寫的簡單應用程序中。使用創建應用程序。示例應用程序有兩個組件應用程序和。除在全球率先支持外，現已全面應用于等主流框架中。 showImg(https://segmentfault.com/img/bVbcvaQ?w=500&h=278); 概述在本文中，我們將展示如何將WijmoJS與NPM和Webpack一起使用來創建最流行的基于JavaScript應...

OnlyMyRailgun 2019-08-22 18:09 評論0 收藏0