Your SlideShare is downloading. ×
0
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
从问题开始,谈前端架构
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

从问题开始,谈前端架构

1,100

Published on

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

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

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,100
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
1
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 从问题开始<br />前端架构、框架与库的实战<br />周爱民<br />愚公<br />aimingoo<br />aiming@gmail.com<br />aimingoo.spaces.live.com<br />….<br />
  • 2. 回顾<br /><ul><li>架构素质的三个方面:思想、方法与基础。
  • 3. 架构 = ?
  • 4. 有感、有理、有道:你在哪里?
  • 5. 我们在哪里?
  • 6. 什么是真相?
  • 7. 架构,把握问题的关键,平衡设计。</li></li></ul><li>什么是问题?<br /><ul><li>架构,把握问题的关键,平衡设计。
  • 8. 把握
  • 9. 问题
  • 10. 关键
  • 11. 平衡
  • 12. 设计
  • 13. 问题?
  • 14. 设计?
  • 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. 库<br />
  • 17. 一行ajax代码<br />function(url) {<br /> with (new XMLHttpRequest())<br /> return open("GET", url, false), send(null), responseText;<br />}<br />
  • 18. 问题是什么?<br /><ul><li>我们能不能重用它?
  • 19. 作为代码行重用
  • 20. 作为函数调用重用
  • 21. ……
  • 22. 我们能不能控制它?
  • 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. 问题是什么?<br /><ul><li>一些需求
  • 25. 应用层的代码难于控制整个HTTP请求的全程
  • 26. 只支持特定的通讯协议
  • 27. 对Pool有过于明显的依赖
  • 28. …
  • 29. 问题:
  • 30. 抽象只表达了应用的需要,而非对核心功能的封装</li></li></ul><li>疑难<br /><ul><li>response = (new Ajax).get(url);
  • 31. new Ajax(url).onreadystatechange = function(response) { ...}
  • 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. 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. 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. 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. 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. 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. 发生了什么?<br /><ul><li>有没有分析过程?
  • 39. 有没有设计过程?
  • 40. 有没有架构过程?
  • 41. ……
  • 42. 问题:我们还有什么没有做?</li></li></ul><li>库与框架<br />
  • 43. ssdownload的分析<br />浏览器展现<br />某页的URL<br />是否下载?<br />下载<br />合法的POST信息<br />保存<br />下载的批次<br />本地信息<br />
  • 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. 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. 进一步的框架设计(qomo v1)<br />TPool<br />TMachine<br />1<br />*<br />TFileMachine<br />THttpMachine<br />THttpGetMachine<br />HttpGet<br />HttpPost<br />HttpMachine<br />
  • 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. 进一步的框架设计(qomo v2)<br />THttpGetMachine<br />HttpGet<br />HttpPost<br />TMachine<br />HttpMachine<br />TRequestMachine<br />TPdgHttpGetMachine<br />
  • 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. 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. 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. 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. 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. 框架与库的关系?<br /><ul><li>为什么我们讲这两种架构方法?
  • 55. 二者的关系是什么?
  • 56. 框架处理系统的哪个部分?库呢?
  • 57. 共性与本质
  • 58. 《关于架构的三句话》中有关COM的部分
  • 59. 《为脚本语言平反(2)(3)》中有关DSL部分
  • 60. 问题:我们还有什么没有做?</li></li></ul><li>系统框架<br />
  • 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. 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. 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. 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. 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. PWM框架的应用<br />app = TPooledApp.Create(<br />TPool,<br /> Class(TObject, ‘MyWatch’),<br />Class(TMachine, ‘MyMachine’)<br />);<br />app.start(); <br />
  • 67. 反思<br />
  • 68. 发生了什么?<br /><ul><li>我们在追求“什么样的”或“目标是什么的”架构?
  • 69. 我们在架构“什么”?
  • 70. 我们在为什么做?
  • 71. ……
  • 72. 问题:我们还有什么没有做?</li></li></ul><li>大型系统的三个视角<br />
  • 73. 架构设计的主要视角<br />
  • 74. End.<br />

×