Event,proxy,introduction,事件驱动编程

1. 事件式编程
EVENTPROXY INTRODUCTION

2. About me
 @朴灵
 非资深前端工程师一枚
 就职于SAP Labs China
 从事Mobile Web App开发
 NodeJS痴迷者
 寄望打通前端JavaScript与NodeJS的隔阂，
将NodeJS引荐给更多的前端工程师

3. Agenda
 史上最屎的代码
 单线程误解
 异步编程优势与问题
 用EventProxy来解决异步编程问题
 Assign
 AssignAlways
 After

4. 史上最屎的代码
http://www.douban.com/online/10917653/

5. JavaScript单线程的误解
http://www.grati.org/?p=284

6. 异步编程优势
 PHP
$data = get_content(“foo”);
$template = get_template(“bar”);
 JavaScript/NodeJS
get_content(“foo”, function (data) {
data = data;
});
get_template(“bar”, function (template){
template = template;
});

7. 异步编程缺陷
get_content(“foo”, function (data) {
var data = data;
// bala….
get_template(“bar”, function (template){
var template = template;
// bala….
render(template, data);
});
});

8. EventProxy设计目的
• 无阻塞/高性能
避短
• 事件驱动/松散耦合 • 深度嵌套/代码耦合
• 并行执行 • 串行执行效率问题
扬长
项目地址 https://github.com/JacksonTian/eventproxy

9. EventProxy的assign方法
var proxy = new EventProxy();
proxy.assign(“template”, “data”, function (tmpl,
data){
render(tmpl, data);
});
proxy.trigger(“template”, template);
proxy.trigger(“data”, data);
分发 并行 合并 保证
式 式 式 式

10. Assign的并行流程

11. EventProxy的assignAlways方法
var proxy = new EventProxy();
proxy.assignAlways(“template”, “data”, function
(tmpl, data){
render(tmpl, data);
});
 适用于数据持续更新的场景
 前端搜索/排序
 数据更新(股票)

12. EventProxy的after方法
var proxy = new EventProxy();
var files = [“file1”, “file2”….];
proxy.after(“readfile”, files.length, function
(contents){
combo(contents);
});
files.forEach(function (file, index){
proxy.trigger(“readfile”, file);
});
 适用于相同事件多次触发，结果保证的场
景

13. 来点栗子
Assign AssignAlways After

14. 事件式编程问题
 阅读性
 N+1问题(一处合并，多处触发)
 逻辑代码分散性
 如何解决
 粒度划分
 模块隔离
 流程预规划