深入浅出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(){
	<!-- 这里将会被bind和update调用 -->
})
<!-- getter方法，返回已注册的指令 -->
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){
	<!-- 返回处理后的值 -->
})
<!-- getter方法，返回已注册的过滤器 -->
var myFilter = Vue.filter('my-filter');

（3）Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加到Javascript表达式的尾部，由“管道”符号指示

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在v-bind中 -->
<div v-bind:id="rawId | formatId "></div>

（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.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 = ['component','directive','filter'] -->
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;
		}
	}
})