深入浅出vue.js---全局API的实现原理----Vue.directive、Vue.filter、Vue.component
一、Vue.directive
Vue.directive(id,[definition]);（1）参数
- { string } id
- { Function | Object } [ definition ]
（2）用法
注册或获取全局指令。
Vue.directive('my-directive',{
bind:function(){},
inserted:function(){},
update:function(){},
componentUpdated:function(){},
unbind:function(){},
})
Vue.directive('my-directive',function(){
})
var myDirective = Vue.directive('my-directive');（3） 除了核心功能默认内置的指令外（v-model和v-show），Vue.js也允许注册自定义指令。虽然代码复用和抽象的主要形式是组件，但是有些情况下，仍然需要对普通DOM元素进行底层操作，这时就会用到自定义指令。
（4）Vue.directive方法的作用是注册或获取全局指令，而不是让指令生效。其区别是注册指令需要做的事是将指令保存在某个位置，而让指令生效是将指令从某个位置拿出来执行它。
（5）实现
Vue.options = Object.create(null);
Vue.options['directives'] = Object.create(null);
Vue.directive = function(id,definition){
if(!definition){
return this.options['directive'][id];
}else{
if(typeof definition === 'function'){
definition = { bind: definition,update: definition};
}
this.optipns['directive'][id] = definition;
return definition;
}
}1、在Vue构造函数上创建了options属性来存放选项，并在选项上新增了directive方法用于存在指令。
2、Vue.directive方法接受两个参数id和definition，它可以注册或获取指令，这取决于definition参数是否存在。
3、如果definition参数不存在，则使用id从this.options['directive']中读出指令并将它返回。
4、如果definition参数存在，则说明是注册操作，那么进而判断definition参数的类型是否是函数。
5、如果是函数，则默认监听bind和update两个事件，所以代码中将definition函数分别赋值给对象中的bind和update这两个方法，并使用这个对象覆盖definition。
6、如果definition不是函数，则说明它是用户自定义的指令对象，此时不需要做任何操作，直接将用户提供的指令对象保存在this.optipns['directive']上即可。
二、Vue.filter
Vue.filter(id,[definition]);（1）参数
- { string } id
- { Function | Object } [definition]
（2）用法
注册或获取全局过滤器
Vue.filter('my-filter',function(value){
})
var myFilter = Vue.filter('my-filter');（3）Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加到Javascript表达式的尾部，由“管道”符号指示
{{ message | capitalize }}
（4）Vue.filter的作用仅仅是注册或获取全局过滤器。
（5）实现
Vue.options['filters'] = Object.create(null);
Vue.filter = function(id,definition){
if(!definition){
return this.options['filters'][id];
}else{
this.optipns['filters'][id] = definition;
return definition;
}
}1、在Vue.options中新增了filters属性用于存放过滤器，并在Vue.js上新增了filter方法，它接受两个参数id和definition。
2、Vue.filters方法可以注册或获取过滤器，这取决于definition参数是否存在。
3、如果definition不存在，则使用id从this.options['filters']中读出过滤器并将它返回。
4、如果definition存在，则说明是注册操作，直接将该参数保存到this.optipns['filters']中。
三、Vue.component
Vue.component(id,[definition]);（1）参数
- { string } id
- { Function | Object } [definition]
（2）用法
注册或获取全局组件。注册组件时，还会自动使用给定的id设置组件的名称。
Vue.component('my-component',Vue.extend({/*...*/}));
Vue.component('my-component',{/*...*/});
var MyComponent = Vue.component('my-component');（3）Vue.component只是注册或获取组件
（4）原理
Vue.options['components'] = Object.create(null);
Vue.component = function(id,definition){
if(!definition){
return this.options['components'][id];
}else{
if(isPlainObject(definition)){
definition.name = definition.name || id;
definition = Vue.extend(definition);
}
this.optipns['components'][id] = definition;
return definition;
}
}1、在Vue.options中新增了components属性用于存放组件，并在Vue.js上新增了component方法，它接收两个参数id和definition。
2、Vue.component方法可以注册或获取过滤器，这取决于definition参数是否存在。
3、如果definition不存在，则使用id从this.options['components']中读出组件并将它返回。
4、如果definition存在，则说明是注册操作，那么需要将组件保存到this.optipns['components']中。
5、由于definition参数支持两种参数，分别是选项对象和构造器，而组件其实是一个构造函数，是使用Vue.extend生成的子类，所以需要将参数definition同一处理成构造器。
6、如果definition参数是Object类型，则调用Vue.extend方法将它变成Vue的子类，使用Vue.component方法注册组件。
7、如果选项对象中没有设置组件名，则自动使用给定的id设置组件的名称。
四、合并Vue.directive、Vue.filter、Vue.component代码
Vue.options = Object.create(null);
ASSET_TYPES.forEach(type=>{
Vue.options[type+'s'] = Object.create(null);
})
ASSET_TYPES.forEach(type=>{
Vue[type] = function(id,definition){
if(!definition){
return this.options[type+'s'][id];
}else{
if(type==='component' && isPlainObject(definition)){
definition.name = definition.name || id;
definition = Vue.extend(definition);
}
if(type==='directive' && typeof definition === 'function'){
definition = { bind: definition,update: definition};
}
this.optipns['components'][id] = definition;
return definition;
}
}
})