Building an Event-driven Web谢传贵

2012.03.30

12年3月31⽇日星期六

Agenda

• 事件定义• 事件编程的演进• 事件编程实战• 对事件编程的一些思考

12年3月31⽇日星期六

事件的定义

• Anything that happened(or didn’t happen)

• A change in state

• A condition that triggers a notification

• An event is always named in the past tense and is immutable

12年3月31⽇日星期六

事件的三个层次

• 触发• 识别• 事件的上下⽂文

12年3月31⽇日星期六

事件编程的演进

12年3月31⽇日星期六

<input type=”button” onclick=”doSomething();”/>

long � long � ago...

12年3月31⽇日星期六

button.onclick = doSomething;

<input type=”button” onclick=”doSomething();”/>

12年3月31⽇日星期六

button.onclick = doSomething;

<input type=”button” onclick=”doSomething();”/>

button.addEventListener(‘click’,doSomething,false);

12年3月31⽇日星期六

if(button.addEventListener){button.addEventListener(‘click’,doSomething,false);

}else if(button.attachEvent){button.attachEvent(‘click’,doSomething);

}

12年3月31⽇日星期六

button.onclick = doSomething;

<input type=”button” onclick=”doSomething();”/>

button.addEventListener(‘click’,doSomething,false);

if(button.addEventListener){ /* madness*/ }

addEvent(button,‘click’,doSomething);

12年3月31⽇日星期六

function doSomething(e){if(e && e.preventDefault){

e.preventDefault();}return false;

}

每一段代码里都需要进行这样的处理,坑爹啊

12年3月31⽇日星期六

button.onclick = doSomething;

<input type=”button” onclick=”doSomething();”/>

button.addEventListener(‘click’,doSomething,false);

if(button.addEventListener){ /* madness*/ }

addEvent(button,‘click’,doSomething);

12年3月31⽇日星期六

YAHOO.util.Event.on(button,‘click’,doSomething);

YUI2

YAHOO.util.Event.preventDefault(e);

规范化的事件订阅

规范化的事件处理

12年3月31⽇日星期六

button.on(‘click’,doSomething)

jQuery

e.preventDefault()

规范化的事件订阅

规范化的事件处理

context重置为当前DOM

感兴趣,可以去看看jQuery � Event模块源码,会有意想

不到的收获

12年3月31⽇日星期六

Custom � Events

button.on(‘myEvent’,doSomething); button.trigger(‘myEvent’);

12年3月31⽇日星期六

DOM Events App Events

Event API

App

API for everything with events

12年3月31⽇日星期六

事件编程实践

12年3月31⽇日星期六

先来理解事件中的两种角色

12年3月31⽇日星期六

⽣生产者(Producer)

提供信息

12年3月31⽇日星期六

消费者(Consumer)

接收信息

12年3月31⽇日星期六

Publish-Subscribe

Producer Topic

Consumer1

Consumer2

Consumer3Producer2

Topic2

12年3月31⽇日星期六

先来看一个例子

１

２

target３ 滚动条滚动到指定位置

12年3月31⽇日星期六

� 单页面 � Ｎ个APP � 通过应用框架来管理 � 支持配置按需加载

12年3月31⽇日星期六

• 可维护性

• 可扩展性

• 支持单元测试(部分)

• 高性能

• 尽量少的模块依赖

• App快速接入和下线

对于App的要求

12年3月31⽇日星期六

肿么办?

Event-driven!!!

12年3月31⽇日星期六

Event Bus

Event-driven � Architecture

APP APP APP

Event Bus

EventProducers

EventTransport

APP APP APPEvent

Consumers

12年3月31⽇日星期六

Example

12年3月31⽇日星期六

事件流

通过事件流来解决多个App级联关系

12年3月31⽇日星期六

页面打点

一次部署,解决后顾之忧

12年3月31⽇日星期六

组件对外的接口

定义事件名称以及传递的数据格式，暴露给外部

12年3月31⽇日星期六

事件的管理

12年3月31⽇日星期六

使用Event-driven性能怎么样?

查看Event模块源码,只在第一次进行初始化操作,后续事件查找是在cache中,并且不涉及和DOM交互,基本事件响应在0~1ms之间

12年3月31⽇日星期六

有思路了么?

１

２

target３ 滚动条滚动到指定位置

12年3月31⽇日星期六

• 模块的稳定性增强

• 模块的低耦合度

• 单模块重构成本低

• plugin支持良好

• 易于团队协作以及单模块测试

优点

12年3月31⽇日星期六

• 开发人员需要对事件进行抽象,分类和管理

• 需要处理好事件触发顺序

• 对于异步的理解

问题和挑战

12年3月31⽇日星期六

对事件编程的思考

12年3月31⽇日星期六

还是需要我们多去尝试事件方式的编程，才能挖掘潜在的优点。

12年3月31⽇日星期六

谢谢

12年3月31⽇日星期六