前言

在開發(fā)中，為了提高重用性，簡潔代碼，往往需要把代碼的公共部分提取出來，形成一個可復用的模塊。

當代碼提取出來形成模塊后，要實現(xiàn)所有地方都可以引用，就需要把這些模塊設置成全局屬性。

所以，要實現(xiàn)全局公共方法

我們需要知道以下幾個知識點：

• 怎么設置全局屬性；
• 怎么引用全局屬性；

一、設置全局屬性

全局屬性可以分為：全局變量和全局方法。

實現(xiàn)全局變量，常用的手段就是使用vuex （關于vuex 的使用方法這里不詳細說明了），還有一種方法就是借助原型屬性來實現(xiàn)。

下面，我將重點講一下原型。

二、引用全局屬性

在使用Vue時，我們都要寫這么一串代碼：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

上面代碼是借助Vue構(gòu)造函數(shù)創(chuàng)建一個Vue對象。

從這可以看出，Vue其實是一個對象。那么我們就可以借助Vue的原型實現(xiàn)對全局屬性的引用。

首先，我們需要了解以下知識點：

什么是原型？

在js 代碼中，我們經(jīng)常會看到一個屬性prototype 。他是構(gòu)造函數(shù)（就是用來構(gòu)造對象的函數(shù)）的屬性，用于指向原型對象。

那什么是原型對象呢？

了解“原型對象”，我們需要把“原型”和“對象”拆開來說明。

先說對象，js 的內(nèi)建對象有很多，例如：String 、Math 、Object 、Array 等等。

// 聲明一個數(shù)組對象
const arr = Array();

以上是使用內(nèi)建對象——數(shù)組的構(gòu)造函數(shù)，創(chuàng)建一個數(shù)組。

當然，我們也可以設置自定義對象，也就是自己設置一個新的對象。

const obj = {};

以上代碼就是設置了一個空對象。

那內(nèi)建對象和自定義對象有什么區(qū)別呢？

內(nèi)建對象和自定義對象的區(qū)別，就是內(nèi)建對象自帶了一些屬性和方法。就如上面聲明的數(shù)組對象。我們可以通過arr.length 屬性來獲數(shù)組的長度，或者可以通過arr.push() 方法來向數(shù)組新增一個元素。而自定義對象就沒有這些屬性和方法。這時，我們就會很疑惑，為什么同樣是對象，兩者的區(qū)別就這么大的區(qū)別呢？難到是上帝不公，創(chuàng)造的時候給了不同的待遇？

嘿！還別說，就是上帝（js源碼）創(chuàng)造的時候設定的，但是他并不是不公，而是為了分工合作。但是，上帝還是為了廣大民眾著想留了后門——把他創(chuàng)造的工具留了下來。

那就是原型的訪問工具 prototype 和 __proto__。

其實，內(nèi)建元素跟自定義元素的區(qū)別就是在于原型的不同（沒錯，自定義元素也是有原型的，只是這個原型是Object 內(nèi)建對象的原型）。

直觀的說，原型是預先設定好的對象（可以說是我們創(chuàng)建的對象的祖先啦?。锩骖A設了各種各樣的方法。

下面我們來看看arr 和 obj 的原型

上圖的__proto__對象就是原型對象了。__proto__屬性是一個指針（地址），指向了原型。原型原型，原本的形狀。原型是一類對象的初始。所以不同的類型對象有著不同的原型。

__proto__與prototype的區(qū)別

到這里，可能大家就有點懵了。怎么又出現(xiàn)了prototype？不是__proto__嗎？別急，現(xiàn)在就捋捋兩者的關系。

首先，__proto__是對象的屬性，指向?qū)ο蟮臉?gòu)造函數(shù)的原型。而prototype是函數(shù)的屬性，指向它的原型。

其次，對象都是由函數(shù)（也就是構(gòu)造函數(shù)）生成的。（這一點非常重要。要理解原型就要理解這句話，如果不理解就把它當做定理。）

基于以上兩點可得出下圖：

以上就是prototype 和 __proto__的關系了。

三、全局共用方法添加與引用

借助原型實現(xiàn)全局共用方法的添加

至此，我們具備一下幾點：

有訪問的工具–prototype和 __proto__；原型是個對象，意味著我們可以對原型進行屬性的增刪改查;基于同一原型生成的對象，所有的對象的原型都是同一個。

那么，只要修改原型，所有基于同一原型生成的對象的原型都同步改變;

基于以上三點，只要我們在Vue實例化前借助prototype把全局公共方法掛載到原型上，就能讓公共方法實現(xiàn)全局訪問。

在main.js中注冊全局共用方法：

Vue.prototype.fn = function(){
  console.log("全局公共方法")
};
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

引用全局共用方法

全局共用方法可以通過兩種手段來使用：

• vue實例化對象的作用域—— this
• main.js 注冊全局共用方法后的 Vue.prototype

在組件中或者生命周期中直接通過this.fn()調(diào)用即可。

如果是通過Vue.prototype.fn()來調(diào)用，必須保證調(diào)用處的代碼在全局公共方法注冊代碼后面執(zhí)行。

四、全局公共方法優(yōu)化

雖然我們已經(jīng)知道將方法掛載在Vue.prototype 就可以實現(xiàn)全局公共方法。

但是呢！當全局公共方法有很多時，我們就得需要寫很多個Vue.prototype 。

這顯然是不符合代碼美觀的。Vue.prototype 掛一個方法也是掛，掛一個對象也是掛。

那為什么我們不把所有的全局方法寫在同一個js 文件中呢？

創(chuàng)建commonApi.js

function fn1(){
  console.log("全局方法一")
}
function fn2(){
  console.log("全局方法二")
}
function fn3(){
  console.log("全局方法三")
}
function fn4(){
  console.log("全局方法四")
}
// 將四個全局公共方法，組合成一個對象，并暴露出去
export default {
  fn1,
  fn2,
  fn3,
  fn4,
}

在main.js 進行配置：

import commonApi from './store/commonApi'
Vue.prototype.commonApi = commonApi;

組件內(nèi)通過this引用：

text(){
  this.commonApi.fn1();
}

總結(jié)

以上就是新建全局公用的方法了。

這些僅為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論