Vue.use源码学习小结
由于最近在做一些前端的项目,并且接手了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 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ESP8266和ESP32配置(需使用ROS1和ROS2)
- SpringBoot+Gradle+ MyBatisPlus3.x搭建企业级的后台分离框架
- frp 内网穿透远程桌面(Windows 10)配置
- 你来讲讲AQS是什么吧?都是怎么用的?
- Angular单元测试里pipe的mock设计
- 亿级数据判断 bitmap-布隆过滤器
- centOS8 安装MySQL8(亲测)
- 聊一聊微信小程序包内容
- 全面分析 MySQL并发控制
- Flink History Server
- 几种定时任务(Timer、TimerTask、ScheduledFuture)的退出—结合真实案例【JAVA并发】
- gitlab内存消耗大,频繁出现502错误的解决办法
- Java基于POI实现excel任意多级联动下拉列表——支持从数据库查询出多级数据后直接生成【附源码】
- Elasticsearch 通过Scroll遍历索引,构造pandas dataframe 【Python多进程实现】
- 【Java】 NullPointerException、ArrayIndexOutOfBoundsException、ClassCastException、ArrayIndexOutOfBoundsE