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

1. 前端架构、框架与库的实战 周爱民 愚公 aimingoo [email_address] aimingoo.spaces.live.com … .

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

6. function( url ) { with (new XMLHttpRequest()) return open(&quot;GET&quot;, url , false), send(null), responseText ; }

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… … } ？ ？

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

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

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

42. End.