欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.use源碼分析

 更新時(shí)間:2017年04月22日 16:41:47   作者:瓜子  
這篇文章主要為大家詳細(xì)介紹了Vue.use源碼,Vue.use方法的引入,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

我想有過(guò)vue開(kāi)發(fā)經(jīng)驗(yàn)的,對(duì)于vue.use并不陌生。當(dāng)使用vue-resource或vue-router等全局組件時(shí),必須通過(guò)Vue.use方法引入,才起作用。那么vue.use在組件引入之前到底做了那些事情呢?讓我們一窺究竟。

先上vue.use源碼

// javascript的方法是可以傳遞的,哈哈
Vue.use = function (plugin) {
  /* istanbul ignore if */
  if (plugin.installed) {
   return
  }
  // additional parameters
  var args = toArray(arguments, 1);
  args.unshift(this);
  if (typeof plugin.install === 'function') {
   plugin.install.apply(plugin, args);
  } else if (typeof plugin === 'function') {
   plugin.apply(null, args);
  }
  plugin.installed = true;
  return this
 };

假設(shè)我們通過(guò)Vue.use引入一個(gè)插件plugin(該插件可以暫時(shí)理解為一個(gè)變量或參數(shù)),即Vue.use(plugin); 

首先判斷傳入的參數(shù)plugin的屬性installed是否存在,如果存在且邏輯值為真,那么直接返回,后邊的代碼就不會(huì)再執(zhí)行,這個(gè)判斷的作用是什么呢?后邊會(huì)講到。 

我們先假設(shè)plugin的屬性installed不存在或?yàn)榧?,那么繼續(xù)往下執(zhí)行。

var args = toArray(arguments, 1);

//執(zhí)行了一個(gè)toArray方法,toArray接收了兩個(gè)參數(shù),arguments為Vue.use方法傳入的參數(shù)集合,例如Vue.use(a,b,c),那么arguments類似于[a,b,c](說(shuō)明:arguments只是類數(shù)組,并不是真正的數(shù)組)。此處因?yàn)橹灰胍粋€(gè)參數(shù)plugin,所以arguments類似于[plugin]。

toArray的作用是什么呢?看源碼。

function toArray (list, start){
 start = start || 0;
 var i = list.length - start;
 var ret = new Array(i);
 while (i--) {
 ret[i] = list[i + start];
 }
 return ret
}

當(dāng)執(zhí)行toArray(arguments,1),會(huì)生成一個(gè)新數(shù)組ret,長(zhǎng)度 = arguments.length-1,然后進(jìn)行while循環(huán),依次倒序把a(bǔ)rguments的元素賦值給ret,因?yàn)閞et比arguments長(zhǎng)度少1,所以最終等同于arguments把除了第一個(gè)元素外的其余元素賦值給ret。toArray主要作用就是把類數(shù)組轉(zhuǎn)化為真正的數(shù)組,這樣才能調(diào)用數(shù)組的方法。因?yàn)榇颂幬抑灰胍粋€(gè)plugin參數(shù),即arguments=[plugin],所以toArray返回為空數(shù)組[]。

接著往下執(zhí)行,args.unshift(this),等同于[].unshift(Vue),即args = [Vue];然后執(zhí)行

if (typeof plugin.install === 'function') {
  plugin.install.apply(plugin, args);
 } else if (typeof plugin === 'function') {
  plugin.apply(null, args);
 }

此處判斷plugin的install是否為函數(shù),如果為函數(shù),立即執(zhí)行pluign.install方法,install方法傳入的參數(shù)為args內(nèi)數(shù)組元素,即install接受的第一個(gè)參數(shù)為Vue.

如果plugin的install不是函數(shù),那么判斷plugin本身是否為函數(shù),如果為函數(shù),那么執(zhí)行plugin函數(shù),且參數(shù)為args內(nèi)數(shù)組元素。

最后設(shè)置plugin.installed為true。設(shè)置plugin.installed為true的作用是避免同一個(gè)插件多次執(zhí)行安裝,比如Vue.use(plugin)執(zhí)行一次之后,installed為true,再次執(zhí)行的話走到第一步判斷就返回了。

綜上所述,Vue.use的作用其實(shí)就是執(zhí)行一個(gè)plugin函數(shù)或者執(zhí)行pluign的install方法進(jìn)行插件注冊(cè),并且向plugin或其install方法傳入Vue對(duì)象作為第一個(gè)參數(shù),use的其他參數(shù)作為plugin或install的其他參數(shù)。

舉個(gè)簡(jiǎn)單的例子

 import Vue from 'vue'

function test(a){
 console.log(a);//Vue
}

function test1(a,b){
  console.log(a,b);//Vue hello
}

let oTest = {
 install:function(a,b){
  console.log(a,b);//Vue hello1
 }
}

Vue.use(test);
Vue.use(test1,'hello');
Vue.use(oTest,'hello1');
console.log(oTest);
//{
  install:function(){...},
  installed:true
}

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論