【懒懒之道】之轻分享《淘宝观光团hujs总结》——承玉

Transcript

1. hujs 总结 淘宝观光团 12年9月21⽇日星期五
2. hujs 12年9月21⽇日星期五
3. 主题 • javascript • nodejs • cloud service • win8 12年9月21⽇日星期五
4. • javascript 12年9月21⽇日星期五
5. • knockout.js 12年9月21⽇日星期五
6. knockout.js 12年9月21⽇日星期五
7. knockout.js 12年9月21⽇日星期五
8. 12年9月21⽇日星期五
9. knockout.js 12年9月21⽇日星期五
10. knockout.js • MVVM • view model • data and behavior • view • DOM binding • DOM as template • just change view model to sync with view 12年9月21⽇日星期五
11. knockout.js • my option • DOM oriented • hard to work with javascript newed component (KISSY) • behavior and view are not separated 12年9月21⽇日星期五
12. • ECMAScript 5 12年9月21⽇日星期五
13. Object • Object.create • Object.defineProperty • Object.getPrototype • Object.keys • Object.getOwnPropertyDescriptor • Object.getOwnPropertyName • Object.seal/preventExtension/freeze ... 12年9月21⽇日星期五
14. Array • every • some • map • filter • forEach • reduce • indexOf ... 12年9月21⽇日星期五
15. JSON • stringify(value,[ [replacer],space]) • parser(text,[reviver]) • subset of javascript • double quote • not support \x 12年9月21⽇日星期五
16. ‘use strict’; • 禁⽌止不声明的变量 • 禁⽌止 with • 全局 eval • arguments 不同步参数 • 禁⽌止 caller callee • 禁⽌止对象重复属性名 12年9月21⽇日星期五
17. • wind.js 调试 12年9月21⽇日星期五
18. wind.js $wait(readFile); alert('read  complete'); readFile(function(){        alert(‘read  complete’); }); compile 12年9月21⽇日星期五
19. souce map • Generated by closure compiler. Intro • native support in chrome • 调试压缩/翻译代码 • used at KISSY XTemplate • //@  sourceMappingURL=/path/to/file.js.map  or X-­‐SourceMap:  /path/to/file.js.map 12年9月21⽇日星期五
20. KISSY XTemplate var  tpl  =  'this  is  {{title}}!'; var  data  =  {        title:  'o' }; var  render  =  new  XTemplate(tpl,  {        name:  'tpl-­‐variable' }).render(data); 12年9月21⽇日星期五
21. • Modularization( Seajs, KISSY Loader ) 12年9月21⽇日星期五
22. • Modularization • 可维护性 • 性能 • 组件（模块）共享 • 调试 12年9月21⽇日星期五
23. • Promise/A (Q, KISSY) 12年9月21⽇日星期五
24. Promise • cleaner method signature • nested call changed to chained call io.get("url1",function(){        io.get('url2',function(){                io.get('url3',function(){                });        }); }) io.get("url1").then(function(){    return  io.get("url2") }).then(function(){    return  io.get("url3");   }).then(function(data3){ }); 12年9月21⽇日星期五
25. Promise • easy combination • easy parallel • S.Promise.all(   io.get('url1'), io.get('url2'), function(  data1,  data2  ){ }); 12年9月21⽇日星期五
26. Promise • exception-bullet • io.get('url').then(function(){        throw  "2"; }).fail(function(w){        alert(w);   }); 12年9月21⽇日星期五
27. Promise • error bubble • io.get("url1").then(function(){    return  io.get("url2") }).then(function(){    return  io.get("url3");   }).then(function(data3){ },function(err){        alert(error);     }); 12年9月21⽇日星期五
28. Promise • error recovery • io.get("url1").then(function  ()  {        return  io.get("url2"); },  function  (e)  {        //  error  recovery        S.log(e);        return  io.get("url2"); }).then(function  (data2)  { }); 12年9月21⽇日星期五
29. • nodejs 12年9月21⽇日星期五
30. • nodejs proxy for mysql 12年9月21⽇日星期五
31. 优势 • 对⽐比 c/c++ • 简化实现⾮非阻塞异步功能 • 性能差别不⼤大 • 编程复杂度低 12年9月21⽇日星期五
32. 常⽤用模块 • async • ⽅方便异步操作 • log4js • ⽇日志 • node-webkit-agent • 使⽤用 chrome dev tools 监控服务器端 12年9月21⽇日星期五
33. • nodejs for webim（⻓长连接） 12年9月21⽇日星期五
34. 优势 • 快速原型 • 学习成本低 • 出众的性能 • 团队⼊入⻔门快 12年9月21⽇日星期五
35. 多进程架构 12年9月21⽇日星期五
36. nodejs 优化 • ⼦子进程往⽗父进程发送⼼心跳保证稳定 • c++ 扩展提⾼高性能 • cpu 绑定进程 12年9月21⽇日星期五
37. • nodejs for backend game engine 12年9月21⽇日星期五
38. game vs web • area based vs load balance • state vs stateless • broadcast (area) vs request / response • tick vs request 12年9月21⽇日星期五
39. 12年9月21⽇日星期五
40. 12年9月21⽇日星期五
41. • nodejs @ taobao 12年9月21⽇日星期五
42. 12年9月21⽇日星期五
43. 调优 • console.time / timeEnd • benchmark.js 性能测量 • top / iotop @linux • node-webkit-agent • v8profile • nodejs gc log -> jvm gc log 12年9月21⽇日星期五
44. • cloud service 12年9月21⽇日星期五
45. cloud • appfog • azure • npm install azure • git commit • git push azure master 12年9月21⽇日星期五
46. • win8 12年9月21⽇日星期五
47. 12年9月21⽇日星期五
48. 12年9月21⽇日星期五
49. thanks 12年9月21⽇日星期五