function toArray (list, start) {
start = start || 0;
var i = list.length - start;
var ret = new Array(i);
// 循环去除 前start元素
while (i--) {
ret[i] = list[i + start];
}
return ret
}
const vm = new Vue({
data: { foo: 10 },
rules: {
foo: {
validate: value => value > 1,
message: 'foo must be greater than one'
}
}
})
vm.foo = 0 // 输出 foo must be greater than one
Vue进阶系列汇总如下,欢迎阅读,欢迎加群讨论(文末)。
Vue 进阶系列(一)之响应式原理及实现
Vue 进阶系列(二)之插件原理及实现
使用方法
插件的详细使用方法详情看Vue官网
概括出来就是
Vue.use(MyPlugin)
使用,本质上是调用MyPlugin.install(Vue)
new Vue()
启动应用之前完成,实例化之前就要配置好。Vue.use
多次注册相同插件,那只会注册成功一次。源码解读
Vue.use
源码如下Vue.use
接受一个对象参数plugin
,首先判断是否已注册,如果多次注册相同插件那么只会注册成功一次,在注册成功后设置plugin.installed = true
。然后执行
toArray(arguments, 1)
方法,arguments
是一个表示所有参数的类数组对象,需要转换成数组之后才能使用数组的方法。上面进行了一次转换,假设
list
是[1, 2, 3, 4],start
是1,首先创建一个包含3个元素的数组,依次执行ret[2] = list[ 2 + 1]
、ret[1] = list[ 1 + 1]
、ret[0] = list[ 0 + 1]
,实际上就是去除arguments
的第一个参数然后把剩余的类数组赋值给新的数组,其实就是去除plugin
参数,因为调用plugin.install
的时候不需要这个参数。还可以通过如下几种方式实现类数组转换成数组,但是使用slice会阻止某些JavaScript引擎中的优化(参考自MDN)。
转换成数组之后调用
args.unshift(this)
,把Vue
对象添加到args的第一个参数中,这样就可以在调用plugin.install
方法的时候把Vue
对象传递过去。实例:实现一个插件
要求创建一个告诉Vue组件处理自定义
rules
规则选项的插件,这个rules
需要一个对象,该对象指定组件中的数据的验证规则。示例:
第一步先不考虑插件,在已有的
Vue
API中是没有rules
这个公共方法的,如果要简单实现的话可以通过钩子函数来,即在created
里面验证逻辑。可以通过
this.$options.rules
获取到自定义的rules
对象,然后对所有规则遍历,使用自定义的validate(newValue)
验证规则。第二步实现这个
rules
插件,为了在Vue
中直接使用,可以通过Vue.mixin
注入到Vue
组件中,这样所有的Vue
实例都可以使用。按照插件的开发流程,应该有一个公开方法
install
,在install
里面使用全局的mixin
方法添加一些组件选项,mixin
方法包含一个created
钩子函数,在钩子函数中验证this.$options.rules
。实现代码如下:
参考
交流
本人Github链接如下,欢迎各位Star
http://github.com/yygmind/blog
我是木易杨,现在是网易高级前端工程师,目前维护了一个高级前端进阶群,欢迎加入。接下来让我带你走进高级前端的世界,在进阶的路上,共勉!