ui

ui模块用于创建用户界面组件，其特点有：

• 一种组件对应一个类
• 每个组件的实例包装一个DOM节点
• 每个类都继承于 ui.Component 类
• 可实现扩展
• 三种选项设置方法（默认值、传参选项、节点选项）

实现一个组件

在创建组件的类的时候，每一个类都继承于ui.Component类，且其成员遵循一定的模式，则可以灵活实现组件常用功能。

目前，有7种模式：

• 定义子组件引用
• 定义选项
• 定义触发事件的方法
• 为子组件定义事件
• 为选项定义事件
• 为宿主组件定义事件
• 初始化函数

定义子组件引用

任何组件都可以拥有自己的子组件，子组件同样是Component的子类。

定义子组件的引用，通过一个css选择器选择当前组件的符合条件的子节点。

若没有制定子组件的类型，子组件的类型默认为ui.Component。

子组件的引用可以为一个组件，也可以为一批同类型的组件。

var MyComponent = new Class(ui.Component, {
	subComponent: ui.define('.myclass'), // 定义一个子组件，类型为Component
	subComponent1: ui.define1('.myclass1'), // 定义一个只有唯一引用的子组件
	subComponent2: ui.define('.myclass2', ui.Tab) // 定义一个子组件，其类型为一个组件
});  

定义选项

定义选项时，需提供一个默认值，若组件在初始化时没有指定新的值，则使用默认值。

初始化组件时，通过第二个参数制定此组件的选项。

或者通过setOption设置选项。

var MyComponent = new Class(ui.Component, {
	myOption: ui.option(true), // 定义一个选项
});  

var myComponent = new MyComponent(node, {
	myOption: false
});

myComponent.setOption('myOption', true);

定义触发事件的方法

此类方法在被调用时都会触发一个与方法同名的事件，可用于扩展系统的注册点，或者通过addEvent为组件添加事件。

此方法的主体会被作为事件的默认行为，可通过event.preventDefault阻止掉。

var MyComponent = new Class(ui.Component, {
	_method: function(self) {
		// 可绑定的事件点
		console.log('never run');
	}
});  

var myComponent = new MyComponent(node, options);

myComponent.addEvent('method', function(event) {
	console.log('fired');
});

myComponent.addEvent('method', function(event) {
	console.log('blocked');
	event.preventDefault();
});

myComponent.method(); // ==> fired, blocked

为子组件定义事件

为子组件绑定事件

var MyComponent = new Class(ui.Component, {
	subComponent_click: function(self, event, subComponent) {
		// 为子组件绑定事件
	}
});  

为选项定义事件

在修改选项值时，组件会触发相应选项的change事件

var MyComponent = new Class(ui.Component, {
	myOption_change: function(self, value) {
		// 监听option的修改
	}
});  

为宿主组件定义事件

当某一个组件被作为了另一个组件的Addon，这个组件的此类事件都会定义给他的宿主组件。

var MyComponent = new Class(ui.Component, {
	onclick: function(self) {
		// 此组件在被作为addon时，为宿主组件绑定事件
	}
});  

初始化函数

一个组件被初始化的时候，会调用此方法，同时触发init事件。

var MyComponent = new Class(ui.Component, {
	_init: function(self) {
		// 初始化
		console.log(self.subComponent); // ==> 子组件的引用
		console.log(self.myOption); // ==> true
		self.method(); // 同时触发 method 事件
		self.setOption('myOption', false); // 修改选项
	}
});