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 相关文章推荐
jQuery实现的五子棋游戏实例
Jun 13 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 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
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
降消项目实施方案
2014/03/30 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
三严三实学习心得体会
2014/10/13 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang