从问题开始,前端,架构、框架与库的实战

1,492 views

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,492
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
47
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • 关于架构的三句话 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
  • 从问题开始,前端,架构、框架与库的实战

    1. 1. 前端架构、框架与库的实战 周爱民 愚公 aimingoo [email_address] aimingoo.spaces.live.com … .
    2. 2. <ul><li>架构素质的三个方面:思想、方法与基础。 </li></ul><ul><li>架构 = ? </li></ul><ul><li>有感、有理、有道:你在哪里? </li></ul><ul><li>我们在哪里? </li></ul><ul><li>什么是真相? </li></ul><ul><li>架构,把握问题的关键,平衡设计。 </li></ul>
    3. 3. <ul><li>架构,把握问题的关键,平衡设计。 </li></ul><ul><ul><li>把握 </li></ul></ul><ul><ul><li>问题 </li></ul></ul><ul><ul><li>关键 </li></ul></ul><ul><ul><li>平衡 </li></ul></ul><ul><ul><li>设计 </li></ul></ul><ul><li>问题? </li></ul><ul><li>设计? </li></ul><ul><li>架构? </li></ul>
    4. 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(&quot;GET&quot;, url , false), send(null), responseText ; }
    6. 7. <ul><li>我们能不能重用它? </li></ul><ul><ul><li>作为代码行重用 </li></ul></ul><ul><ul><li>作为函数调用重用 </li></ul></ul><ul><ul><li>…… </li></ul></ul><ul><li>我们能不能控制它? </li></ul><ul><li>环境限制 / 兼容性? </li></ul>
    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… … } ? ?
    8. 9. <ul><li>一些需求 </li></ul><ul><ul><li>应用层的代码难于控制整个 HTTP 请求的全程 </li></ul></ul><ul><ul><li>只支持特定的通讯协议 </li></ul></ul><ul><ul><li>对 Pool 有过于明显的依赖 </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>问题: </li></ul><ul><ul><li>抽象只表达了应用的需要,而非对核心功能的封装 </li></ul></ul>
    9. 10. <ul><li>response = (new Ajax).get(url); </li></ul><ul><li>方案: 设所有的调用都可以使用 OnResponse 的方式返回 . </li></ul><ul><li>new Ajax(url).onreadystatechange = function( response ) { ... } </li></ul>
    10. 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');
    11. 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 ; } });
    12. 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 ); } });
    13. 14. IHttpRequestAsync = function() { this.getResult = this.OnResponse = this.OnSetRequestHeader = this.OnReadyStateChange = Abstract } IHttpRequest = function() { this.getResult = this.OnResponse = this.OnSetRequestHeader = Abstract }
    14. 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);
    15. 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
    16. 17. <ul><li>有没有分析过程? </li></ul><ul><li>有没有设计过程? </li></ul><ul><li>有没有架构过程? </li></ul><ul><li>…… </li></ul><ul><li>问题: 我们还有什么没有做? </li></ul>
    17. 19. 浏览器展现 某页的 URL 是否下载? 下载 保存 合法的 POST 信息 下载的批次 本地信息
    18. 20. 浏览器展现 某页的 URL 是否下载? 下载 保存 合法的 POST 信息 下载的批次 本地信息 ssreader.exe HTTPAnalyzer Monitor.js Filter.js ProcessesPool.js SSGetter.js
    19. 21. /* a Framework for the system! /__events__. fire-onMonitorUpdate_in_HTA ______ SSGetter.js _____ __|__ || / / / / /_ monitor -> filter -> onGetDownloadItem -> downIt -> pool .push--* */
    20. 22. TPool 1 * THttpGetMachine TMachine TFileMachine THttpMachine HttpGet HttpPost HttpMachine
    21. 23. TPool 1 * THttpGetMachine TMachine TFileMachine THttpMachine HttpGet HttpPost HttpMachine THttpRequest THttpRequestAsync THttpGet THttpPost THttpGetAsync THttpPostAsync
    22. 24. THttpGetMachine HttpGet HttpPost HttpMachine TMachine TRequestMachine TPdgHttpGetMachine
    23. 25. function Machine() { Attribute(this, 'Core', null, 'rw'); this.sleep = function() { this.OnStateChange('sleep'); } this.stop = function() { this.get('Core').stop(); this.sleep(); } …
    24. 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)); } }
    25. 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, …)); } }
    26. 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 }
    27. 29. 1 * 1 1 THttpRequest TMachine TRequestMachine TPool THttpRequestAsync THttpGet THttpPost THttpGetAsync THttpPostAsync TPdgHttpGetMachine Core
    28. 30. <ul><li>为什么我们讲这两种架构方法? </li></ul><ul><ul><li>二者的关系是什么? </li></ul></ul><ul><ul><li>框架处理系统的哪个部分?库呢? </li></ul></ul><ul><li>共性与本质 </li></ul><ul><ul><li>《关于架构的三句话》中有关 COM 的部分 </li></ul></ul><ul><ul><li>《为脚本语言平反 (2)(3) 》中有关 DSL 部分 </li></ul></ul><ul><li>问题: 我们还有什么没有做? </li></ul>
    29. 32. 输入层 调度层 处理层 ssreader.exe HTTPAnalyzer Monitor.js ProcessesPool.js TPool SSGetter.js Filter.js User-Request Batch Push MergeAndOutput
    30. 33. 识别类 TObject 处理类 TMachine pool.push( data ) pool.OnRequireNew( mac ) pool.OnStateChange( mac , data ) pool.stop() 处理层 输入层 调度层 数据类 TObject TPool.Create( MacClass ) 调度类 TPool
    31. 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)); } }
    32. 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() }
    33. 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) } }); }); }
    34. 37. app = TPooledApp.Create( TPool, Class(TObject, ‘MyWatch’), Class(TMachine, ‘MyMachine’) ); app.start();
    35. 39. <ul><li>我们在追求“什么样的”或“目标是什么的”架构? </li></ul><ul><li>我们在架构“什么”? </li></ul><ul><li>我们在为什么做? </li></ul><ul><li>…… </li></ul><ul><li>问题: 我们还有什么没有做? </li></ul>
    36. 42. End.

    ×