Vue.use源码学习小结


Posted in Javascript onJune 20, 2018

由于最近在做一些前端的项目,并且接手了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打包之后所有的代码都是封闭的,无法互相调用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
Cookie 小记
Apr 01 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
Javascript 命名空间模式
Nov 01 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 Javascript
Vuex入门到上手教程
Jun 20 #Javascript
JavaScript 中的 this 工作原理
Jun 20 #Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 #Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 #Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 #Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 #Javascript
JS中call和apply函数用法实例分析
Jun 20 #Javascript
You might like
用header 发送cookie的php代码
2007/03/16 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
PHP对象相关知识总结
2017/04/09 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
jQuery 阴影插件代码分享
2012/01/09 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
JQuery球队选择实例
2015/05/18 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
python之wxPython应用实例
2014/09/28 Python
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
计算机求职信
2013/12/01 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
实习计划书范文
2015/01/16 职场文书
暑假安全保证书
2015/02/28 职场文书
退休教师追悼词
2015/06/23 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers