前言

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

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

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

我們需要知道以下幾個(gè)知識(shí)點(diǎn)：

• 怎么設(shè)置全局屬性；
• 怎么引用全局屬性；

一、設(shè)置全局屬性

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

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

下面，我將重點(diǎn)講一下原型。

二、引用全局屬性

在使用Vue時(shí)，我們都要寫(xiě)這么一串代碼：

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

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

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

首先，我們需要了解以下知識(shí)點(diǎn)：

什么是原型？

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

那什么是原型對(duì)象呢？

了解“原型對(duì)象”，我們需要把“原型”和“對(duì)象”拆開(kāi)來(lái)說(shuō)明。

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

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

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

當(dāng)然，我們也可以設(shè)置自定義對(duì)象，也就是自己設(shè)置一個(gè)新的對(duì)象。

const obj = {};

以上代碼就是設(shè)置了一個(gè)空對(duì)象。

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

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

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

那就是原型的訪問(wèn)工具 prototype 和 __proto__。

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

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

下面我們來(lái)看看arr 和 obj 的原型

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

__proto__與prototype的區(qū)別

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

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

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

基于以上兩點(diǎn)可得出下圖：

以上就是prototype 和 __proto__的關(guān)系了。

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

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

至此，我們具備一下幾點(diǎn)：

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

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

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

在main.js中注冊(cè)全局共用方法：

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

引用全局共用方法

全局共用方法可以通過(guò)兩種手段來(lái)使用：

• vue實(shí)例化對(duì)象的作用域—— this
• main.js 注冊(cè)全局共用方法后的 Vue.prototype

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

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

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

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

但是呢！當(dāng)全局公共方法有很多時(shí)，我們就得需要寫(xiě)很多個(gè)Vue.prototype 。

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

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

創(chuàng)建commonApi.js

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

在main.js 進(jìn)行配置：

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

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

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

總結(jié)

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

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

最新評(píng)論