web标准化交流会，周爱民老师为我们分享《前端，架构、框架与库的实战》

1. 从问题开始 前端架构、框架与库的实战 周爱民 愚公 aimingoo aiming@gmail.com aimingoo.spaces.live.com ….

3. 架构 = ？

4. 有感、有理、有道：你在哪里？

5. 我们在哪里？

6. 什么是真相？

8. 把握

9. 问题

10. 关键

11. 平衡

12. 设计

13. 问题？

14. 设计？

16. 库

17. 一行ajax代码 function(url) { with (new XMLHttpRequest()) return open("GET", url, false), send(null), responseText; }

19. 作为代码行重用

20. 作为函数调用重用

21. ……

22. 我们能不能控制它？

25. 应用层的代码难于控制整个HTTP请求的全程

26. 只支持特定的通讯协议

27. 对Pool有过于明显的依赖

28. …

29. 问题：

31. new Ajax(url).onreadystatechange = function(response) { ...}

33. Qomo V2的设计 vardoRequest = function(url) { // [,data] // $assert(!this.get('async'), ['need not async!']); varxmlHttp = this.get('XMLHTTP'); this.get('_open').call(this, xmlHttp, arguments); this.get('_send').call(this, xmlHttp, arguments); this.get('_resp').call(this, xmlHttp, …); } vargetResult = function(url) { return doRequest.apply(this, arguments); } this.Create = function() { var AJAX = this.get('XMLHTTPOBJECT'); this.set('XMLHTTP', (typeof AJAX=='function') ? new AJAX() : new ActiveXObject(AJAX)); this.getResult = getResult; } });

34. Qomo V2的设计 THttpRequestAsync = Class(THttpRequest, function() { varonreadystatechange = function(url, state) { if (state == 4) { this.get('_resp').call(this, xmlHttp, …); … var _changer = function(req, url) { return function() { req.OnReadyStateChange(url, …); … vardoRequest = function(url) { // [,data] // $assert(this.get('async'), ['need async!']); varxmlHttp = this.get('XMLHTTP'); this.get('_open').call(this, xmlHttp, arguments); xmlHttp.onreadystatechange = _changer(this, url); this.get('_send').call(this, xmlHttp, arguments); } this.OnReadyStateChange = NullFunction; this.Create = function() { this.inherited(); this.getResult = …; // rewrite, call doRequest this.OnReadyStateChange.add(onreadystatechange); } });

35. Qomo V2的设计 IHttpRequest = function() { this.getResult = this.OnResponse = this.OnSetRequestHeader = Abstract } IHttpRequestAsync = function() { this.getResult = this.OnResponse = this.OnSetRequestHeader = this.OnReadyStateChange = Abstract }

36. Qomo V2的设计 function _POST() { _set('METHOD', 'POST'); _set('_send', function(ajx, args) { ajx.send(args[1] || '') }); } } /* this.Create = function() { … */ } THttpPost = Class(THttpRequest, _POST); THttpPostAsync = Class(THttpRequestAsync, _POST);

37. Qomo V2的设计 // IHttpGet = IHttpPost = IHttpRequest THttpGet = Class(THttpRequest, NullFunction); THttpPost = Class(THttpRequest, _POST); // IHttpGetAsync = IHttpPostAsync = IHttpRequestAsync THttpGetAsync = Class(THttpRequestAsync, NullFunction); THttpPostAsync = Class(THttpRequestAsync, _POST); THttpRequest THttpGet THttpPost THttpRequestAsync THttpGetAsync THttpPostAsync

39. 有没有设计过程？

40. 有没有架构过程？

41. ……

43. ssdownload的分析 浏览器展现 某页的URL 是否下载？ 下载 合法的POST信息 保存 下载的批次 本地信息

44. ssdownload的设计 ssreader.exe 浏览器展现 HTTPAnalyzer Monitor.js 某页的URL Filter.js ProcessesPool.js 是否下载？ 下载 保存 SSGetter.js 合法的POST信息 下载的批次 本地信息

45. ssdownload的实施 /* a Framework for the system! /__events__. fire-onMonitorUpdate_in_HTA ______SSGetter.js_____ __|__ || / / / _ br />monitor -> filter -> onGetDownloadItem -> downIt -> pool.push--* */

46. 进一步的框架设计(qomo v1) TPool TMachine 1 * TFileMachine THttpMachine THttpGetMachine HttpGet HttpPost HttpMachine

47. 进一步的框架设计(qomo v2) TPool TMachine 1 * TFileMachine THttpMachine THttpGetMachine THttpGet HttpGet THttpRequest THttpPost HttpPost THttpPostAsync THttpRequestAsync HttpMachine THttpGetAsync

48. 进一步的框架设计(qomo v2) THttpGetMachine HttpGet HttpPost TMachine HttpMachine TRequestMachine TPdgHttpGetMachine

49. Qomo V2 – Machine 的对象设计(1/3) function Machine() { Attribute(this, 'Core', null, 'rw'); this.sleep = function() { this.OnStateChange('sleep'); } this.stop = function() { this.get('Core').stop(); this.sleep(); } …

50. Qomo V2 – Machine 的对象设计(2/3) function RequestMachine() { vardoStateChange = function(state) { if (state=='resume') { this.get('Core').getResult( … ); // src, data } } this.Create = function(cls) { this.inherited(); this.OnStateChange.add(doStateChange); this.set('Core', cls.Create(this)); } }

51. Qomo V2 – Machine 的对象设计(3/3) function PdgHttpGetMachine() { vardoQueryExist = function(state) { if (state == 'resume') … } this.getStatus = function() { return this.get('Core').get('XMLHTTP').status; } this.Create = function() { this.OnStateChange.add(doQueryExist); this.inherited('Create', Class(THttpGetAsyncMac, …)); } }

52. Qomo V2 – Machine 的接口设计 IMachine = function() { // this.data = // this.pool = null; this.sleep = this.stop = this.OnStateChange = Abstract; } IRequestMachine = function() { // IMachine based } IPdgHttpGetMachine = function() { // IMachine based this.getStatus = Abstract }

53. Qomo V2 – Pool/Mac类库设计的汇总 1 1 1 * TMachine TPool Core THttpRequest TRequestMachine THttpRequestAsync THttpGet THttpPost THttpGetAsync THttpPostAsync TPdgHttpGetMachine

55. 二者的关系是什么？

56. 框架处理系统的哪个部分？库呢？

57. 共性与本质

58. 《关于架构的三句话》中有关COM的部分

59. 《为脚本语言平反(2)(3)》中有关DSL部分

61. SSDownload/PackageBuy – 应用框架 ssreader.exe User-Request HTTPAnalyzer Monitor.js Batch Push Filter.js 输入层 ProcessesPool.js TPool 调度层 MergeAndOutput SSGetter.js 处理层

62. SSDownload/PackageBuy – 应用框架 识别类 TObject TPool.Create(MacClass) pool.OnRequireNew(mac) 数据类TObject pool.push(data) 输入层 调度类 TPool 调度层 pool.stop() 处理层 pool.OnStateChange(mac,data) 处理类 TMachine

63. SSDownload/PackageBuy – 应用框架 function PoolApp() { Attribute(this, ‘pool’); Attribute(this, ‘watcher’); this.start = function() { this.get(‘watcher’).start(); } // Create(PoolClass, WatchClass, MachineClass); this.Create = function(P,W,M) { this.set(‘watch’, W.Create()).pool = this.set(‘pool’, P.Create(M)); } }

64. PWM框架的应用 IPool = function() { this.push = Abstract; // push(data) this.stop = Abstract; // stop() this.OnStateChange = Abstract; // OnStateChange(mac,data) this.Create = Abstract; // Create(MachineClass) } IWatch = function() { // this.pool = null; this.start = Abstract; // start() }

65. PWM框架的应用 data = { src: …, param: … }; function MyWatch() { this.start = function() { this.pool.push(data)); } function MyMachine(cls) { vardoStateChange = function(state) { if (state == ‘resume’) this.get(‘Core’).process(this.data)) } this.Create = function() { this.inherited(); this.OnStateChange.add(doStateChange); this.set('Core', { process: function(data) { alert(data.src) } }); }); }

66. PWM框架的应用 app = TPooledApp.Create( TPool, Class(TObject, ‘MyWatch’), Class(TMachine, ‘MyMachine’) ); app.start();

67. 反思

69. 我们在架构“什么”？

70. 我们在为什么做？

71. ……

73. 架构设计的主要视角

74. End.