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 相关文章推荐
lib.utf.js
Aug 21 Javascript
javascript parseInt 大改造
Sep 27 Javascript
jquery validator 插件增加日期比较方法
Feb 21 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
react的hooks的用法详解
Oct 12 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
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
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
Js的MessageBox
2006/12/03 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
Python中optparse模块使用浅析
2015/01/01 Python
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
python中实现k-means聚类算法详解
2017/11/11 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
python得到电脑的开机时间方法
2018/10/15 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
政法学院毕业生求职信
2014/02/28 职场文书
解放思想演讲稿
2014/09/11 职场文书
2014年团总支工作总结
2014/11/21 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
货款欠条范本
2015/07/03 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
深入理解python协程
2021/06/15 Python