想法与目标@H_502_7@@H_502_7@从AJAX诞生至今，就存在着Back/Forward Button和bookmark失效的问题，我以前一般提倡，一个好的AJAX应用应该不让用户有点击“Back/Forward”的想法，并且使用某种方式提供给用户一个能够记录直接产生页面的Bookmark。Windows Live Local应该是这种应用最好的典范之一，其灵活的交互，良好的界面让我在初遇时不得不眼前一亮。@H_502_7@@H_502_7@另外，我也曾经见过把后退按钮禁用的做法（其实这样对于解决问题的确不错），不过这些都似乎只是一个workaround，设法避开这个AJAX应用普遍存在的问题。似乎Gmail能够支持Back按钮，但是我惊奇的发现，在点击Back后，却不能使用Forward，所以这还不算成功的解决这个问题。那么能否解决？似乎已经有了一定的实现。@H_502_7@@H_502_7@事实上，之所以我会产生实现自己的解决方案的想法，是因为从Nikhil Kothari的Blog上看到了他的解决方案（点击这里查看）。他实现了一个HistoryControl控件，可以在页面中配合UpdatePanel使用，在一定程度上实现了对Back/Forword Button已经Bookmark的支持。但是正如他在Blog上所说的，这只是他的一个prototype。我在使用了他的演示之后，也的确发现了一些问题（演示也能从Nikhil的Blog上下载）：@H_502_7@
- HistoryControl是一个Server控件，必须配合UpdatePanel使用，并没有对于Atlas的客户端应用甚至普通的AJAX应用提供基本的支持。
- 不支持FireFox（不知为何，我在自己尝试之后觉得支持FireFox比IE容易实现）。
- 在IE里使用时，从Back和Forward的下拉框里可以看出，那些Title都成为了“Empty Page”。
- 不支持在Back和Forward下拉框中选择一项History跳转。
- 如果访问了别的站点再Back，则在IE下不支持多次回退。
- 部署麻烦。事实上我觉得很奇怪，我除了直接在他的项目中成功运行之外。部署到别的项目或者是我的空间都有问题，怎么也找不出原因，估计是文件路径问题，需要仔细读一下他的代码。
总之，这个
解决方案还很不成熟，但是我们要对Nikhil，Atlas和微软有信心，对于Back/Forward的内置
支持应该会出现在Atlas的后续版本中。
@H_
502_7@
@H_
502_7@于是我想，不如我来实现一个自己的吧，虽然我一直提倡软件复用，但是如果找不到成熟的
解决方案，那么就该发挥程序员的主观能动性了。对于我最后的实现，它有以下特点：
@H_
502_7@
@H_
502_7@
- 一个轻量级的JS解决方案。虽然我是在Atlas的基础上写的，但是只是使用了Atlas中的Sys.Timer类，很容易修改成独立于任何库的JS代码。
- 支持IE和FireFox。
- 简单的支持Back和Forward的下拉框里的Title文字，在大多数情况下不会出错。产生Nikhil的这个问题的原因在阐述我的实现时会提及。我简单地解决了这个问题，但是没有设计出完整支持title问题的完美实现。我有一些想法，似乎十分复杂，在尝试时都宣告失败。
- 支持在Back和Forword下拉框中选择一项History跳转。
- 支持Bookmark，用户可以轻松将页面加入收藏夹。
- 易于使用，部署简单。
对于我列出Nikhil的实现里的第5个问题，我想了一些办法，却依旧没有解决。现在虽然脑子里有想法，但还需要继续尝试。
@H_
502_7@
思路与设计
@H_
502_7@
@H_
502_7@AJAX是个神奇的东西。因为有了XMLHttpRequest对象，我们能够“不知不觉”地与服务器端交换数据，在改变
页面显示和行为的同时，让
用户感觉不到
页面的Reload。虽然在上个世纪微软已经在早期IE里就以ActiveX的形式提供了这个对象，并且在OWA中将其进行大量使用，但是我对于这个对象的了解却在AJAX大行其道之后。在这之前，为了达到类似AJAX的良好
用户体验，往往会在
页面中放一个隐藏的IFrame，然后通过Form向其中POST/GET数据，或者直接
修改IFrame的src
属性以达到传输数据的
效果。如果在IFrame中的
页面里写JS
代码，就能通过window.parent.XXX来
调用父级
页面的对象或
方法，并可以访问整个DOM（当然跨Frame操作的话需要两张
页面在同一个Domain中，这个就是IFrame sand
Box，如果了解Windows Live Gadget和Windows Live Spaces Gadget的人就能体会到在安全性方便IFrame起的重要作用）。
@H_
502_7@
@H_
502_7@当时发现，只要改变IFrame里的地址，不论是POST/GET还是改变其src
属性，大都会在浏览器的History里留下痕迹。这是如果
用户点击浏览器的Back按钮，则会从IFrame里的History里Load以前的
页面，当然也会按照那张
页面的逻辑解释执行其中的JS
代码。善于利用这点的话，就会产生父
页面Back/Forward的
效果。可惜当时没有去想这一点，而且当时因为某些问题，
用户点击Back/Forward时反而会产生异常的行为，甚是麻烦。
@H_
502_7@
@H_
502_7@与POST/GET相比，改变IFrame的src
属性相对简单，也容易操作。但是在IE重要注意的是，并不是任意
修改src时都会使IFrame被加入History。
修改src的时候其实改变了IFrame里的location。location是window的一个
属性，它分几个部分，这里需要提到的就是它的href，search和hash。举个例子，对于一个location“http://www.sample.com?a=b&c=d#hello”来说，location.href是“http://www.sample.com”，location.search是“?a=b&c=d”（可以看出，search其实就是Query String），location.hash是“#hello”。在IE中改变location.hash是不会影响History的，因此只有改变href与search才行。在FireFox中，改变hash值是可以影响浏览器的History，但是点击Back/Forward并不会使浏览器重新执行
页面中的JS
代码。
@H_
502_7@
@H_
502_7@
解决Back/Forward的大致方向有了，那么Bookmark呢？应该很容易将问题变成，如何要改变浏览器地址栏的值，但是不刷新
页面。还好我们有hash。所有的标识都要通过hash值来传递。
@H_
502_7@
@H_
502_7@到现在为止，应该已经能够实现了在不刷新
页面时改变浏览器的History纪录，但是如何在
用户点击Back/Forward的时候也改变
页面内容呢？我们将这个问题分为两部分考虑，依次
解决：
@H_
502_7@
@H_
502_7@
- 在用户点击浏览器的Back/Forward或者选择History中某一项时改变浏览器的地址栏信息。
- 根据地址栏信息的改变得到信息，然后修改页面的内容。
对于第1个问题，在FireFox下很容易解决，因为其实这是浏览器已经支持的功能。如果是IE，我们只能通过IFrame里的页面来改变父窗口的hash了。第2个问题比较麻烦，因为改变浏览器的hash值并不会触发一个事件，所以迄今为止似乎所有的解决方案都是使用timer来不停地查询hash值有没有改变。我的解决方案也不例外。@H_502_7@@H_502_7@解释完了思路与设计，就该转向真正的实现了吧。@H_502_7@@H_502_7@@H_502_7@实现与分析@H_502_7@@H_502_7@在分析实现之前，可以先点击这里下载我的代码，或者点击这里查看例子。我实现了一个类“Jeffz.Framework.History”。先从使用讲起。@H_502_7@@H_502_7@Default.aspx
1
<%
@PageLanguage="C#"
%>
@H_502_7@
2
@H_502_7@
3
<!
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
@H_502_7@
4
@H_502_7@
5
<
script
runat
="server"
>
@H_502_7@6@H_502_7@7
</
script
>
@H_502_7@
8
@H_502_7@
9
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
@H_502_7@
10
<
head
runat
="server"
>
@H_502_7@
11
<
title
>
NavFix
</
title
>
@H_502_7@
12
<
script
language
="javascript"
>
@H_502_7@13varhistoryObj=null;@H_502_7@14varprevIoUsIndex=0;@H_502_7@15@H_502_7@16functiononChange(select)@H_502_7@17{@H_502_7@18historyObj.addHistory(select.selectedIndex);@H_502_7@19}@H_502_7@20@H_502_7@21functionsetPageData(context)@H_502_7@22{@H_502_7@23varselect=document.getElementById("select");@H_502_7@24if(context)@H_502_7@25{@H_502_7@26select.selectedIndex=context;@H_502_7@27varrequest=newSys.Net.WebRequest();@H_502_7@28request.set_url("Selection.ashx?s="+select.selectedIndex);@H_502_7@29request.completed.add(onComplete);@H_502_7@30request.invoke();@H_502_7@31}@H_502_7@32else@H_502_7@33{@H_502_7@34select.selectedIndex=0;@H_502_7@35document.getElementById("message").innerHTML="";@H_502_7@36}@H_502_7@37}@H_502_7@38@H_502_7@39functiononComplete(sender)@H_502_7@40{@H_502_7@41document.getElementById("message").innerHTML=sender.get_data();@H_502_7@42}@H_502_7@43@H_502_7@44functioninit()@H_502_7@45{@H_502_7@46historyObj=newJeffz.Framework.History(setPageData,"NavFixHelper.htm");@H_502_7@47historyObj.start();@H_502_7@48}@H_502_7@49
</
script
>
@H_502_7@
50
</
head
>
@H_502_7@
51
<
body
style
="font-family:Arial;"
>
@H_502_7@
52
<
form
id
="form1"
runat
="server"
>
@H_502_7@
53
<
div
>
@H_502_7@
54
<
atlas:ScriptManager
ID
="ScriptManager1"
runat
="server"
EnableScriptComponents
="true"
>
@H_502_7@
55
<
Scripts
>
@H_502_7@56<atlas:ScriptReferencePath="js/History.js"/>@H_502_7@57
</
Scripts
>
@H_502_7@
58
</
atlas:ScriptManager
>
@H_502_7@
59
@H_502_7@
60
<
script
type
="text/xml-script"
>
@H_502_7@61<pagexmlns:script="http://schemas.microsoft.com/xml-script/2005">@H_502_7@62<components>@H_502_7@63<applicationload="init"/>@H_502_7@64</components>@H_502_7@65</page>@H_502_7@66
</
script
>
@H_502_7@
67
@H_502_7@
68
<
select
onchange
="onChange(this)"
id
="select"
>
@H_502_7@
69
<
option
></
option
>
@H_502_7@
70
<
option
value
="1"
>
selection1
</
option
>
@H_502_7@
71
<
option
value
="2"
>
selection2
</
option
>
@H_502_7@
72
<
option
value
="3"
>
selection3
</
option
>
@H_502_7@
73
</
select
>
@H_502_7@
74
<
div
id
="message"
style
="font-size:32px;"
></
div
>
@H_502_7@
75
</
div
>
@H_502_7@
76
</
form
>
@H_502_7@
77
</
body
>
@H_502_7@
78
</
html
>
@H_502_7@
79
Selection.ashx@H_502_7@
1
<%
@WebHandlerLanguage
=
"
C#
"
Class
=
"
Selection
"
%>
@H_502_7@
2
@H_502_7@
3
using
System;@H_502_7@
4
using
System.Web;@H_502_7@
5
@H_502_7@
6
public
class
Selection:IHttpHandler
{@H_502_7@7@H_502_7@8publicvoidProcessRequest(HttpContextcontext){@H_502_7@9stringvalue=String.Format(@H_502_7@10"Youselect:<strong>selection{0}</strong>",@H_502_7@11context.Request.QueryString["s"]);@H_502_7@12@H_502_7@13context.Response.Write(value);@H_502_7@14context.Response.End();@H_502_7@15}@H_502_7@16@H_502_7@17publicboolIsReusable{@H_502_7@18get{@H_502_7@19returntrue;@H_502_7@20}@H_502_7@21}@H_502_7@22}
首先Application在Load之后会立即调用init方法，构造一个Jeffz.Framework.History对象historyObj，需要传入更新数据的回调函数，还有为了IE单独提供的NavFixHelper.htm文件的路径。然后调用对象的start方法开启对于hash值的监听。对象还提供了一个stop来停止监听。我提供这两个方法的目的是为了能够在需要时停止timer，方便调试。需要更新页面内容时，如果要保留History，那么必须通过historyObj的addHistory来提供修改所需要使用的参数context。context可以为任意对象，将会被序列化之后被放置在地址栏的hash中，然后在构造historyObj时传入的回调函数（setPageData）会被执行，context会被作为参数传入回调函数。使用historyObj时，对于页面的修改都应该放在setPageData中。在用户通过点击Back/Forward Button或者直接选择History的某一项时，地址栏中的hash会改变，回调函数会获得从当前hash得到的context作为参数，将页面更新至之前的状态。@H_502_7@@H_502_7@在setPageData被调用时，<select />的选项会被更改，然后会使用Sys.Net.WebRequest向Selection.ashx发送请求。Selection.ashx根据Query String的值来返回信息。然后Sys.Net.WebRequest对象在收到response后修改message的信息。@H_502_7@@H_502_7@在使用上就是这么简单。@H_502_7@@H_502_7@@H_502_7@History.js - Constructor@H_502_7@
1
Jeffz.Framework.History
=
function
(setDataCallback,helperPageUrl)@H_502_7@
2
{@H_502_7@3if(!setDataCallback||(typeofsetDataCallback!="function"))@H_502_7@4{@H_502_7@5thrownewError("Pleaseprovideacallbackfunction");@H_502_7@6}@H_502_7@7@H_502_7@8this.__setDataCallback=setDataCallback;@H_502_7@9this.__currentHash=null;@H_502_7@10this.__helperIFrame=null;@H_502_7@11this.__helperPageUrl=helperPageUrl;@H_502_7@12this.__runtimeTimer=null;@H_502_7@13@H_502_7@14if(Sys.Runtime.get_hostType()==Sys.HostType.InternetExplorer)@H_502_7@15{@H_502_7@16if(!helperPageUrl)@H_502_7@17{@H_502_7@18thrownewError("PleaseprovidethehelperpageforIE.");@H_502_7@19}@H_502_7@20else@H_502_7@21{@H_502_7@22varhelperIFrame=document.createElement("iframe");@H_502_7@23helperIFrame.style.display="none";@H_502_7@24document.body.appendChild(helperIFrame);@H_502_7@25this.__helperIFrame=helperIFrame;@H_502_7@26this.__reloadHelperIFrame(location.hash);@H_502_7@27}@H_502_7@28}@H_502_7@29else@H_502_7@30{@H_502_7@31this.__currentHash=location.hash;@H_502_7@32this.__execute(location.hash);@H_502_7@33}@H_502_7@34}
对于所有的私有成员，我都使用成员名前加上“__”的方法，加以区分。@H_502_7@@H_502_7@首先，传入的第一个参数setDataCallback必须是一个函数，否则将抛出异常。紧接着判断浏览器类型，如果是IE，则检测必须提供helperPageUrl，并且构造一个隐藏的IFrame来辅助实现history功能，最后通过this.__reloadHelperIFrame方法来修改地址栏里的hash。如果不是IE，那么就直接将this.__currentHash设成当前的hash加以记录，并调用this.__execute函数将hash值构造成context对象，并执行回调函数this.__setDataCallback。@H_502_7@@H_502_7@@H_502_7@History.js- __reloadHelperIFrame
1
Jeffz.Framework.History.prototype.__reloadHelperIFrame
=
function
(hash)@H_502_7@
2
{@H_502_7@3this.__helperIFrame.document.title=document.title;@H_502_7@4@H_502_7@5if(this.__helperIFrame.src&&this.__helperIFrame.src.indexOf("?true")>=0)@H_502_7@6{@H_502_7@7this.__helperIFrame.src=this.__helperPageUrl+"?false&"+document.title+hash;@H_502_7@8}@H_502_7@9else@H_502_7@10{@H_502_7@11this.__helperIFrame.src=this.__helperPageUrl+"?true&"+document.title+hash;@H_502_7@12}@H_502_7@13}
NavFixHelper.htm@H_502_7@
1
<!
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
@H_502_7@
2
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
@H_502_7@
3
<
head
>
@H_502_7@
4
<
title
>
UntitledPage
</
title
>
@H_502_7@
5
</
head
>
@H_502_7@
6
<
body
>
@H_502_7@
7
<
script
language
="javascript"
>
@H_502_7@8window.parent.location.hash=location.hash;@H_502_7@9@H_502_7@10varqueryString=location.search;@H_502_7@11varindex=queryString.indexOf("&");@H_502_7@12document.title=queryString.substring(index+1);@H_502_7@13
</
script
>
@H_502_7@
14
</
body
>
@H_502_7@
15
</
html
>
把__reloadHelperIFrame函数和NavFixHelper.htm页面同时分析，是因为它们两个有密不可分的关系。它们都是仅仅为了IE服务的。@H_502_7@@H_502_7@在前面的解释里，我已经谈到了改变iframe的Query String（search）可以将状态添加至浏览器的History中。于是__reloadHelperIFrame函数保证了新加载的Query String，和当前IFrame里页面的Query String不同（如果当前src包含了“&true”字符，那么就加载包含“&false”的地址，否则就加载包含“&false”的地址）。接着在新加载的NavFixHelper.htm页面中，会将父窗口的hash变成自己的hash。这样，浏览器地址栏里的值就会改变了。这样，当浏览器的Back/Forward Button被点击，或者用户直接从History列表里选择一项时，IFrame里的页面会被重新加载，并且会使用特定的地址，页面的JS代码会被重新执行，最终又将影响浏览器地址栏里的hash值。不过由于如果访问了其他页面，History只能记住最后一次IFrame里的地址，所以无法使用Back多次回退了。@H_502_7@@H_502_7@每次加入History项，或者重新访问History时，都须要重新加载一次NavFixHelper.htm，那么会不会影响性能？答案是否定的。首先在加入History时，使用的href+search值只会用两种，因此浏览器会帮助cache文件内容，第二次访问具有相同href+search的页面时浏览器将不再访问Server。而且在服务器端，对于这样的静态文件，也会尽可能的进行cache，所以即使访问了Server也会获得304（未改变，表示从缓存读取）信息，而不会从服务器端重新下载。再退一步，重新下载一个如此之小的文件，也不会对性能有多少影响。@H_502_7@@H_502_7@可以发现，在加载IFrame的页面时，还将当前页面的Title传入了Query String。其作用就是避免Nikhil的解决方案中我举出的第三个问题。NavFixHelper.htm会根据地址栏信息修改自身的titile，这样在IE添加History项时，会纪录IFrame里页面的title，这样就保证了浏览器History列表里的title与浏览器页面相同。可是这样还没有完美的解决Title问题，如果用户想要修改页面的Title，IE里我有了解决方案，却始终还没有找出在FireFox下正确纪录的方法，总是在Back/Forward之中History里的title就混乱了，似乎在FireFox里Forword/Back记录title的行为和IE不一样，让我百思不得其解。@H_502_7@@H_502_7@@H_502_7@History.js -addHistory
1
Jeffz.Framework.History.prototype.addHistory
=
function
(context)@H_502_7@
2
{@H_502_7@3historyEntry={__p__:context};@H_502_7@4@H_502_7@5if(Sys.Runtime.get_hostType()==Sys.HostType.InternetExplorer)@H_502_7@6{@H_502_7@7this.__reloadHelperIFrame("#"+encodeURI(Sys.Serialization.JSON.serialize(historyEntry)));@H_502_7@8}@H_502_7@9else@H_502_7@10{@H_502_7@11location.hash=encodeURI(Sys.Serialization.JSON.serialize(historyEntry));@H_502_7@12}@H_502_7@13}
虽然可以说addHistory方法是关键，但是其实却非常的简单，在IE下则使用this.__reloadHelperIFrame来加载页面，否则就直接修改hash。hash的值使用的就是用户传入的context，序列化后，并经过encodeURI处理。@H_502_7@@H_502_7@@H_502_7@History.js - start & stop
1
Jeffz.Framework.History.prototype.start
=
function
()@H_502_7@
2
{@H_502_7@3if(!this.__runtimeTimer)@H_502_7@4{@H_502_7@5vartimer=newSys.Timer();@H_502_7@6timer.set_interval(300);@H_502_7@7timer.tick.add(this.__onTimerTick);@H_502_7@8timer.historyObj=this;@H_502_7@9this.__runtimeTimer=timer;@H_502_7@10}@H_502_7@11@H_502_7@12if(this.__runtimeTimer.get_enabled())@H_502_7@13{@H_502_7@14thrownewError("Thehistoryobjecthasbeenstarted.");@H_502_7@15}@H_502_7@16else@H_502_7@17{@H_502_7@18this.__runtimeTimer.set_enabled(true);@H_502_7@19}@H_502_7@20}
@H_502_7@
21
@H_502_7@
22
Jeffz.Framework.History.prototype.stop
=
function
()@H_502_7@
23
{@H_502_7@24if(!this.__runtimeTimer||!this.__runtimerTimer.get_enabled())@H_502_7@25{@H_502_7@26thrownewError("Thehistoryobjecthasnotbeenstarted.");@H_502_7@27}@H_502_7@28else@H_502_7@29{@H_502_7@30this.__runtimeTimer.set_enabled(false);@H_502_7@31}@H_502_7@32}
这两个函数非常简单，本来不用解释。唯一需要注意的是代码的第8行，由于Sys.Timer使用的是使用setTimerout来回调执行this.__onTimerTick，因此在this.__onTimerTick函数执行时，this并不是History对象本身，而是window！还好Sys.Timer会通过sender传递自身给回调函数，因此我在构造Sys.Timer时将自身对象放进了Timer对象的historyObj属性中，则在this.__onTimerTick函数中可以从sender.historyObj中得到History对象。@H_502_7@@H_502_7@@H_502_7@History.js -__onTimerTick
1
Jeffz.Framework.History.prototype.__onTimerTick
=
function
(sender,eventArgs)@H_502_7@
2
{@H_502_7@3try@H_502_7@4{@H_502_7@5if(location.hash!=sender.historyObj.__currentHash)@H_502_7@6{@H_502_7@7sender.historyObj.__currentHash=location.hash;@H_502_7@8sender.historyObj.__execute(location.hash);@H_502_7@9}@H_502_7@10}@H_502_7@11catch(e)@H_502_7@12{@H_502_7@13sender.set_enabled(false);@H_502_7@14sender.set_enabled(true);@H_502_7@15throwe;@H_502_7@16}@H_502_7@17}
其实这个方法就是比较hash值有没有改变，如果改变了，则保留新的hash，并加以执行回调函数（在__execute函数中）。可以发现，事实上回调函数this.__setDataCallbak总是在在onTimerTick里被执行的（除了在FireFox下构造History对象时），这样保证了this.__currentHash和当前页面hash的统一。@H_502_7@@H_502_7@值得注意的是，我使用了try...catch来保护了代码，因为__execute函数会调用用户提供的回调函数，所以可能会抛出异常。如果__onTimerTick函数仅仅只使用了现在的第5到第9行，那么等异常抛出时，Timer将会被终止，将不会继续监视hash的改变。现在的做法是在遇到异常时停止Timer并重新启动，然后重新抛出异常。这样既保证了Timer的正常执行，又能让用户发现自己代码中的异常情况。@H_502_7@@H_502_7@@H_502_7@History.js - __execute
1
Jeffz.Framework.History.prototype.__execute
=
function
(hash)@H_502_7@
2
{@H_502_7@3varhistoryEntry=null;@H_502_7@4@H_502_7@5try@H_502_7@6{@H_502_7@7varhistoryEntry=Sys.Serialization.JSON.deserialize(decodeURI(hash.substring(1)));@H_502_7@8}@H_502_7@9catch(e)@H_502_7@10{@H_502_7@11this.__setDataCallback(null);@H_502_7@12return;@H_502_7@13}@H_502_7@14@H_502_7@15if(historyEntry)@H_502_7@16{@H_502_7@17this.__setDataCallback(historyEntry.__p__);@H_502_7@18}@H_502_7@19else@H_502_7@20{@H_502_7@21this.__setDataCallback(null);@H_502_7@22}@H_502_7@23}
这段我想就不用多加解释了，似乎将一个简单的调用写得有些复杂。这样做的目的是在hash值是错误的情况下，会将null作为参数，保证了用户提供的回调函数被正确的使用。@H_502_7@@H_502_7@@H_502_7@问题与其他就此，整个类分析完了，总共只有短短一百多行代码，是我参考了一些实现，并通过自己的经验与思考得出的解决方案。目前似乎关于解决AJAX这个问题的解决方案都有差不多的模式，也有差不多的障碍。这依旧不是一个完美的解决方案，依旧有改进的余地。其实我这篇东西的作用只是抛砖引玉，希望能引出更多优秀的见解。我仍然在钻研和实践中，如果有什么进展，我会第一时间的更新这里的blog。
