Your SlideShare is downloading. ×
从问题开始,前端,架构、框架与库的实战
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

1,248
views

Published on

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

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

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,248
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
3
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
  • 关于架构的三句话 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
  • Transcript

    • 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(&quot;GET&quot;, 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.