感受设计的魅力
| 心情: normal
]
以下是回亿,不一定很精确,但大概情况是记得的
03年暑假,我在南京的一家软件公司实习(其实就是想开学后在同学面前显摆显摆,那时候还是很崇拜程序员的),
当时,那家公司主要是asp开发,自然而然,我也在那做起了asp,
那时候,对于我来说,根本不考虑什么设计合理,扩展性什么的,总是认为,那些都没用,只要写出来就行了,一个功能完成,就觉得自己很满足
直到那一天中午,我彻底改变了想法
那天中午闲的无聊,坐着跟技术经理聊天(我一直很感谢他,不知道现在去哪了),我说:"写程序也没什么难得,无非是些判断循环而已",他听完后,也不说话,
随手在纸上写了小题目:
在网页上有个按钮和一个显示块,要求当按钮显示"显示1"的时候按下按钮,显示块显示"1",并且按钮显示"显示2"
当按钮显示"显示2"的时候按下按钮,显示块显示"2",并且按钮显示"显示1"
我是怎么会喜欢上设计的,仔细想来,全都是因为03年的那次实习经歷
以下是回亿,不一定很精确,但大概情况是记得的
03年暑假,我在南京的一家软件公司实习(其实就是想开学后在同学面前显摆显摆,那时候还是很崇拜程序员的),
当时,那家公司主要是asp开发,自然而然,我也在那做起了asp,
那时候,对于我来说,根本不考虑什么设计合理,扩展性什么的,总是认为,那些都没用,只要写出来就行了,一个功能完成,就觉得自己很满足
直到那一天中午,我彻底改变了想法
那天中午闲的无聊,坐着跟技术经理聊天(我一直很感谢他,不知道现在去哪了),我说:"写程序也没什么难得,无非是些判断循环而已",他听完后,也不说话,
随手在纸上写了小题目:
在网页上有个按钮和一个显示块,要求当按钮显示"显示1"的时候按下按钮,显示块显示"1",并且按钮显示"显示2"
当按钮显示"显示2"的时候按下按钮,显示块显示"2",并且按钮显示"显示1"
看完后,我说"这有何难?"随手就在电脑上写了起来
<html>
<body>
<input type="button" id="btn_test" >
<div id="show"></div>
</body>
<script language="javascript">
function Control()
{
this.Execute=function()
{
if (btn_test.value=="显示1")
{
btn_test.value="显示2";
show.innerText="1";
}
else if (btn_test.value=="显示2" || btn_test.value=="")
{
btn_test.value="显示1";
show.innerText="2";
}
}
}
onload=function()
{
control=new Control();
control.Execute();
}
btn_test.onclick=function()
{
control.Execute();
}
var control;
</script>
</html>
写完后,运行了一下,经理看了看,说"还行"
接著又说"现在要就变了,看看你怎么写",现在的要求是
当按钮显示"显示1"的时候按下按钮,显示块显示"1",并且按钮显示"显示2"
当按钮显示"显示2"的时候按下按钮,显示块显示"2",并且按钮显示"显示3"
当按钮显示"显示3"的时候按下按钮,显示块显示"3",并且按钮显示"显示1"
于是我又改了起来
<html>
<body>
<input type="button" id="btn_test" >
<div id="show"></div>
</body>
<script language="javascript">
function Control()
{
this.Execute=function()
{
if (btn_test.value=="显示1")
{
btn_test.value="显示2";
show.innerText="1";
}
else if (btn_test.value=="显示2")
{
btn_test.value="显示3";
show.innerText="2";
}
else if (btn_test.value=="显示3" || btn_test.value=="")
{
btn_test.value="显示1";
show.innerText="3";
}
}
}
onload=function()
{
control=new Control();
control.Execute();
}
btn_test.onclick=function()
{
control.Execute();
}
var control;
</script>
</html>
经理看完后,说"不错,完成要求了,但这样写并不是很好,看看我写的"
他随手写了个程序给我看
下面就是他写的
<html>
<body>
<input type="button" id="btn_test" >
<div id="show"></div>
</body>
<script language="javascript">
function Control(state)
{
this.State=state;
this.Execute=function()
{
this.State.Execute(this);
}
}
function State1()
{
this.Name="State1";
this.Execute=function(control)
{
btn_test.value="显示2";
show.innerText="1";
control.State=new State2();
}
}
function State2()
{
this.Name="State2";
this.Execute=function(control)
{
btn_test.value="显示1";
show.innerText="2";
control.State=new State1();
}
}
onload=function()
{
control=new Control(new State1());
control.Execute();
}
btn_test.onclick=function()
{
control.Execute();
}
var control;
</script>
</html>
接着他说:"你知道我写的好在哪里吗?因为我发现这个要求是和状态紧密联系的,当按钮处于不同状态时,有不同的行为,所以,干脆,我就将状态单独封装起来,这个,符合面向对像程序设计的基本原则"发现变化,封装变化",这样一来,Control这个类就不知道自己的具体的状态了,跟状态也就实现脱耦了,所有的行为都交给了状态对象所负责了,这样,以后要扩展起来,就不用再改变这个Control类了,实现了复用,现在,我再按照第二个要求写个程序"
<html>
<body>
<input type="button" id="btn_test" >
<div id="show"></div>
</body>
<script language="javascript">
function Control(state)
{
this.State=state;
this.Execute=function()
{
this.State.Execute(this);
}
}
function State1()
{
this.Name="State1";
this.Execute=function(control)
{
btn_test.value="显示2";
show.innerText="1";
control.State=new State2();
}
}
function State2()
{
this.Name="State2";
this.Execute=function(control)
{
btn_test.value="显示3";
show.innerText="2";
control.State=new State3();
}
}
function State3()
{
this.Name="State3";
this.Execute=function(control)
{
btn_test.value="显示1";
show.innerText="3";
control.State=new State1();
}
}
onload=function()
{
control=new Control(new State1());
control.Execute();
}
btn_test.onclick=function()
{
control.Execute();
}
var control;
</script>
</html>
"看到了吗?我只要增加进来一个状态类,再略为修改一下原来的状态对象就可以了,不用改动到Control类,并且,避免了大量的判断语句,这道题目要求的动作还是比较简单的,如果复杂,就更能体现出优势了,如果按照你的写法,肯定要搞晕在复杂的if else里,而我的写法里,每个状态只知道自己的下一个状态和本身的动作,将原来的Control类与状态的一对多转变成了状态之间的一对一关係,这样就变得简单了,Control也实现了复用,不像你写的,Control类只能在这里一个地方用,这其实就是用到了一个状态模式,所以,你说的不用考虑设计的写程序方式,是不可取得,以后修改维护时要吃大苦头的,虽然这个只是javascript的一个小例子,限于脚本原因,并不能完全显示出设计的魅力来,但还是能看到设计的好处的"
在这期间,我一句话也没说,因为,我真的是很吃惊,同样的实现,他写出的代码就那么优雅,给后续的维护带来了那么的方便性,突然之间,就发现自己以前的想法非常愚昧,简直是非常可笑
也就是从那天起,我开始注意到设计了,每次写程序之前,总要多想想
虽然在那家公司只待了一个月时间,但给自己带来的收获是很大的,一个月中,那位经理交了我很多他的经验
我很感谢他,虽然现在已经失去了联系
－－－－－－－－－－－－－－－－－－－－－－－－－－以下为回复
对状态模式来说，最根本的就是状态这个概念了
何谓状态？
if (a==1)
{
...
}
else if (a==2)
{
...
}
else if (a==3)
......
这里的a其实并不叫状态
a只是一个标示
只有在
if (a==1)
{
a=2;
}
else if (a==2)
{
a=3;
}
else if (a==3)
{
a=1;
}
这种情况下才能把a称之为状态
这时状态模式才能起到它的作用
因此在这个例子里
this.State.Execute(this);
这句话的意思就是让状态可以去改变当前状态
也就是上面提到的
if (a==1)
{
a=2;
}
这个意思了
- 可伸缩性最佳实践：来自eBay的经验 [2009年10月23日 12:00]
- 用户体验这点事儿 [2009年8月14日 10:11]
- 权限设计中的"依赖颠倒" [2009年6月8日 13:49]
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程 [2009年4月15日 9:48]
- 十个简单好用的设计技巧 [2009年4月13日 17:21]
- 11个优秀的WEB设计资源及设计趋势前瞻 [2009年4月7日 10:16]
- 有一种生涯，叫 PSD2HTML. [2009年3月30日 11:46]
- 快速设计网页必备的28款工具和生成器 [2009年3月24日 10:01]
- Head First 设计模式阅读所得:策略模式(Strategy Pattern) 接口的用处（之一） [2009年3月13日 15:21]
- [你必须知道的.NET]第二十回：学习方法论 [2009年3月6日 10:05]
- 权限的设计思路 [2009年2月5日 15:46]
- 水货多普达S1精英版使用感受与小评. [2009年1月9日 10:15]
订阅地址
