Successfully reported this slideshow.
从问题开始<br />前端架构、框架与库的实战<br />周爱民<br />愚公<br />aimingoo<br />aiming@gmail.com<br />aimingoo.spaces.live.com<br />….<br />
回顾<br /><ul><li>架构素质的三个方面:思想、方法与基础。
架构 = ?
有感、有理、有道:你在哪里?
我们在哪里?
什么是真相?
架构,把握问题的关键,平衡设计。</li></li></ul><li>什么是问题?<br /><ul><li>架构,把握问题的关键,平衡设计。
把握
问题
关键
平衡
设计
问题?
设计?
架构?</li></li></ul><li>现实往往没有那么条理<br />/*<br />  please sort first<br />如果找到返回查找值所在索引<br />  否则返回-(x+1) (插入点 x : , -(x+1) 防...
库<br />
一行ajax代码<br />function(url) {<br />  with (new XMLHttpRequest())<br />    return open("GET", url, false), send(null), resp...
问题是什么?<br /><ul><li>我们能不能重用它?
作为代码行重用
作为函数调用重用
……
我们能不能控制它?
环境限制/兼容性?</li></li></ul><li>Qomo v1的设计<br />function HttpGetMachine () {<br />Attribute(this, 'XMLHTTP', null, 'rw');<br /...
问题是什么?<br /><ul><li>一些需求
应用层的代码难于控制整个HTTP请求的全程
只支持特定的通讯协议
对Pool有过于明显的依赖
…
问题:
抽象只表达了应用的需要,而非对核心功能的封装</li></li></ul><li>疑难<br /><ul><li>response = (new Ajax).get(url);
new Ajax(url).onreadystatechange = function(response) {  ...}
方案:设所有的调用都可以使用OnResponse的方式返回.</li></li></ul><li>Qomo V2的设计<br />THttpRequest = Class(TObject, function() {<br />  Attribu...
Qomo V2的设计<br />vardoRequest = function(url) {  // [,data]<br />// $assert(!this.get('async'), ['need not async!']);<br />...
Qomo V2的设计<br />THttpRequestAsync = Class(THttpRequest, function() {<br />varonreadystatechange = function(url, state) {<b...
Qomo V2的设计<br />IHttpRequest = function() {<br />this.getResult = <br />this.OnResponse =<br />this.OnSetRequestHeader = A...
Qomo V2的设计<br />function _POST() {<br />  _set('METHOD', 'POST');<br />  _set('_send', function(ajx, args) {<br />ajx.send...
Qomo V2的设计<br />// IHttpGet = IHttpPost = IHttpRequest<br />THttpGet = Class(THttpRequest, NullFunction);<br />THttpPost =...
发生了什么?<br /><ul><li>有没有分析过程?
有没有设计过程?
有没有架构过程?
……
问题:我们还有什么没有做?</li></li></ul><li>库与框架<br />
Upcoming SlideShare
Loading in …5
×

从问题开始,谈前端架构

1,364 views

Published on

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

Published in: Technology
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

从问题开始,谈前端架构

  1. 1. 从问题开始<br />前端架构、框架与库的实战<br />周爱民<br />愚公<br />aimingoo<br />aiming@gmail.com<br />aimingoo.spaces.live.com<br />….<br />
  2. 2. 回顾<br /><ul><li>架构素质的三个方面:思想、方法与基础。
  3. 3. 架构 = ?
  4. 4. 有感、有理、有道:你在哪里?
  5. 5. 我们在哪里?
  6. 6. 什么是真相?
  7. 7. 架构,把握问题的关键,平衡设计。</li></li></ul><li>什么是问题?<br /><ul><li>架构,把握问题的关键,平衡设计。
  8. 8. 把握
  9. 9. 问题
  10. 10. 关键
  11. 11. 平衡
  12. 12. 设计
  13. 13. 问题?
  14. 14. 设计?
  15. 15. 架构?</li></li></ul><li>现实往往没有那么条理<br />/*<br /> please sort first<br />如果找到返回查找值所在索引<br /> 否则返回-(x+1) (插入点 x : , -(x+1) 防止 x=0的插入点 与 找到的情况矛盾))<br />则判断某值是否存在只需判断 返回值 >=0 即可<br />*/<br />Array.prototype.binarySearch = function(v){<br />var l = 0;<br />var h = this.length-1;<br /> while (l<=h) {<br /> //注:位操作javascript不一定提高效率<br />var m = (l+h)>>>1;<br /> if (this[m]===v) {<br /> return m;<br /> }<br /> if (this[m]>v) {<br /> h = m-1;<br /> } else {<br /> l = m+1;<br /> }<br /> }<br /> return -(l+1); <br />}<br />
  16. 16. 库<br />
  17. 17. 一行ajax代码<br />function(url) {<br /> with (new XMLHttpRequest())<br /> return open("GET", url, false), send(null), responseText;<br />}<br />
  18. 18. 问题是什么?<br /><ul><li>我们能不能重用它?
  19. 19. 作为代码行重用
  20. 20. 作为函数调用重用
  21. 21. ……
  22. 22. 我们能不能控制它?
  23. 23. 环境限制/兼容性?</li></li></ul><li>Qomo v1的设计<br />function HttpGetMachine () {<br />Attribute(this, 'XMLHTTP', null, 'rw');<br />Attribute(this, 'METHOD', 'GET', 'r');<br />this.OnStateChange = TMachineStateChange;<br />vardoStateChange = function(state) {<br /> …<br />}<br />varonreadystatechange = function() {<br />varxmlHttp = this.get('XMLHTTP');<br />this.OnStateChange(xmlHttp.readyState);<br />…<br />?<br />?<br />this.Create = function() {<br />this.data = null;<br />this.pool = null;<br />this.OnStateChange.add(doStateChange);<br />this.set(‘XMLHTTP’, …).onreadystatechange = onreadysta…<br />…<br />}<br />THttpGetMachine = Class(TObject, 'HttpGetMachine');<br />
  24. 24. 问题是什么?<br /><ul><li>一些需求
  25. 25. 应用层的代码难于控制整个HTTP请求的全程
  26. 26. 只支持特定的通讯协议
  27. 27. 对Pool有过于明显的依赖
  28. 28.
  29. 29. 问题:
  30. 30. 抽象只表达了应用的需要,而非对核心功能的封装</li></li></ul><li>疑难<br /><ul><li>response = (new Ajax).get(url);
  31. 31. new Ajax(url).onreadystatechange = function(response) { ...}
  32. 32. 方案:设所有的调用都可以使用OnResponse的方式返回.</li></li></ul><li>Qomo V2的设计<br />THttpRequest = Class(TObject, function() {<br /> Attribute(this, 'XMLHTTPOBJECT', 'MSXML2.XMLHTTP', 'rw');<br /> Attribute(this, 'XMLHTTP', null, 'rw');<br /> Attribute(this, 'METHOD', 'GET', 'r');<br /> Attribute(this, 'format', 'TEXT', 'r'); // 'XML',‘BODY‘, …<br /> Attribute(this, 'async', false, 'r'); // user, pass, …<br /> …<br />this.OnSetRequestHeader = NullFunction;<br />this.OnResponse = NullFunction;<br /> Attribute(this, '_open', function(ajx, args) {<br />ajx.open(this.get('METHOD'), args[0], this.get('async'),…<br />this.OnSetRequestHeader(ajx, args);<br /> }, 'r');<br /> Attribute(this, '_send', function(ajx, args) {<br />ajx.send();<br /> }, 'r');<br /> Attribute(this, '_resp', function(resp, url, fmt) {<br />var FMT = {XML: 'responseXML', TEXT: 'responseText', …};<br />var data = resp[FMT[fmt]];<br />this.OnResponse(url, {format: fmt, data: data});<br /> return data;<br /> }, 'r'); <br />
  33. 33. Qomo V2的设计<br />vardoRequest = function(url) { // [,data]<br />// $assert(!this.get('async'), ['need not async!']);<br />varxmlHttp = this.get('XMLHTTP');<br />this.get('_open').call(this, xmlHttp, arguments);<br />this.get('_send').call(this, xmlHttp, arguments);<br />this.get('_resp').call(this, xmlHttp, …);<br /> }<br />vargetResult = function(url) {<br /> return doRequest.apply(this, arguments);<br /> }<br />this.Create = function() {<br />var AJAX = this.get('XMLHTTPOBJECT');<br />this.set('XMLHTTP', (typeof AJAX=='function')<br /> ? new AJAX() : new ActiveXObject(AJAX));<br />this.getResult = getResult;<br /> }<br />});<br />
  34. 34. Qomo V2的设计<br />THttpRequestAsync = Class(THttpRequest, function() {<br />varonreadystatechange = function(url, state) {<br /> if (state == 4) {<br />this.get('_resp').call(this, xmlHttp, …);<br /> …<br />var _changer = function(req, url) {<br /> return function() {<br />req.OnReadyStateChange(url, …);<br /> …<br />vardoRequest = function(url) { // [,data]<br /> // $assert(this.get('async'), ['need async!']);<br />varxmlHttp = this.get('XMLHTTP');<br />this.get('_open').call(this, xmlHttp, arguments);<br />xmlHttp.onreadystatechange = _changer(this, url);<br />this.get('_send').call(this, xmlHttp, arguments);<br /> }<br />this.OnReadyStateChange = NullFunction;<br />this.Create = function() {<br />this.inherited();<br />this.getResult = …; // rewrite, call doRequest<br />this.OnReadyStateChange.add(onreadystatechange);<br /> }<br />});<br />
  35. 35. Qomo V2的设计<br />IHttpRequest = function() {<br />this.getResult = <br />this.OnResponse =<br />this.OnSetRequestHeader = Abstract<br />}<br />IHttpRequestAsync = function() {<br />this.getResult = <br />this.OnResponse =<br />this.OnSetRequestHeader =<br />this.OnReadyStateChange = Abstract<br />}<br />
  36. 36. Qomo V2的设计<br />function _POST() {<br /> _set('METHOD', 'POST');<br /> _set('_send', function(ajx, args) {<br />ajx.send(args[1] || '') }); }<br /> }<br />/*<br />this.Create = function() { …<br />*/<br />}<br />THttpPost = Class(THttpRequest, _POST);<br />THttpPostAsync = Class(THttpRequestAsync, _POST);<br />
  37. 37. Qomo V2的设计<br />// IHttpGet = IHttpPost = IHttpRequest<br />THttpGet = Class(THttpRequest, NullFunction);<br />THttpPost = Class(THttpRequest, _POST);<br />// IHttpGetAsync = IHttpPostAsync = IHttpRequestAsync<br />THttpGetAsync = Class(THttpRequestAsync, NullFunction);<br />THttpPostAsync = Class(THttpRequestAsync, _POST);<br />THttpRequest<br />THttpGet<br />THttpPost<br />THttpRequestAsync<br />THttpGetAsync<br />THttpPostAsync<br />
  38. 38. 发生了什么?<br /><ul><li>有没有分析过程?
  39. 39. 有没有设计过程?
  40. 40. 有没有架构过程?
  41. 41. ……
  42. 42. 问题:我们还有什么没有做?</li></li></ul><li>库与框架<br />
  43. 43. ssdownload的分析<br />浏览器展现<br />某页的URL<br />是否下载?<br />下载<br />合法的POST信息<br />保存<br />下载的批次<br />本地信息<br />
  44. 44. ssdownload的设计<br />ssreader.exe<br />浏览器展现<br />HTTPAnalyzer<br />Monitor.js<br />某页的URL<br />Filter.js<br />ProcessesPool.js<br />是否下载?<br />下载<br />保存<br />SSGetter.js<br />合法的POST信息<br />下载的批次<br />本地信息<br />
  45. 45. ssdownload的实施<br />/* a Framework for the system!<br /> /__events__.<br /> fire-onMonitorUpdate_in_HTA ______SSGetter.js_____ __|__<br /> || / / <br /> / / /_ <br />monitor -> filter -> onGetDownloadItem -> downIt -> pool.push--*<br />*/<br />
  46. 46. 进一步的框架设计(qomo v1)<br />TPool<br />TMachine<br />1<br />*<br />TFileMachine<br />THttpMachine<br />THttpGetMachine<br />HttpGet<br />HttpPost<br />HttpMachine<br />
  47. 47. 进一步的框架设计(qomo v2)<br />TPool<br />TMachine<br />1<br />*<br />TFileMachine<br />THttpMachine<br />THttpGetMachine<br />THttpGet<br />HttpGet<br />THttpRequest<br />THttpPost<br />HttpPost<br />THttpPostAsync<br />THttpRequestAsync<br />HttpMachine<br />THttpGetAsync<br />
  48. 48. 进一步的框架设计(qomo v2)<br />THttpGetMachine<br />HttpGet<br />HttpPost<br />TMachine<br />HttpMachine<br />TRequestMachine<br />TPdgHttpGetMachine<br />
  49. 49. Qomo V2 – Machine 的对象设计(1/3)<br />function Machine() {<br /> Attribute(this, 'Core', null, 'rw');<br />this.sleep = function() {<br />this.OnStateChange('sleep');<br /> }<br />this.stop = function() {<br />this.get('Core').stop();<br />this.sleep();<br /> }<br />…<br />
  50. 50. Qomo V2 – Machine 的对象设计(2/3)<br />function RequestMachine() {<br />vardoStateChange = function(state) {<br /> if (state=='resume') {<br />this.get('Core').getResult( … ); // src, data<br /> }<br /> }<br />this.Create = function(cls) {<br />this.inherited();<br />this.OnStateChange.add(doStateChange);<br />this.set('Core', cls.Create(this));<br /> }<br />}<br />
  51. 51. Qomo V2 – Machine 的对象设计(3/3)<br />function PdgHttpGetMachine() {<br />vardoQueryExist = function(state) {<br /> if (state == 'resume') …<br /> }<br />this.getStatus = function() {<br /> return this.get('Core').get('XMLHTTP').status;<br /> }<br />this.Create = function() {<br />this.OnStateChange.add(doQueryExist);<br />this.inherited('Create', Class(THttpGetAsyncMac, …));<br /> }<br />}<br />
  52. 52. Qomo V2 – Machine 的接口设计<br />IMachine = function() {<br />// this.data =<br />// this.pool = null;<br />this.sleep = <br />this.stop =<br />this.OnStateChange = Abstract;<br />}<br />IRequestMachine = function() {<br /> // IMachine based<br />}<br />IPdgHttpGetMachine = function() {<br /> // IMachine based<br />this.getStatus = Abstract<br />}<br />
  53. 53. Qomo V2 – Pool/Mac类库设计的汇总<br />1<br />1<br />1<br />*<br />TMachine<br />TPool<br />Core<br />THttpRequest<br />TRequestMachine<br />THttpRequestAsync<br />THttpGet<br />THttpPost<br />THttpGetAsync<br />THttpPostAsync<br />TPdgHttpGetMachine<br />
  54. 54. 框架与库的关系?<br /><ul><li>为什么我们讲这两种架构方法?
  55. 55. 二者的关系是什么?
  56. 56. 框架处理系统的哪个部分?库呢?
  57. 57. 共性与本质
  58. 58. 《关于架构的三句话》中有关COM的部分
  59. 59. 《为脚本语言平反(2)(3)》中有关DSL部分
  60. 60. 问题:我们还有什么没有做?</li></li></ul><li>系统框架<br />
  61. 61. SSDownload/PackageBuy – 应用框架<br />ssreader.exe<br />User-Request<br />HTTPAnalyzer<br />Monitor.js<br />Batch Push<br />Filter.js<br />输入层<br />ProcessesPool.js<br />TPool<br />调度层<br />MergeAndOutput<br />SSGetter.js<br />处理层<br />
  62. 62. SSDownload/PackageBuy – 应用框架<br />识别类<br />TObject<br />TPool.Create(MacClass)<br />pool.OnRequireNew(mac)<br />数据类TObject<br />pool.push(data)<br />输入层<br />调度类<br />TPool<br />调度层<br />pool.stop()<br />处理层<br />pool.OnStateChange(mac,data)<br />处理类<br />TMachine<br />
  63. 63. SSDownload/PackageBuy – 应用框架<br />function PoolApp() {<br /> Attribute(this, ‘pool’);<br /> Attribute(this, ‘watcher’);<br />this.start = function() {<br />this.get(‘watcher’).start(); }<br />// Create(PoolClass, WatchClass, MachineClass);<br />this.Create = function(P,W,M) {<br />this.set(‘watch’, W.Create()).pool = <br />this.set(‘pool’, P.Create(M));<br /> }<br />}<br />
  64. 64. PWM框架的应用<br />IPool = function() {<br />this.push = Abstract; // push(data)<br />this.stop = Abstract; // stop()<br />this.OnStateChange = Abstract; // OnStateChange(mac,data)<br />this.Create = Abstract; // Create(MachineClass)<br />}<br />IWatch = function() {<br />// this.pool = null;<br />this.start = Abstract; // start()<br />}<br />
  65. 65. PWM框架的应用<br />data = { src: …, param: … };<br />function MyWatch() {<br />this.start = function() { this.pool.push(data));<br />}<br />function MyMachine(cls) {<br />vardoStateChange = function(state) {<br /> if (state == ‘resume’) this.get(‘Core’).process(this.data))<br /> }<br />this.Create = function() {<br />this.inherited();<br />this.OnStateChange.add(doStateChange);<br />this.set('Core', {<br />process: function(data) { alert(data.src) }<br /> });<br /> });<br />}<br />
  66. 66. PWM框架的应用<br />app = TPooledApp.Create(<br />TPool,<br /> Class(TObject, ‘MyWatch’),<br />Class(TMachine, ‘MyMachine’)<br />);<br />app.start(); <br />
  67. 67. 反思<br />
  68. 68. 发生了什么?<br /><ul><li>我们在追求“什么样的”或“目标是什么的”架构?
  69. 69. 我们在架构“什么”?
  70. 70. 我们在为什么做?
  71. 71. ……
  72. 72. 问题:我们还有什么没有做?</li></li></ul><li>大型系统的三个视角<br />
  73. 73. 架构设计的主要视角<br />
  74. 74. End.<br />

×