-
Notifications
You must be signed in to change notification settings - Fork 3
goto100 edited this page May 24, 2012
·
1 revision
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); // 修改选项
}
});