EVENTPROXY INTRODUCTION事件式编程

About me

@朴灵

非资深前端工程师一枚

就职于SAP Labs China

从事Mobile Web App开发

NodeJS痴迷者

寄望打通前端JavaScript与NodeJS的隔阂，将NodeJS引荐给更多的前端工程师

Agenda

史上最屎的代码

单线程误解

异步编程优势与问题

用EventProxy来解决异步编程问题

Assign

AssignAlways

After

史上最屎的代码

http://www.douban.com/online/10917653/

JavaScript单线程的误解

http://www.grati.org/?p=284

异步编程优势

PHP

JavaScript/NodeJS

$data = get_content(“foo”);$template = get_template(“bar”);

get_content(“foo”, function (data) {data = data;

});get_template(“bar”, function (template){

template = template;});

异步编程缺陷

get_content(“foo”, function (data) {var data = data;// bala….get_template(“bar”, function (template){

var template = template;// bala….render(template, data);

});});

EventProxy设计目的

• 无阻塞/高性能

• 事件驱动/松散耦合

• 并行执行

扬长

• 深度嵌套/代码耦合

• 串行执行效率问题

避短

https://github.com/JacksonTian/eventproxy项目地址

EventProxy的assign方法

var proxy = new EventProxy();proxy.assign(“template”, “data”, function (tmpl, data){

render(tmpl, data);}); proxy.trigger(“template”, template);proxy.trigger(“data”, data);

分发式

并行式

合并式

保证式

Assign的并行流程

EventProxy的assignAlways方法

适用于数据持续更新的场景

前端搜索/排序

数据更新(股票)

var proxy = new EventProxy();proxy.assignAlways(“template”, “data”, function (tmpl, data){

render(tmpl, data);});

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);});

来点栗子

Assign AssignAlways After

事件式编程问题

阅读性

N+1问题(一处合并，多处触发)

逻辑代码分散性

如何解决

粒度划分

模块隔离

流程预规划