![前端架构、框架与库的实战 周爱民 愚公 aimingoo [email_address] aimingoo.spaces.live.com … .](https://image.slidesharecdn.com/random-100512082335-phpapp01/85/-1-320.jpg)
![/* please sort first 如果找到返回查找值所在索引 否则返回 -(x+1) ( 插入点 x : , -(x+1) 防止 x=0 的插入点 与 找到的情况矛盾 )) 则判断某值是否存在只需判断 返回值 >=0 即可 */ Array.prototype.binarySearch = function(v){ var l = 0; var h = this.length-1; while (l<=h) { // 注：位操作 javascript 不一定提高效率 var m = (l+h)>>>1; if (this[m]===v) { return m; } if (this[m]>v) { h = m-1; } else { l = m+1; } } return -(l+1); }](https://image.slidesharecdn.com/random-100512082335-phpapp01/85/-4-320.jpg)
![THttpRequest = Class(TObject, function() { Attribute(this, 'XMLHTTPOBJECT', 'MSXML2.XMLHTTP', 'rw'); Attribute(this, 'XMLHTTP', null, 'rw'); Attribute(this, 'METHOD', 'GET', 'r'); Attribute(this, 'format', 'TEXT', 'r'); // 'XML',‘BODY‘, … Attribute(this, 'async', false, 'r'); // user, pass, … … this. OnSetRequestHeader = NullFunction; this. OnResponse = NullFunction; Attribute(this, ' _open ', function(ajx, args) { ajx. open (this.get('METHOD'), args[0], this.get('async'),… this. OnSetRequestHeader (ajx, args); }, 'r'); Attribute(this, ' _send ', function(ajx, args) { ajx. send (); }, 'r'); Attribute(this, ' _resp ', function(resp, url, fmt) { var FMT = {XML: 'responseXML', TEXT: 'responseText', …}; var data = resp[FMT[fmt]]; this. OnResponse (url, {format: fmt, data: data}); return data; }, 'r');](https://image.slidesharecdn.com/random-100512082335-phpapp01/85/-11-320.jpg)
![var doRequest = function(url) { // [,data] // $assert(!this.get('async'), ['need not async!']); var xmlHttp = this.get('XMLHTTP'); this.get(' _open ').call(this, xmlHttp, arguments); this.get(' _send ').call(this, xmlHttp, arguments); this.get(' _resp ').call(this, xmlHttp, …); } var getResult = 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 ; } });](https://image.slidesharecdn.com/random-100512082335-phpapp01/85/-12-320.jpg)
![THttpRequestAsync = Class(THttpRequest, function() { var onreadystatechange = function(url, state) { if (state == 4) { this.get(' _resp ').call(this, xmlHttp, …); … var _changer = function(req, url) { return function() { req. OnReadyStateChange (url, …); … var doRequest = function(url) { // [,data] // $assert(this.get('async'), ['need async!']); var xmlHttp = 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 ); } });](https://image.slidesharecdn.com/random-100512082335-phpapp01/85/-13-320.jpg)
![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);](https://image.slidesharecdn.com/random-100512082335-phpapp01/85/-15-320.jpg)
More Related Content
What's hot (14)
Viewers also liked (20)
More from 裕波 周 (18)
![彪叔 [2010]webrebuild](https://cdn.slidesharecdn.com/ss_thumbnails/2010webrebuild-100828150352-phpapp01-thumbnail.jpg?width=560&fit=bounds)
从问题开始,前端，架构、框架与库的实战
- 1. 前端架构、框架与库的实战 周爱民 愚公 aimingoo [email_address] aimingoo.spaces.live.com … .
- 2. 架构素质的三个方面：思想、方法与基础。 架构 = ？ 有感、有理、有道：你在哪里？ 我们在哪里？ 什么是真相？ 架构，把握问题的关键，平衡设计。
- 3. 架构，把握问题的关键，平衡设计。 把握 问题 关键 平衡 设计 问题？ 设计？ 架构？
- 4. /* please sort first 如果找到返回查找值所在索引 否则返回 -(x+1) ( 插入点 x : , -(x+1) 防止 x=0 的插入点 与 找到的情况矛盾 )) 则判断某值是否存在只需判断 返回值 >=0 即可 */ Array.prototype.binarySearch = function(v){ var l = 0; var h = this.length-1; while (l<=h) { // 注：位操作 javascript 不一定提高效率 var m = (l+h)>>>1; if (this[m]===v) { return m; } if (this[m]>v) { h = m-1; } else { l = m+1; } } return -(l+1); }
- 5. ?
- 6. function( url ) { with (new XMLHttpRequest()) return open("GET", url , false), send(null), responseText ; }
- 7. 我们能不能重用它？ 作为代码行重用 作为函数调用重用 …… 我们能不能控制它？ 环境限制 / 兼容性？
- 8. function HttpGetMachine () { Attribute(this, 'XMLHTTP', null, 'rw'); Attribute(this, 'METHOD', 'GET', 'r'); this. OnStateChange = TMachineStateChange; THttpGetMachine = Class(TObject, 'HttpGetMachine'); var onreadystatechange = function() { var xmlHttp = this.get('XMLHTTP'); this.OnStateChange(xmlHttp.readyState); … var doStateChange = function(state) { … } this.Create = function() { this.data = null; this.pool = null; this. OnStateChange .add( doStateChange ); this.set(‘XMLHTTP’, …).onreadystatechange = onreadysta… … } ？ ？
- 9. 一些需求 应用层的代码难于控制整个 HTTP 请求的全程 只支持特定的通讯协议 对 Pool 有过于明显的依赖 … 问题： 抽象只表达了应用的需要，而非对核心功能的封装
- 10. response = (new Ajax).get(url); 方案： 设所有的调用都可以使用 OnResponse 的方式返回 . new Ajax(url).onreadystatechange = function( response ) { ... }
- 11. THttpRequest = Class(TObject, function() { Attribute(this, 'XMLHTTPOBJECT', 'MSXML2.XMLHTTP', 'rw'); Attribute(this, 'XMLHTTP', null, 'rw'); Attribute(this, 'METHOD', 'GET', 'r'); Attribute(this, 'format', 'TEXT', 'r'); // 'XML',‘BODY‘, … Attribute(this, 'async', false, 'r'); // user, pass, … … this. OnSetRequestHeader = NullFunction; this. OnResponse = NullFunction; Attribute(this, ' _open ', function(ajx, args) { ajx. open (this.get('METHOD'), args[0], this.get('async'),… this. OnSetRequestHeader (ajx, args); }, 'r'); Attribute(this, ' _send ', function(ajx, args) { ajx. send (); }, 'r'); Attribute(this, ' _resp ', function(resp, url, fmt) { var FMT = {XML: 'responseXML', TEXT: 'responseText', …}; var data = resp[FMT[fmt]]; this. OnResponse (url, {format: fmt, data: data}); return data; }, 'r');
- 12. var doRequest = function(url) { // [,data] // $assert(!this.get('async'), ['need not async!']); var xmlHttp = this.get('XMLHTTP'); this.get(' _open ').call(this, xmlHttp, arguments); this.get(' _send ').call(this, xmlHttp, arguments); this.get(' _resp ').call(this, xmlHttp, …); } var getResult = 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 ; } });
- 13. THttpRequestAsync = Class(THttpRequest, function() { var onreadystatechange = function(url, state) { if (state == 4) { this.get(' _resp ').call(this, xmlHttp, …); … var _changer = function(req, url) { return function() { req. OnReadyStateChange (url, …); … var doRequest = function(url) { // [,data] // $assert(this.get('async'), ['need async!']); var xmlHttp = 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 ); } });
- 14. IHttpRequestAsync = function() { this.getResult = this.OnResponse = this.OnSetRequestHeader = this.OnReadyStateChange = Abstract } IHttpRequest = function() { this.getResult = this.OnResponse = this.OnSetRequestHeader = Abstract }
- 15. 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);
- 16. // IHttpGet = IHttpPost = IHttpRequest THttpGet = Class(THttpRequest, NullFunction); THttpPost = Class(THttpRequest, _POST); // IHttpGetAsync = IHttpPostAsync = IHttpRequestAsync THttpGetAsync = Class(THttpRequestAsync, NullFunction); THttpPostAsync = Class(THttpRequestAsync, _POST); THttpRequest THttpRequestAsync THttpGet THttpPost THttpGetAsync THttpPostAsync
- 17. 有没有分析过程？ 有没有设计过程？ 有没有架构过程？ …… 问题： 我们还有什么没有做？
- 18. ?
- 19. 浏览器展现 某页的 URL 是否下载？ 下载 保存 合法的 POST 信息 下载的批次 本地信息
- 20. 浏览器展现 某页的 URL 是否下载？ 下载 保存 合法的 POST 信息 下载的批次 本地信息 ssreader.exe HTTPAnalyzer Monitor.js Filter.js ProcessesPool.js SSGetter.js
- 21. /* a Framework for the system! /__events__. fire-onMonitorUpdate_in_HTA ______ SSGetter.js _____ \ __|__ || / \ / \ \/ / \ \/_ \ monitor -> filter -> onGetDownloadItem -> downIt -> pool .push--* */
- 22. TPool 1 * THttpGetMachine TMachine TFileMachine THttpMachine HttpGet HttpPost HttpMachine
- 23. TPool 1 * THttpGetMachine TMachine TFileMachine THttpMachine HttpGet HttpPost HttpMachine THttpRequest THttpRequestAsync THttpGet THttpPost THttpGetAsync THttpPostAsync
- 24. THttpGetMachine HttpGet HttpPost HttpMachine TMachine TRequestMachine TPdgHttpGetMachine
- 25. function Machine() { Attribute(this, 'Core', null, 'rw'); this.sleep = function() { this.OnStateChange('sleep'); } this.stop = function() { this.get('Core').stop(); this.sleep(); } …
- 26. function RequestMachine() { var doStateChange = 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)); } }
- 27. function PdgHttpGetMachine() { var doQueryExist = 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, …)); } }
- 28. IRequestMachine = function() { // IMachine based } IMachine = function() { // this.data = // this.pool = null; this.sleep = this.stop = this.OnStateChange = Abstract; } IPdgHttpGetMachine = function() { // IMachine based this.getStatus = Abstract }
- 29. 1 * 1 1 THttpRequest TMachine TRequestMachine TPool THttpRequestAsync THttpGet THttpPost THttpGetAsync THttpPostAsync TPdgHttpGetMachine Core
- 30. 为什么我们讲这两种架构方法？ 二者的关系是什么？ 框架处理系统的哪个部分？库呢？ 共性与本质 《对于架构的三句话》中有关 COM 的部分 《为脚本语言平反 (2)(3) 》中有关 DSL 部分 问题： 我们还有什么没有做？
- 31. ?
- 32. 输入层 调度层 处理层 ssreader.exe HTTPAnalyzer Monitor.js ProcessesPool.js TPool SSGetter.js Filter.js User-Request Batch Push MergeAndOutput
- 33. 识别类 TObject 处理类 TMachine pool.push( data ) pool.OnRequireNew( mac ) pool.OnStateChange( mac , data ) pool.stop() 处理层 输入层 调度层 数据类 TObject TPool.Create( MacClass ) 调度类 TPool
- 34. 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)); } }
- 35. 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() }
- 36. data = { src: …, param: … }; function MyWatch() { this.start = function() { this.pool.push(data)); } function MyMachine(cls) { var doStateChange = 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) } }); }); }
- 37. app = TPooledApp.Create( TPool, Class(TObject, ‘MyWatch’), Class(TMachine, ‘MyMachine’) ); app.start();
- 38. ?
- 39. 我们在追求“什么样的”或“目标是什么的”架构？ 我们在架构“什么”？ 我们在为什么做？ …… 问题： 我们还有什么没有做？
- 40. ?
- 41. ?
- 42. End.
Editor's Notes
- #31: 对于架构的三句话 http://v.ku6.com/show/4CzbEQbFHlG0YaVs.html http://aimingoo.spaces.live.com/ 为脚本语言平反 (2)(3) http://blog.csdn.net/aimingoo/archive/2009/09/08/4532496.aspx http://blog.csdn.net/aimingoo/archive/2009/09/08/4532567.aspx