90

Vue.use源码学习

 6 years ago
source link: http://zjutkz.net/2018/06/19/Vue-use源码学习/?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

由于最近在做一些前端的项目，并且接手了Weex的项目，所以难免和Vue打起了交道，js也是从入门到学习中。项目里用到了Vue的插件机制，所以看了看Vue.use的源码，还是比较简单的，适合新手阅读，所以记录下来以免遗忘。

感谢

本文最后一章节[结合实际场景]是参考了 eros 这个开源项目的，感谢eros项目组的开发。

什么是Vue插件

关于什么是Vue插件大家可以去看 官网的解释 ，总得来说就是提供一个全局注册/调用的能力。

怎么用

我们以Weex为例。

首先有一个toast.js

const Toast = {}
Toast.install = (Vue, options) => {
    Vue.prototype.$toast = (msg, duration = 0.8) => {
        const modal = weex.requireModule('modal')
        modal.toast({
            message: msg,
            duration: 0.8
        })
    }
}
Vue.use(Toast)

很简单，就是定义了一个Toast对面，然后给Toast对象创建一个install方法，方法里给Vue的prototype创建了一个$toast方法，该方法就是调用modal去弹一个toast，最后使用Vue.use方法去注册这个Toast插件。

然后我们还有一个index.vue：

<template>
	<div>
		<div class="box" @click="onclick" @longpress="onlongpress" @appear="onappear"  @disappear="ondisappear"></div>
    </div>
</template>

<script>
	const modal = weex.requireModule('modal')

	export default {
    	methods: {
        	onclick (event) {
            	this.$toast("aaa", 0.8)
        	},
        	onlongpress (event) {
            	console.log('onlongpress:', event)
            	modal.toast({
                	message: 'onlongpress',
                	duration: 0.8
            	})
        	},
        	onappear (event) {
            	console.log('onappear:', event)
            	modal.toast({
                	message: 'onappear',
                    duration: 0.8
                })
            },
            ondisappear (event) {
                console.log('ondisappear:', event)
                modal.toast({
                    message: 'ondisappear',
                    duration: 0.8
                })
            }
    	}
	}
</script>

<style scoped>
.box {
    border-width: 2px;
    border-style: solid;
    border-color: #BBB;
    width: 250px;
    height: 250px;
    margin-top: 250px;
    margin-left: 250px;
    background-color: #EEE;
}
</style>

在其中调用了this.$toast去使用插件的方法。

由此我们可以知道，Vue的插件机制就是通过Vue.use方法去注册的。

源码分析 

Vue.use = function (plugin) {
    if (plugin.installed) {
        return
    }
    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
};

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
}

use方法非常简单：

0x01：判断该插件是否已经注册，如果已经注册就直接return，防止重复注册。

0x02：然后通过toArray方法将Arguments这个类数组转换成真正的数据，并且去掉第一个元素。

0x03：将this，也就是Vue实例添加到toArray生成的args数组中。

0x04：判断use的入参plugin是install是否是一个方法，如果是则直接调用该方法。

0x05：如果第四步是false，则判断plugun本身是不是一个方法，如果是方法，则用它本身代替install去执行。

0x06：将plugin的installed标记位设置为true。

就这么简单的6步，use方法就分析完了，其实就是为了去执行插件的install方法，而结合上面的例子我们知道，install中就把$toast赋值给了Vue的prototype，在其他地方就可以使用的。

结合实际场景

学习了Vue的插件机制，那么这个机制我们能用来做什么呢？我们结合Weex来看。

首先我们知道，Weex是把bundle下发到客户端并渲染，所以一个页面的加载时间取决于两部分：bundle下载时间，bundle渲染时间。在不考虑本地缓存的情况下，bundle的大小直接决定了它的下载时间，以及用户所消耗的流量，所以我们需要有一种方式去尽可能的减小这个bundle的体积。这里Vue的插件机制就可以排上用场了。

首先我们把一部分共用，不太会改动的基础的代码放在客户端，这样bundle里的内容就应该是纯业务相关的代码，在把bundle下载下来之后手动将客户端的基础js拼接到bundle上，这样就能有效地减小bundle的体积，而想要使用这种方式，就必须把基础js通过Vue的插件机制注册，业务js中全局调用，不然是无法拼接的(除非你的基础js不通过webpack打包)，毕竟webpack打包之后所有的代码都是封闭的，无法互相调用。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK