Enviar búsqueda
Cargar
Building an event driven web
•
1 recomendación
•
685 vistas
fangdeng
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 38
Descargar ahora
Descargar para leer sin conexión
Recomendados
jQuery底层架构
jQuery底层架构
fangdeng
jQuery介绍@disandu.com
jQuery介绍@disandu.com
Think hy
J query
J query
waitcat
JavaScript 技術手冊第 5 章
JavaScript 技術手冊第 5 章
Justin Lin
Qwrap jss
Qwrap jss
greengnn
Javascript之昨是今非
Javascript之昨是今非
Tony Deng
Js培训
Js培训
yiditushe
Drag & drop
Drag & drop
Alibaba Group
Recomendados
jQuery底层架构
jQuery底层架构
fangdeng
jQuery介绍@disandu.com
jQuery介绍@disandu.com
Think hy
J query
J query
waitcat
JavaScript 技術手冊第 5 章
JavaScript 技術手冊第 5 章
Justin Lin
Qwrap jss
Qwrap jss
greengnn
Javascript之昨是今非
Javascript之昨是今非
Tony Deng
Js培训
Js培训
yiditushe
Drag & drop
Drag & drop
Alibaba Group
Hibernate查询
Hibernate查询
llying
jQuery实践经验与技巧
jQuery实践经验与技巧
fangdeng
Script with engine
Script with engine
Webrebuild
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
GAE/J 簡介
GAE/J 簡介
Cloud Tu
OpenWebSchool - 06 - PHP + MySQL
OpenWebSchool - 06 - PHP + MySQL
Hung-yu Lin
Html基础培训
Html基础培训
fangdeng
Javascript代码注释及文档生成
Javascript代码注释及文档生成
fangdeng
Javascript正则
Javascript正则
fangdeng
前端开发之Js
前端开发之Js
fangdeng
浅尝jQuery
浅尝jQuery
fangdeng
Teaching Students with Emojis, Emoticons, & Textspeak
Teaching Students with Emojis, Emoticons, & Textspeak
Shelly Sanchez Terrell
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
Luminary Labs
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
LinkedIn
管窥Nodejs的事件——基于观察者模式的事件队列
管窥Nodejs的事件——基于观察者模式的事件队列
Frank Cheung
眼高手低的产品设计
眼高手低的产品设计
kent zhu
基于Spring batch的大数据量并行处理
基于Spring batch的大数据量并行处理
Jacky Chi
旺铺前端设计和实现
旺铺前端设计和实现
hua qiu
Top100summit 芈珺七拼八凑搭建移动自动化测试框架
Top100summit 芈珺七拼八凑搭建移动自动化测试框架
drewz lin
Hiiir 營銷講座 營運App的二三事 創造領先App 的必勝手冊 (分享版)
Hiiir 營銷講座 營運App的二三事 創造領先App 的必勝手冊 (分享版)
Hiiir Lab
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
fangdeng
前端单元测试初体验
前端单元测试初体验
fangdeng
Más contenido relacionado
La actualidad más candente
Hibernate查询
Hibernate查询
llying
jQuery实践经验与技巧
jQuery实践经验与技巧
fangdeng
Script with engine
Script with engine
Webrebuild
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
GAE/J 簡介
GAE/J 簡介
Cloud Tu
OpenWebSchool - 06 - PHP + MySQL
OpenWebSchool - 06 - PHP + MySQL
Hung-yu Lin
La actualidad más candente
(6)
Hibernate查询
Hibernate查询
jQuery实践经验与技巧
jQuery实践经验与技巧
Script with engine
Script with engine
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
GAE/J 簡介
GAE/J 簡介
OpenWebSchool - 06 - PHP + MySQL
OpenWebSchool - 06 - PHP + MySQL
Destacado
Html基础培训
Html基础培训
fangdeng
Javascript代码注释及文档生成
Javascript代码注释及文档生成
fangdeng
Javascript正则
Javascript正则
fangdeng
前端开发之Js
前端开发之Js
fangdeng
浅尝jQuery
浅尝jQuery
fangdeng
Teaching Students with Emojis, Emoticons, & Textspeak
Teaching Students with Emojis, Emoticons, & Textspeak
Shelly Sanchez Terrell
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
Luminary Labs
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
LinkedIn
Destacado
(8)
Html基础培训
Html基础培训
Javascript代码注释及文档生成
Javascript代码注释及文档生成
Javascript正则
Javascript正则
前端开发之Js
前端开发之Js
浅尝jQuery
浅尝jQuery
Teaching Students with Emojis, Emoticons, & Textspeak
Teaching Students with Emojis, Emoticons, & Textspeak
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
Similar a Building an event driven web
管窥Nodejs的事件——基于观察者模式的事件队列
管窥Nodejs的事件——基于观察者模式的事件队列
Frank Cheung
眼高手低的产品设计
眼高手低的产品设计
kent zhu
基于Spring batch的大数据量并行处理
基于Spring batch的大数据量并行处理
Jacky Chi
旺铺前端设计和实现
旺铺前端设计和实现
hua qiu
Top100summit 芈珺七拼八凑搭建移动自动化测试框架
Top100summit 芈珺七拼八凑搭建移动自动化测试框架
drewz lin
Hiiir 營銷講座 營運App的二三事 創造領先App 的必勝手冊 (分享版)
Hiiir 營銷講座 營運App的二三事 創造領先App 的必勝手冊 (分享版)
Hiiir Lab
Similar a Building an event driven web
(6)
管窥Nodejs的事件——基于观察者模式的事件队列
管窥Nodejs的事件——基于观察者模式的事件队列
眼高手低的产品设计
眼高手低的产品设计
基于Spring batch的大数据量并行处理
基于Spring batch的大数据量并行处理
旺铺前端设计和实现
旺铺前端设计和实现
Top100summit 芈珺七拼八凑搭建移动自动化测试框架
Top100summit 芈珺七拼八凑搭建移动自动化测试框架
Hiiir 營銷講座 營運App的二三事 創造領先App 的必勝手冊 (分享版)
Hiiir 營銷講座 營運App的二三事 創造領先App 的必勝手冊 (分享版)
Más de fangdeng
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
fangdeng
前端单元测试初体验
前端单元测试初体验
fangdeng
Java script测试之js unit ut
Java script测试之js unit ut
fangdeng
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
fangdeng
产品线中的思考
产品线中的思考
fangdeng
产品线中的思考
产品线中的思考
fangdeng
Postoffer前端架构设计
Postoffer前端架构设计
fangdeng
Varnish简介
Varnish简介
fangdeng
Websocket
Websocket
fangdeng
Let's talk about date in javascript
Let's talk about date in javascript
fangdeng
Test driven-frontend-develop
Test driven-frontend-develop
fangdeng
方凳良品1期
方凳良品1期
fangdeng
方凳良品2期
方凳良品2期
fangdeng
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
fangdeng
Datalazyload
Datalazyload
fangdeng
Request animateframe初探
Request animateframe初探
fangdeng
简鲜侠Websocket
简鲜侠Websocket
fangdeng
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
fangdeng
方凳激励体系(试行)
方凳激励体系(试行)
fangdeng
高性能Javascript
高性能Javascript
fangdeng
Más de fangdeng
(20)
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
前端单元测试初体验
前端单元测试初体验
Java script测试之js unit ut
Java script测试之js unit ut
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
产品线中的思考
产品线中的思考
产品线中的思考
产品线中的思考
Postoffer前端架构设计
Postoffer前端架构设计
Varnish简介
Varnish简介
Websocket
Websocket
Let's talk about date in javascript
Let's talk about date in javascript
Test driven-frontend-develop
Test driven-frontend-develop
方凳良品1期
方凳良品1期
方凳良品2期
方凳良品2期
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
Datalazyload
Datalazyload
Request animateframe初探
Request animateframe初探
简鲜侠Websocket
简鲜侠Websocket
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
方凳激励体系(试行)
方凳激励体系(试行)
高性能Javascript
高性能Javascript
Building an event driven web
1.
Building an Event-driven
Web 谢传贵 2012.03.30 12年3月31⽇日星期六
2.
Agenda
• 事件定义 • 事件编程的演进 • 事件编程实战 • 对事件编程的一些思考 12年3月31⽇日星期六
3.
事件的定义
• 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⽇日星期六
4.
事件的三个层次
• 触发 • 识别 • 事件的上下⽂文 12年3月31⽇日星期六
5.
事件编程的演进 12年3月31⽇日星期六
6.
long long ago...
<input type=”button” onclick=”doSomething();”/> 12年3月31⽇日星期六
7.
<input type=”button” onclick=”doSomething();”/>
button.onclick = doSomething; 12年3月31⽇日星期六
8.
<input type=”button” onclick=”doSomething();”/>
button.onclick = doSomething; button.addEventListener(‘click’,doSomething,false); 12年3月31⽇日星期六
9.
if(button.addEventListener){
button.addEventListener(‘click’,doSomething,false); }else if(button.attachEvent){ button.attachEvent(‘click’,doSomething); } 12年3月31⽇日星期六
10.
<input type=”button” onclick=”doSomething();”/>
button.onclick = doSomething; button.addEventListener(‘click’,doSomething,false); if(button.addEventListener){ /* madness*/ } addEvent(button,‘click’,doSomething); 12年3月31⽇日星期六
11.
function doSomething(e){
if(e && e.preventDefault){ e.preventDefault(); } return false; } 每一段代码里都需要进行这样的处理,坑爹啊 12年3月31⽇日星期六
12.
<input type=”button” onclick=”doSomething();”/>
button.onclick = doSomething; button.addEventListener(‘click’,doSomething,false); if(button.addEventListener){ /* madness*/ } addEvent(button,‘click’,doSomething); 12年3月31⽇日星期六
13.
YUI2
YAHOO.util.Event.on(button,‘click’,doSomething); YAHOO.util.Event.preventDefault(e); 规范化的事件订阅 规范化的事件处理 12年3月31⽇日星期六
14.
jQuery
button.on(‘click’,doSomething) e.preventDefault() 感兴趣,可以去看看jQuery Event模块源码,会有意想 不到的收获 规范化的事件订阅 规范化的事件处理 context重置为当前DOM 12年3月31⽇日星期六
15.
Custom Events
button.on(‘myEvent’,doSomething); button.trigger(‘myEvent’); 12年3月31⽇日星期六
16.
App
Event API DOM Events App Events API for everything with events 12年3月31⽇日星期六
17.
事件编程实践 12年3月31⽇日星期六
18.
先来理解事件中的两种角色 12年3月31⽇日星期六
19.
⽣生产者(Producer)
提供信息 12年3月31⽇日星期六
20.
消费者(Consumer)
接收信息 12年3月31⽇日星期六
21.
Publish-Subscribe
Consumer1 Producer Topic Consumer2 Producer2 Consumer3 Topic2 12年3月31⽇日星期六
22.
先来看一个例子
1 2 target 3 滚动条滚动到指定位置 12年3月31⽇日星期六
23.
单页面
N个APP 通过应用框架来管理 支持配置按需加载 12年3月31⽇日星期六
24.
对于App的要求
• 可维护性 • 可扩展性 • 支持单元测试(部分) • 高性能 • 尽量少的模块依赖 • App快速接入和下线 12年3月31⽇日星期六
25.
肿么办?
Event-driven!!! 12年3月31⽇日星期六
26.
Event-driven Architecture
Event APP APP APP Producers Event Event Bus Transport Event Bus Event APP APP APP Consumers 12年3月31⽇日星期六
27.
Example 12年3月31⽇日星期六
28.
事件流
通过事件流来解决多个App级联关系 12年3月31⽇日星期六
29.
页面打点
一次部署,解决后顾之忧 12年3月31⽇日星期六
30.
组件对外的接口
定义事件名称以及传递的数据格式,暴露给外部 12年3月31⽇日星期六
31.
事件的管理 12年3月31⽇日星期六
32.
使用Event-driven性能怎么样?
查看Event模块源码,只在第一次进行初始化操作,后 续事件查找是在cache中,并且不涉及和DOM交互, 基本事件响应在0~1ms之间 12年3月31⽇日星期六
33.
有思路了么?
1 2 target 3 滚动条滚动到指定位置 12年3月31⽇日星期六
34.
优点
• 模块的稳定性增强 • 模块的低耦合度 • 单模块重构成本低 • plugin支持良好 • 易于团队协作以及单模块测试 12年3月31⽇日星期六
35.
问题和挑战
• 开发人员需要对事件进行抽象,分类和管理 • 需要处理好事件触发顺序 • 对于异步的理解 12年3月31⽇日星期六
36.
对事件编程的思考 12年3月31⽇日星期六
37.
还是需要我们多去尝试事件方式的编程,才能挖掘
潜在的优点。 12年3月31⽇日星期六
38.
谢谢 12年3月31⽇日星期六
Descargar ahora