基于 YUI3 的组件开发 续拔赤 bachi@taobao.com

http://www.uedmagazine.com 2009-12-11

李晶（花名拔赤）中国雅虎 / 淘宝网前端开发工程师

msn & email: lijing00333@163.com

Blog: http://www.uedmagazine.com

回顾

组件化的 web 开发组件的模样

开发一个组件

Our Choise?

WHY YUI ？

使用原生 javascript 的开发

使用 prototype 的开发

使用 JQuery 的开发

使用 YUI 的开发

• 自定义事件• 代码重用• 插件

• 自定义事件• 代码重用• 插件

javascript 是一种基于对象（ Object Based ）

和 事件驱动（ Event Driver ）的编程语言。

当 click 发生的时候执行 foo

var foo = new Function;document.onclick = foo;

绑定 foo 回调，等待 click 的发生

事件的细节？

事件的生命周期

• 事件工厂• 事件类型注册• 运行时的监听绑定

浏览器是事件工厂

事件工厂生产浏览器事件

Click MouseoverKeydown Keypress

Mouseout Blur LoadDbclickChange

面向开发者的运行时环境

runtime

事件工厂 事件类型注册 监听绑定

IE/FF/Safari

click/mouseover…

宿主元素 a/div/input

发布事件 事件类型触发回调

浏览器的实现，对开发者不可见

事件工厂 事件类型注册 监听绑定

IE/FF/Safari

click/mouseover…

宿主元素 a/div/input

发布事件 事件类型触发回调

document.onclick = callback;

事件监听 setter 方法

vs

监听绑定的实现方法

事件监听Widget.on(‘trigger’,callback);

Widget.setCallback(callback);

setter 方法

// 点击空白处弹层关闭document.onclick = function(){

Box.close();};

// 点击空白处弹层关闭 且 菜单关闭document.onclick = function(){

Box.close();Menu.close();

};

setter 方法

需求增加

// 点击空白处弹层关闭Y.on('click',function(e){ Box.close();},document);

// 点击空白处弹层关闭Y.on('click',function(e){ Box.close();},document);// 点击空白处菜单关闭Y.on('click',function(e){ Menu.close();},document);

事件监听

需求增加

事件监听 setter 方法

YUI3 的自定义事件

// 实现一个三击事件// 事件工厂var tripleClickFactory = function(){};Y.augment(tripleClickFactory, Y.Event.Target);// 事件注册var tripleClick = new tripleClickFactory('#id');// 触发回调tripleClick.fire('tpClick',[s1,s2]);

// 监听绑定tripleClick.subscribe('tpClick', callback);

Example: http://www.uedmagazine.com/test/tripleclick.html

// 事件的定义在组件内完成

// 给分页组件绑定监听new PAGINATION(node).on(‘trigger’,function(n){

Y.log(n);});

组件的自定义事件Example: http://www.uedmagazine.com/test/plugin/pagination-plugin.html

• 自定义事件

• 代码重用• 插件

YUI3 中的 OOP

• extend

• augment

• clone

• merge

• aggregate

类继承类扩充对象克隆对象合并对象聚合

Function

Function

Object

Object

Object

Extend( 继承 ) ：方法成员 + 构造

Augment( 扩充 ) ：方法成员

Extend 与 Augment 的区别

YUI3 里的掺元类专门用来被扩充用的

• Y.Plugin.Host （插件）• Y.Event.Target （事件）

• 自定义事件• 代码重用

• 插件

YUI3 对 plugin 的定位

Plugin 的三个要素

• 小特性、小功能• 宿主• 可装载，可卸载

Example: http://www.uedmagazine.com/test/plugin/astro.html Example: http://www.uedmagazine.com/test/plugin/pagination-plugin.html

Host

Plugin

Host

Plugin

Meny meny Plugins

Plugin 的定义

// 定义一个插件var AnchorPlugin = function(){};AnchorPlugin.NS = 'anchors';

Plugin 的装载

// 装载插件var container = Y.Node.get('#id');container.plug(AnchorPlugin);

执行插件提供的方法

// 执行插件提供的方法container.anchors.disable();

Plugin 的卸载

//plugin 的卸载container.unplug(AnchorPlugin);

Thank u ~

拔赤 - 李晶msn/email:lijing00333@163.comBlog: http://www.uedmagazine.com