事件式编程

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
 $data = get_content(“foo”);
 $template = get_template(“bar”);
 JavaScript/NodeJS
 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问题(一处合并,多处触发)
    逻辑代码分散性
 如何解决
  粒度划分
  模块隔离
  流程预规划
EventProxy introduction - JacksonTian

EventProxy introduction - JacksonTian