千里之行——www.footya.com http://www.footya.com// 人的头脑太复杂,时间过得久,有时候连自己也被自己骗了,记下来才是最真实的...... Copyright (C) 2004 Security Angel Team [S4T] All Rights Reserved. SaBlog-X Version 1.6 Build 20080806 Sun, 20 May 2012 12:22:52 +0000 30 http://www.footya.com//?action=show&id=126 《Head First 设计模式》读书笔记8——设计模式之模版方法模式 footya 定义：

模版方法模式定义一个操作中的算法的骨架，而将一些步骤延迟到子类中。模版方法TemplateMethod 使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。

uml
大小: 9 K 尺寸: 400 x 224 浏览: 1 次 点击打开新窗口浏览全图
角色组成：
抽象摸板角色（AbstractClass）:
　　1. 定义了一个或多个抽象操作,以便让子类实现.
　　2. 定义并实现了一个摸板方法.
具体摸板角色(ConcreteClass):
　　1. 实现父类所定义的一个或多个抽象方法.
　　2. 每一个抽象摸板角色都可以有任意多个具体摸板角色与之对应.
　　3. 每一个具体摸板角色都可以给出这些抽象方法的不同实现

适用场景：
1、一次性实现一个算法的不变的部分，并将可变的行为留给子类来实现。
2、各子类中公共的行为应被提取出来并集中到一个公共父类中以避免代码重复。首先识别现有代码中的不同之处，并且将不同之处分离为新的操作。最后，用一个调用这些新的操作的模板方法来替换这些不同的代码。
3、控制子类扩展。模板方法只在特定点调用“hook”操作，这样就只允许在这些点进行扩展。
示例代码：
JavaScript代码
  1. //抽象摸板角色（AbstractClass） 
  2.   
  3. function AbstractClass(){  
  4.   
  5.     this.jsready = false; 
  6.   
  7. }  
  8.   
  9. AbstractClass.prototype.templateMethod = function(){  
  10.   
  11.     this.primitiveOperation1(); 
  12.   
  13.     this.primitiveOperation2(); 
  14.   
  15.     if(this.jsready){//控制子类扩展 
  16.   
  17.         this.primitiveOperation3(); 
  18.   
  19.         this.primitiveOperation4(); 
  20.   
  21.     } 
  22.   
  23. } 
  24.   
  25. AbstractClass.prototype.primitiveOperation1 = function(){  
  26.   
  27.     alert("子类实现这个方法"); 
  28.   
  29. } 
  30.   
  31. AbstractClass.prototype.primitiveOperation2 = function(){  
  32.   
  33.     alert("子类实现这个方法"); 
  34.   
  35. } 
  36.   
  37. AbstractClass.prototype.primitiveOperation3 = function(){  
  38.   
  39.     console.log("点火"); 
  40.   
  41. } 
  42.   
  43. AbstractClass.prototype.primitiveOperation4 = function(){  
  44.   
  45.     console.log("发射"); 
  46.   
  47. } 
  48.   
  49. //具体摸板角色(ConcreteClass) 
  50.   
  51. function ConcreteClass(){ 
  52.   
  53.     AbstractClass.apply(this,arguments); 
  54.   
  55. } 
  56.   
  57. ConcreteClass.prototype = new AbstractClass();    
  58.   
  59. ConcreteClass.prototype.constructor = ConcreteClass; 
  60.   
  61. //通过改变钩子来决定模版的执行步骤 
  62.   
  63. ConcreteClass.prototype.setReadyState = function(state){ 
  64.   
  65.     this.jsready = state; 
  66.   
  67.     console.log("准备就绪"); 
  68.   
  69. } 
  70.   
  71. ConcreteClass.prototype.primitiveOperation1 = function(request){ 
  72.   
  73.     console.log("打开闸门"); 
  74.   
  75. }; 
  76.   
  77. ConcreteClass.prototype.primitiveOperation2 = function(request){ 
  78.   
  79.     console.log("挪开支架"); 
  80.   
  81. }; 
  82.   
  83. function main(){ 
  84.   
  85.     var rocket = new ConcreteClass(); 
  86.   
  87.     rocket.templateMethod(); 
  88.   
  89.     rocket.setReadyState(true); 
  90.   
  91.     rocket.templateMethod(); 
  92.   
  93. } 
  94.   
  95. main();  
输出：
打开闸门
挪开支架
准备就绪
打开闸门
挪开支架
点火
发射
]]> http://www.footya.com//?action=show&id=126 学习总结 2012-05-15 22:32 http://www.footya.com//?action=show&id=125 《Head First 设计模式》读书笔记7——设计模式之装饰者模式 footya 装饰者模式（Decorator）定义：
动态将职责附加到对象上。若要扩展功能，装饰者提供了比继承更具弹性的代替方案
uml图示：
大小: 16.61 K 尺寸: 691 x 287 浏览: 2 次 点击打开新窗口浏览全图
装饰者模式的角色组成：
被装饰对象基类Component: 定义对象的接口，可以给这些对象动态增加职责；
具体被装饰对象 ConcreteComponent: 定义具体的对象，Decorator可以给它增加额外的职责；
装饰者抽象类 ​Decorator : 维护一个指向Component实例的引用，并且定义了与Component一致的接口； 
具体装饰者ConcreteDecorator: 具体的装饰对象，给内部持有的具体被装饰对象增加具体的职责；
实用场合：
1、在不影响其他对象的情况下，以动态、透明的方式给单个对象添加职责。 
2、处理那些可以撤消的职责。 
3、当不能采用生成子类的方法进行扩充时。一种情况是，可能有大量独立的扩展，为支持每一种组合将产生大量的子类，使得子类数目呈爆炸性增长。另一种情况可能是因为类定义被隐藏，或类定义不能用于生成子类。

Decorator是装饰者模式里非常特殊的一个类，它既继承于Component【IS A关系】,又维护一个指向Component实例的引用【HAS A关系】，Decorator跟Component之间，既有动态组合关系又有静态继承关系，WHY? 这里为什么要这么来设计？Decorator【HAS A】Component的目的是让ConcreteDecorator可以在运行时动态给ConcreteComponent增加职责，这一点相对来说还比较好理解；那么Decorator继承于Component的目的是什么？在这里，继承的目的只有一个，那就是可以统一装饰者和被装饰者的接口，换个角度来说，不管是ConcretComponent还是ConcreteDecorator，它们都是 Component，用户代码可以把它们统一看作Component来处理，这样带来的更深一层的好处就是，装饰者对象对被装饰者对象的功能职责扩展对用户代码来说是完全透明的，因为用户代码引用的都是Component，所以就不会因为被装饰者对象在被装饰后，引用它的用户代码发生错误，实际上不会有任何影响，因为装饰前后，用户代码引用的都是Component类型的对象，完美的设计！装饰者模式通过继承实现统一了装饰者和被装饰者的接口，通过组合获得了在运行时动态扩展被装饰者对象的能力。

示例代码：

JavaScript代码
  1. //被装饰对象基类Component 
  2.   
  3. function Component(){  
  4.   
  5. }  
  6.   
  7. Component.prototype.operation = function(successor){  
  8.   
  9.     alert("please rewrite me"); 
  10.   
  11. } 
  12.   
  13. //装饰者抽象类(Decorator)角色 
  14.   
  15. function Decorator(component){ 
  16.   
  17.     Component.apply(this,arguments); 
  18.   
  19.     this.component = component; 
  20.   
  21. } 
  22.   
  23. Decorator.prototype = new Component();    
  24.   
  25. Decorator.prototype.constructor = Decorator;  
  26.   
  27.  
  28.   
  29. //具体被装饰者(ConcreteComponent)角色 
  30.   
  31. function ConcreteComponent(){ 
  32.   
  33.     Component.apply(this,arguments); 
  34.   
  35. } 
  36.   
  37. ConcreteComponent.prototype = new Component();    
  38.   
  39. ConcreteComponent.prototype.constructor = ConcreteComponent;  
  40.   
  41. ConcreteComponent.prototype.operation = function(){ 
  42.   
  43.     return 1.00; 
  44.   
  45. }; 
  46.   
  47. //具体装饰者(ConcreteDecoratorA)角色 
  48.   
  49. function ConcreteDecoratorA(){ 
  50.   
  51.     Decorator.apply(this,arguments); 
  52.   
  53. } 
  54.   
  55. ConcreteDecoratorA.prototype = new Decorator();    
  56.   
  57. ConcreteDecoratorA.prototype.constructor = ConcreteDecoratorA;  
  58.   
  59. ConcreteDecoratorA.prototype.operation = function(){ 
  60.   
  61.     return 0.15 + this.component.operation(); 
  62.   
  63. }; 
  64.   
  65. //具体装饰者(ConcreteDecoratorB)角色 
  66.   
  67. function ConcreteDecoratorB(){ 
  68.   
  69.     Decorator.apply(this,arguments); 
  70.   
  71. } 
  72.   
  73. ConcreteDecoratorB.prototype = new Decorator();    
  74.   
  75. ConcreteDecoratorB.prototype.constructor = ConcreteDecoratorB;  
  76.   
  77. ConcreteDecoratorB.prototype.operation = function(){ 
  78.   
  79.     return 0.10 + this.component.operation(); 
  80.   
  81. }; 
  82.   
  83. function main(){ 
  84.   
  85.     var mycoffee = new ConcreteComponent();//比如纯咖啡 
  86.   
  87.     console.log("纯咖啡的价格为："+mycoffee.operation()); 
  88.   
  89.     var milkcoffee     = new ConcreteDecoratorA(mycoffee); 
  90.   
  91.     console.log("加了牛奶的咖啡价格为："+ milkcoffee.operation()); 
  92.   
  93.     var sugarmilkcoffee = new ConcreteDecoratorB(milkcoffee); 
  94.   
  95.     console.log("加了牛奶、糖的咖啡价格为："+sugarmilkcoffee.operation()); 
  96.   
  97.  
  98.   
  99. } 
  100.   
  101. main();  

 

输出为：

纯咖啡的价格为：1

加了牛奶的咖啡价格为：1.15

加了牛奶、糖的咖啡价格为：1.25

]]> http://www.footya.com//?action=show&id=125 学习总结 2012-05-13 20:51 http://www.footya.com//?action=show&id=124 《Head First 设计模式》读书笔记6——设计模式之职责链模式 footya 定义：

使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系。将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。
大小: 7.6 K 尺寸: 401 x 226 浏览: 1 次 点击打开新窗口浏览全图
适配器模式的角色组成：
抽象处理者(Handler)角色：定义出一个处理请求的接口。如果需要，接口可以定义出一个方法，以设定和返回对下家的引用。这个角色通常由一个抽象类或接口实现。
具体处理者(ConcreteHandler)角色：具体处理者接到请求后，可以选择将请求处理掉，或者将请求传给下家。由于具体处理者持有对下家的引用，因此，如果需要，具体处理者可以访问下家。
 
适用场合：                                                                                                
1.有多个的对象可以处理一个请求，哪个对象处理该请求运行时刻自动确定。
2.你想在不明确指定接受者的情况下，向多个对象中的一个提交请求。
3.处理一个请求的对象集合应被动态指定。
JavaScript代码
  1. //抽象处理者(Handler)角色 
  2.   
  3. function Handler(){  
  4.   
  5.     this.successor = null; 
  6.   
  7. }  
  8.   
  9. Handler.prototype.setSuccessor = function(successor){  
  10.   
  11.     this.successor = successor; 
  12.   
  13. } 
  14.   
  15. Handler.prototype.handleRequest = function(request){  
  16.   
  17.     throw new Error("you must overwrite this fun"); 
  18.   
  19. } 
  20.   
  21.  
  22.   
  23. //具体处理者(ConcreteHandler)角色1 
  24.   
  25. function ConcreteHandler1(){ 
  26.   
  27.     Handler.apply(this,arguments); 
  28.   
  29. } 
  30.   
  31. ConcreteHandler1.prototype = new Handler();    
  32.   
  33. ConcreteHandler1.prototype.constructor = ConcreteHandler1;  
  34.   
  35. ConcreteHandler1.prototype.handleRequest = function(request){ 
  36.   
  37.     if(request>=0&&request<=10){ 
  38.   
  39.         console.log("0<=a<=10"); 
  40.   
  41.     } 
  42.   
  43.     else if(this.successor != null){ 
  44.   
  45.         //转移到下一位 
  46.   
  47.         this.successor.handleRequest(request); 
  48.   
  49.     } 
  50.   
  51. }; 
  52.   
  53. //具体处理者(ConcreteHandler)角色 
  54.   
  55. function ConcreteHandler2(){ 
  56.   
  57.     Handler.apply(this,arguments); 
  58.   
  59. } 
  60.   
  61. ConcreteHandler2.prototype = new Handler();    
  62.   
  63. ConcreteHandler2.prototype.constructor = ConcreteHandler2;  
  64.   
  65. ConcreteHandler2.prototype.handleRequest = function(request){ 
  66.   
  67.     if(request>=11&&request<=20) 
  68.   
  69.     { 
  70.   
  71.         console.log("11<=a<=20"); 
  72.   
  73.     } 
  74.   
  75.     else if(this.successor != null)  
  76.   
  77.     { 
  78.   
  79.         //转移到下一位 
  80.   
  81.         this.successor.handleRequest(request); 
  82.   
  83.     } 
  84.   
  85. }; 
  86.   
  87. //具体处理者(ConcreteHandler)角色 
  88.   
  89. function ConcreteHandler3(){ 
  90.   
  91.     Handler.apply(this,arguments); 
  92.   
  93. } 
  94.   
  95. ConcreteHandler3.prototype = new Handler();    
  96.   
  97. ConcreteHandler3.prototype.constructor = ConcreteHandler3;  
  98.   
  99. ConcreteHandler3.prototype.handleRequest = function(request){ 
  100.   
  101.     if(request>=21&&request<=30) 
  102.   
  103.     { 
  104.   
  105.         console.log("21<=a<=30"); 
  106.   
  107.     } 
  108.   
  109.     else if(this.successor != null)  
  110.   
  111.     { 
  112.   
  113.         //转移到下一位 
  114.   
  115.         this.successor.handleRequest(request); 
  116.   
  117.     } 
  118.   
  119. }; 
  120.   
  121. function main(){ 
  122.   
  123.     var h1 = new ConcreteHandler1(); 
  124.   
  125.     var h2 = new ConcreteHandler2(); 
  126.   
  127.     var h3 = new ConcreteHandler3(); 
  128.   
  129.     //设置职责链的上下游 
  130.   
  131.     h1.setSuccessor(h2); 
  132.   
  133.     h2.setSuccessor(h3); 
  134.   
  135.     //开始验证 
  136.   
  137.     h1.handleRequest(21); 
  138.   
  139. } 
  140.   
  141. main();  
]]> http://www.footya.com//?action=show&id=124 学习总结 2012-05-09 21:31 http://www.footya.com//?action=show&id=123 js对象深拷贝和对象扩展 footya 对象深拷贝和对象扩展一直比较头疼，最近查阅了一些资料，终于想出了一个比较靠谱的方案，深拷贝的代码来自网络：http://blog.csdn.net/qq1119753812/article/details/6968054，基于深拷贝写了个对象扩展的方法，测了一下基本可以满足日常使用。
js对象深拷贝：

JavaScript代码
  1. //对象和数组的深拷贝 
  2.   
  3. Object.clone = function(sObj){ 
  4.   
  5.         if(typeof sObj !== "object"){ 
  6.   
  7.             return sObj; 
  8.   
  9.         } 
  10.   
  11.         var s = {}; 
  12.   
  13.         if(sObj.constructor == Array){ 
  14.   
  15.             s = []; 
  16.   
  17.         } 
  18.   
  19.         for(var i in sObj){ 
  20.   
  21.             s[i] = Object.clone(sObj[i]); 
  22.   
  23.         } 
  24.   
  25.         return s; 
  26.   
  27.    }  

js对象扩展：

JavaScript代码
  1. //对象扩展，tObj被扩展对象，sObj扩展对象  
  2.   
  3.    Object.extend = function(tObj,sObj){ 
  4.   
  5.         for(var i in sObj){ 
  6.   
  7.             if(typeof sObj[i] !== "object"){ 
  8.   
  9.                 tObj[i] = sObj[i]; 
  10.   
  11.             }else if (sObj[i].constructor == Array){ 
  12.   
  13.                 tObj[i] = Object.clone(sObj[i]); 
  14.   
  15.             }else{ 
  16.   
  17.                 tObj[i] = tObj[i] || {}; 
  18.   
  19.                 Object.extend(tObj[i],sObj[i]); 
  20.   
  21.             } 
  22.   
  23.         } 
  24.   
  25.    }  


测试用例如下：

JavaScript代码
  1. var a = {}; 
  2.   
  3. var b = {"a":1, 
  4.   
  5.          "b":{"c":function(t){ 
  6.   
  7.                        alert(t); 
  8.   
  9.                     } 
  10.   
  11.              }, 
  12.   
  13.          "d":{"e":2, 
  14.   
  15.               "f":[1,4,5,7,9] 
  16.   
  17.              } 
  18.   
  19.         }; 
  20.   
  21. Object.extend(a,b);//a获得了b的所有属性 
  22.   
]]> http://www.footya.com//?action=show&id=123 AJAX/Javascript 2011-12-27 09:59 http://www.footya.com//?action=show&id=122 《Head First 设计模式》读书笔记5——设计模式之适配器模式 footya 定义：
将一个类的接口，转换成客户期望的另一个接口。适配器adapter使原本因接口不匹配而无法在一起工作的两个类能够在一起工作。

uml:

对象适配器
大小: 4.73 K 尺寸: 522 x 179 浏览: 12 次 点击打开新窗口浏览全图

类适配器
大小: 4.87 K 尺寸: 533 x 177 浏览: 1 次 点击打开新窗口浏览全图
适配器模式的角色组成：

1.源（Adaptee）
已经存在的、需要适配的类。
2.目标（Target）
客户所期待的接口。目标可以是具体的或抽象的类，也可以是接口。
3.适配器（Adapter）
适配器模式的核心类。有两种方式实现Adapter，对象适配器(Object Adapter)和类适配器(Class Adapter)。
4.客户(Client)

适用范围：
1、你想使用一个已经存在的类，而它的接口不符合你的需求。
2、你想创建一个可以复用的类，该类可以与其他不相关的类或不可预见的类（即那些接口可能不一定兼容的类）协同工作。
3、你想使用一些已经存在的子类，但是不可能对每一个都进行子类化以匹配它们的接口。对象适配器可以适配它的父类接口。
引用书中的例子：
1、鸭子有两个行为飞【fly()】和叫【quack()】;
2、火鸡有两个行为飞【fly()】和叫【gobble()】;
3、实现一个适配器使得火鸡的行为和鸭子的行为提供一样的接口；

js代码实现：

 

JavaScript代码
  1. //目标 
  2.   
  3. function Duck(){ 
  4.   
  5.     this.fly = function(){ 
  6.   
  7.         alert("Duck flying"); 
  8.   
  9.     }; 
  10.   
  11.     this.quack = function(){ 
  12.   
  13.         alert("Duck quacking") 
  14.   
  15.     }; 
  16.   
  17. } 
  18.   
  19. //源 
  20.   
  21. function Turkey(){ 
  22.   
  23.     this.fly = function(){ 
  24.   
  25.         alert("Turkey flying"); 
  26.   
  27.     }; 
  28.   
  29.     this.gobble = function(){ 
  30.   
  31.         alert("turkey gobble"); 
  32.   
  33.     } 
  34.   
  35. } 
  36.   
  37. //适配器 
  38.   
  39. function TurkeyAdapter(turkey){ 
  40.   
  41.     this.turkey = turkey; 
  42.   
  43.     this.fly = function(){ 
  44.   
  45.         turkey.fly(); 
  46.   
  47.     }; 
  48.   
  49.     this.quack = function(){ 
  50.   
  51.         turkey.gobble(); 
  52.   
  53.     }; 
  54.   
  55. } 
  56.   
  57. //客户 
  58.   
  59. function testDuck(duck){ 
  60.   
  61.         duck.quack(); 
  62.   
  63.         duck.fly(); 
  64.   
  65. }; 
  66.   
  67. function main(){ 
  68.   
  69.     var duck   = new Duck(); 
  70.   
  71.     var turkey = new Turkey(); 
  72.   
  73.     var turkeyadapter = new TurkeyAdapter(turkey); 
  74.   
  75.      
  76.   
  77.     testDuck(duck); 
  78.   
  79.     testDuck(turkeyadapter); 
  80.   
  81. } 
  82.   
  83. main();  

 

]]> http://www.footya.com//?action=show&id=122 学习总结 2011-10-20 08:29 http://www.footya.com//?action=show&id=121 《Head First 设计模式》读书笔记4——设计模式之命令模式 footya 定义：
将一个请求封装为一个对象，从而使你可用不同的请求对客户进行参数化；对请求排队或记录请求日志，以及支持可撤消的操作。

uml:
大小: 5.57 K 尺寸: 596 x 208 浏览: 1 次 点击打开新窗口浏览全图
命令模式的角色组成：
1)命令角色（Command）： 定义命令的接口，声明执行的方法。
2)具体命令角色（Concrete Command）：
命令接口实现对象，是“虚”的实现；通常会持有接收者(Receiver)的引用，并调用接收者(Receiver)的功能(receiver.Action())来完成命令要执行的操作(Execute)。
3)客户角色（Client）：创建具体的命令对象，并且设置命令对象的接收者。注意这个不是我们常规意义上的客户端，而是在组装命令对象和接收者，或许，把这个Client称为装配者会更好理解，因为真正使用命令的客户端是从Invoker来触发执行。
4)请求者角色（Invoker）：调用命令对象(Command)执行这个请求。
5)接收者角色（Receiver）：知道如何实施与执行一个请求相关的操作。任何类都可能作为一个接收者。

引用书中的例子：
实现一个开关遥控器
1、遥控器上有7个编程插槽，每个插槽分别对应开、关两个按钮；
2、有已经封装好的家电类，这些家电类都实现了自己的开关方法；
3、遥控器上还有一个撤销按钮；
4、创建一组控制遥控器的API，让每个插槽都能够控制一个或一组家电装置；
5、能够控制目前的装置和未来可能出现的装置。


我们先实现一个家电的开关，以卧室的灯来举例。

初步实现的UML图：

 大小: 10.57 K 尺寸: 751 x 238 浏览: 2 次 点击打开新窗口浏览全图
js程序实现：

JavaScript代码
  1. function Command(){ 
  2.   
  3. } 
  4.   
  5.  
  6.   
  7. Command.prototype.execute = function(){ 
  8.   
  9. } 
  10.   
  11.  
  12.   
  13. function LightOnCommand (light){ 
  14.   
  15.     Command.apply(this,arguments); 
  16.   
  17.     this.light = light; 
  18.   
  19. } 
  20.   
  21.  
  22.   
  23. LightOnCommand.prototype = new Command(); 
  24.   
  25. LightOnCommand.prototype.constructor = LightOnCommand; 
  26.   
  27. LightOnCommand.prototype.execute = function(){ 
  28.   
  29.     this.light.on(); 
  30.   
  31. } 
  32.   
  33.  
  34.   
  35. function SimpleRemoteControl (){ 
  36.   
  37. } 
  38.   
  39. SimpleRemoteControl.prototype.setCommand = function(command){ 
  40.   
  41.     this.solt = command; 
  42.   
  43. }; 
  44.   
  45. SimpleRemoteControl.prototype.buttonWasPressed = function(){ 
  46.   
  47.     this.solt.execute(); 
  48.   
  49. }; 
  50.   
  51. //  
  52.   
  53. function Light(){ 
  54.   
  55. }; 
  56.   
  57. Light.prototype.on = function(){ 
  58.   
  59.     alert("the light on"); 
  60.   
  61. }; 
  62.   
  63. Light.prototype.off = function(){ 
  64.   
  65.     alert("the light off"); 
  66.   
  67. }; 
  68.   
  69.  
  70.   
  71. function RemoteControlTest(){ 
  72.   
  73.     var remote  = new SimpleRemoteControl(); 
  74.   
  75.     var light   = new Light(); 
  76.   
  77.     var lighton = new LightOnCommand(light); 
  78.   
  79.     remote.setCommand(lighton); 
  80.   
  81.     remote.buttonWasPressed(); 
  82.   
  83. } 
  84.   
  85.  
  86.   
  87. RemoteControlTest();  

 

]]> http://www.footya.com//?action=show&id=121 学习总结 2011-10-09 22:42 http://www.footya.com//?action=show&id=120 《Head First 设计模式》读书笔记3——设计模式之单件模式 footya 单件模式（singleton）

保证一个类仅有一个实例，并提供一个访问它的全局访问点。

uml图示：
大小: 4.38 K 尺寸: 421 x 140 浏览: 1 次 点击打开新窗口浏览全图

单件模式应该使用在什么场合:
　　当需要控制一个类的实例数量且调用者可以从一个公共的众所周知的访问点访问时。
单件模式类的创建:
　　两种方式来实现单件类的创建，一是将一个类的公共构造函数改为私有，另一种方式是保留类的公共构造函数，通过一个静态成员来决定是否要返回一个类实例。

单件模式模式的实现基于两个要点：
1）不直接用类的构造函数，而另外提供一个Public的静态方法来构造类的实例。通常这个方法取名为Instance。Public保证了它的全局可见性，静态方法保证了不会创建出多余的实例。
2）将类的构造函数设为Private，即将构造函数"隐藏"起来，任何企图使用构造函数创建实例的方法都将报错。这样就阻止了开发人员绕过上面的Instance方法直接创建类的实例。

js代码示例：

JavaScript代码
  1. function Singleton(){ 
  2.   
  3.  if(!Singleton.lock){ 
  4.   
  5.  alert("您不能直接示例化这个类"); 
  6.   
  7. return; 
  8.   
  9.  } 
  10.   
  11.  this.uniqueInstance = null; 
  12.   
  13.  } 
  14.   
  15.  Singleton.prototype.test = function(){ 
  16.   
  17.  alert("你已经成功示例化了"); 
  18.   
  19.  } 
  20.   
  21. Singleton.instance = function(){ 
  22.   
  23.  this.lock = true; 
  24.   
  25.  if(this.uniqueInstance == null){ 
  26.   
  27.  this.uniqueInstance = new Singleton();  
  28.   
  29. } 
  30.   
  31.  return this.uniqueInstance; 
  32.   
  33.  } 
  34.   
  35.  var test1 = Singleton.instance(); 
  36.   
  37.  test1.test();  

 

]]> http://www.footya.com//?action=show&id=120 AJAX/Javascript 2011-09-22 21:57 http://www.footya.com//?action=show&id=118 《Head First 设计模式》读书笔记2——设计模式之观察者模式 footya 观察者模式（Observer）

定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新。

此种模式通常被用来实现事件处理系统。
UML图示：

 大小: 10.43 K 尺寸: 616 x 239 浏览: 3 次 点击打开新窗口浏览全图
1、观察者（observer）
（Observer）将自己注册（Attach）到被观察对象（Subject）中，被观察对象将观察者存放在一个容器（observers）里。
2、被观察对象（subject）
被观察对象发生了某种变化，从容器中（observers）得到所有注册过的观察者，将变化通知观察者。
3、撤销观察
观察者告诉被观察者要撤销（Detach）观察，被观察者从容器中将观察者去除。

观察者将自己注册到被观察者的容器中时，被观察者不应该过问观察者的具体类型，而是应该使用观察者的接口。这样的优点是：假定程序中还有别的观察者，那么只要这个观察者也是相同的接口实现即可。一个被观察者可以对应多个观察者，当被观察者发生变化的时候，他可以将消息一一通知给所有的观察者。基于接口，而不是具体的实现——这一点为程序提供了更大的灵活性。

引用书里的例子：
需求1：设计一个气象站，这个气象站可以提供温度、湿度、气压这3种数据；
需求2：设计3个不同用途的公告板用来显示温度、湿度、气压等数据；
需求3：每当有温度、湿度、气压变化时，气象站都要通知给各个公告板来更新显示；
需求4：3个公告板中的任意一个都可以随时停止更新显示；


UML设计如下：

 大小: 10.32 K 尺寸: 493 x 317 浏览: 4 次 点击打开新窗口浏览全图

 js代码的实现如下：

JavaScript代码
  1. //主题即被观察者 
  2.   
  3. function Subject(){  
  4.   
  5.     this.observers = []; 
  6.   
  7. }  
  8.   
  9.    
  10.   
  11. Subject.prototype.addObserver = function(observer){  
  12.   
  13.     this.observers.push(observer); 
  14.   
  15. } 
  16.   
  17. Subject.prototype.delObserver = function(observer){  
  18.   
  19.     for (var i = 0, len = this.observers.length; i < len; i++) { 
  20.   
  21.             if (this.observers[i] == observer) { 
  22.   
  23.                 this.observers.splice(i,1); 
  24.   
  25.                 break; 
  26.   
  27.             } 
  28.   
  29.     } 
  30.   
  31. } 
  32.   
  33. Subject.prototype.notifyObserver = function(data){ 
  34.   
  35.      for (var i = 0, len = this.observers.length; i < len; i++) { 
  36.   
  37.             this.observers[i].updata(data); 
  38.   
  39.     } 
  40.   
  41. } 
  42.   
  43. //主题 
  44.   
  45. function WeatherDate(){ 
  46.   
  47.     Subject.apply(this,arguments); 
  48.   
  49.     this.states = {}; 
  50.   
  51. } 
  52.   
  53. WeatherDate.prototype = new Subject();  
  54.   
  55.    
  56.   
  57. WeatherDate.prototype.constructor = WeatherDate;  
  58.   
  59. WeatherDate.prototype.getState = function(){ 
  60.   
  61.     return this.states; 
  62.   
  63. }; 
  64.   
  65. WeatherDate.prototype.setState = function(obj){ 
  66.   
  67.     this.states = obj || {}; 
  68.   
  69. }; 
  70.   
  71. WeatherDate.prototype.stateChanged = function(){ 
  72.   
  73.     this.notifyObserver(this.states); 
  74.   
  75. } 
  76.   
  77.  
  78.   
  79. //观察者超类 
  80.   
  81. function Observer(){ 
  82.   
  83. } 
  84.   
  85. Observer.prototype.updata = function(data){ 
  86.   
  87.     this.data = data; 
  88.   
  89. }; 
  90.   
  91. //观察者1 
  92.   
  93. function BBSone(){ 
  94.   
  95.     Observer.apply(this,arguments); 
  96.   
  97. } 
  98.   
  99. BBSone.prototype = new Observer(); 
  100.   
  101. BBSone.prototype.constructor = BBSone; 
  102.   
  103. BBSone.prototype.updata = function(data){ 
  104.   
  105.     this.data = data; 
  106.   
  107.     this.display(); 
  108.   
  109. }; 
  110.   
  111. BBSone.prototype.display = function(){ 
  112.   
  113.     var a = []; 
  114.   
  115.     for(var k in this.data){ 
  116.   
  117.         var s = k + ":" + this.data[k]; 
  118.   
  119.         a.push(s) 
  120.   
  121.     } 
  122.   
  123.     a.join("/n"); 
  124.   
  125.     alert("BBSone:__"  +  a); 
  126.   
  127. } 
  128.   
  129. //观察者2 
  130.   
  131. function BBStwo(){ 
  132.   
  133.     Observer.apply(this,arguments); 
  134.   
  135. } 
  136.   
  137. BBStwo.prototype = new Observer(); 
  138.   
  139. BBStwo.prototype.constructor = BBSone; 
  140.   
  141. BBStwo.prototype.updata = function(data){ 
  142.   
  143.     this.data = data; 
  144.   
  145.     this.display(); 
  146.   
  147. }; 
  148.   
  149. BBStwo.prototype.display = function(){ 
  150.   
  151.     var a = []; 
  152.   
  153.     for(var k in this.data){ 
  154.   
  155.         var s = k + "-" + this.data[k]; 
  156.   
  157.         a.push(s) 
  158.   
  159.     } 
  160.   
  161.     a.join("\n"); 
  162.   
  163.     alert("BBStwo:__"+a); 
  164.   
  165. } 
  166.   
  167. function main(){ 
  168.   
  169.     var s = new WeatherDate(); 
  170.   
  171.     var a1 = new BBSone(); 
  172.   
  173.     var a2 = new BBStwo(); 
  174.   
  175.     s.addObserver(a1); 
  176.   
  177.     s.addObserver(a2); 
  178.   
  179.     s.setState({t1:"20",t2:"50%",t3:"0.5"}); 
  180.   
  181.     s.stateChanged(); 
        s.delObserver(a2);
        s.stateChanged();
  182.   
  183. } 
  184.   
  185. main();  

 

]]> http://www.footya.com//?action=show&id=118 学习总结 2011-09-18 17:33 http://www.footya.com//?action=show&id=117 《Head First 设计模式》读书笔记1——设计模式之策略模式 footya 最近在读《Head First 设计模式》，鉴于我记性不好，写点笔记吧。作为一个半路出家的javascript程序员，没有受过专业的训练，对于业务逻辑的分析大脑里没有一个可以依照的原则和思维模式，时常觉得很吃力。
学习设计模式之前先了解一下什么是模式，以下是从网上抄来的一个定义。
模式：每一个模式描述了一个在我们周围不断重复发生的问题，以及该问题的解决方案的核心。
今天记录第一个设计模式——策略模式（Strategy）

定义：策略模式定义了一系列的算法，并将每一个算法封装起来，让它们之间可以互相替换，此模式让算法的变化独立于使用算法的客户。

（原文：The Strategy Pattern defines a family of algorithms,encapsulates each one,and makes them interchangeable. Strategy lets the algorithm vary independently from clients that use it.）

UML图示：

大小: 6.19 K 尺寸: 540 x 171 浏览: 2 次 点击打开新窗口浏览全图

策略模式的组成：
抽象策略角色(strategy)： 策略类，通常由一个接口或者抽象类实现。
具体策略角色(concreteStrategyA,..)：包装了相关的算法和行为。
环境角色(context)：持有一个策略类的引用，最终给客户调用。

引用书里的例子：
需求1：设计一个游戏，游戏里有各种鸭子，都会游泳。
需求2：一部分鸭子会飞，一部分鸭子不会飞。
需求3：可以动态改变一些鸭子的行为，比如通过道具让一些不会飞的鸭子变得会飞。


初步设计的UML图如下：

大小: 5.51 K 尺寸: 398 x 305 浏览: 4 次 点击打开新窗口浏览全图

Ducks是使用飞行算法的客户，也就是上面提到的环境角色(context)，持有策略类FlyBehavior的引用。

FlyBehavior就是上面提到的抽象策略角色(strategy)，这里它是一个抽象类，定义了fly方法由子类实现具体的行为。

FlyNoWay和FlyNoWay就是上面提到的具体策略角色，它们继承自FlyBehavior，并实现fly方法的具体行为。

 

以下是js对上述描述的实现

 

JavaScript代码
  1. //抽象策略角色——飞行行为抽象类 
  2.   
  3. function FlyBehavior(){ 
  4.   
  5.  
  6.   
  7. } 
  8.   
  9. FlyBehavior.prototype.fly = function(){ 
  10.   
  11.     alert("please do the fly method"); 
  12.   
  13. } 
  14.   
  15. //具体策略角色——实现不能飞的策略 
  16.   
  17. function FlyNoWay(){ 
  18.   
  19.     FlyBehavior.apply(this,arguments) 
  20.   
  21. } 
  22.   
  23. FlyNoWay.prototype = new FlyBehavior(); 
  24.   
  25. FlyNoWay.prototype.constructor = FlyNoWay; 
  26.   
  27. FlyNoWay.prototype.fly = function(){ 
  28.   
  29.     alert("I can't fly"); 
  30.   
  31. } 
  32.   
  33. //具体策略角色——实现能飞的策略 
  34.   
  35. function FlyWithWings(){ 
  36.   
  37.     FlyBehavior.apply(this,arguments) 
  38.   
  39.  } 
  40.   
  41. FlyWithWings.prototype = new FlyBehavior(); 
  42.   
  43. FlyWithWings.prototype.constructor = FlyWithWings; 
  44.   
  45. FlyWithWings.prototype.fly = function(){ 
  46.   
  47.     alert("I'm flying"); 
  48.   
  49. }; 
  50.   
  51.  
  52.   
  53. //环境角色-使用飞行策略的客户 
  54.   
  55. function Ducks(fly){ 
  56.   
  57.     this._flyBehavior = fly; 
  58.   
  59.     this.fly = function(){ 
  60.   
  61.         this._flyBehavior.fly(); 
  62.   
  63.     }; 
  64.   
  65.  } 
  66.   
  67.  Ducks.prototype.swim = function(){ 
  68.   
  69.     alert("I'm swiming"); 
  70.   
  71.  } 
  72.   
  73.  
  74.   
  75. //以下执行A可以飞，B不可以飞 
  76.   
  77. var DuckA = new Ducks(new FlyWithWings()); 
  78.   
  79. DuckA.fly(); 
  80.   
  81. var DuckB = new Ducks(new FlyNoWay()); 
  82.   
  83. DuckB.fly();  

 
未完待续...(需要加上动态修改具体策略部分的逻辑)

 

 

]]> http://www.footya.com//?action=show&id=117 学习总结 2011-09-07 22:46 http://www.footya.com//?action=show&id=116 iPad相关的css问题总结 footya

1、ipad下文字看起来更稀疏，即文字间的间距更大：

表现：pc正好的文字在ipad下看可能折行
解决办法：缩小ipad的字间距如羡慕css代码

/*以下css只有ipad可以识别*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px){  .partA .one_r strong{letter-spacing:-1px;} }

2、ipad下的模块居中有时不起作用

表现：pc模块可以居中ipad下有时就不居中
解决办法：模块除了定宽和margin auto后，需要设置overflow:hidden阻止模块内元素溢出

]]> http://www.footya.com//?action=show&id=116 XHTML/CSS 2011-08-08 22:33 http://www.footya.com//?action=show&id=115 haslayout对动态改变布局的影响 footya 最近又碰到一个很诡异的css问题，把下面这段代码用ie6/7运行试试：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4.     <head> 
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6.     </head> 
  7.     <body> 
  8. <div id="s1" style="">s1</div> 
  9. <div id="s2" style="display:none;position:absolute;left:120px;top:20px;">s2</div> 
  10. <div id="s3" style="margin-top:50px;zoom:1;">s3</div> 
  11. </body> 
  12. <script type="text/javascript"> 
  13.     var s1 = document.getElementById("s1"); 
  14.     var s2 = document.getElementById("s2"); 
  15.     var s3 = document.getElementById("s3"); 
  16.     s1.onmouseover = function(e){ 
  17.         s2.style.display = ""; 
  18.     } 
  19.     s1.onmouseout = function(e){ 
  20.         s2.style.display = "none"; 
  21.     } 
  22. </script> 
  23. </html>  

现象：
IE6/7下
鼠标滑过s1时，s2显示，s3会向上跳，
鼠标滑出s1时，s2隐藏，s3回到原位，
s3的这个跳动是我们不希望的。

原因：
IE6\7下s3元素拥有haslayout后，s2的显示和隐藏会对s3的margin有影响
鼠标滑过s1时，s2显示，s3的margin-top属性会失效
鼠标滑出s1时，s2隐藏，s3的margin-top属性又生效

解决办法：
1、去掉s3上的zoom属性，或者再加zoom:0可以消除这个影响;（这个方法只对没有宽高的元素起作用）
2、s3的margin-top属性修改为padding-top;
3、s3和s2之间插入任意字符；
4、s3里面再加一层div s4把margin-top属性写在s4上;
上面任意一种办法都可以解决这个问题，你可以试着找找，欢迎把有创意的好办法反馈回来

]]> http://www.footya.com//?action=show&id=115 XHTML/CSS 2011-07-20 23:01 http://www.footya.com//?action=show&id=114 伪类对IE9 css透明属性的影响 footya 如果不是IE9下遇到诡异的显示问题，怎么也不会把伪类和透明联系起来，最近的项目遇到了这样的问题：
js动态设置一个容器为不透明，但是IE9下鼠标一滑过这个容器这个容器就不见了。各种手段调试了很久才发现，这个问题原来是因为IE9同时支持opacity和filter导致的。
经过反复测试得出如下结论：
1、IE9同时支持filter和opacity；

2、filter的优先级更高
 filter:alpha(opacity=0)；opacity:1;      透明
 filter:alpha(opacity=100)；opacity:0;  不透明

3、单独使用都可以起作用
 filter:alpha(opacity=50)
 opacity:0.5

4、css伪类(除a:hover)   
li:hover{}会触发opacity生效
  filter:alpha(opacity=0)；opacity:1;默认不透明
  鼠标滑过会触发filter生效，变为透明 

li:active{} 点击时有类型的表现
  filter:alpha(opacity=0)；opacity:1;默认不透明
   鼠标滑过会触发filter生效，变为透明

查看示例：《IE9 css伪类对透明属性的影响测试》

]]> http://www.footya.com//?action=show&id=114 XHTML/CSS 2011-06-21 22:28 http://www.footya.com//?action=show&id=113 apache ssi 配置 footya  httpd.conf文件
#AddType text/html .shtml
 #AddOutputFilter INCLUDES .shtml
替换成：
AddType text/html .html
AddOutputFilter INCLUDES .html

html文件里这样写就可以引入所需代码
<!--#include file="gui_Header.html"-->

]]> http://www.footya.com//?action=show&id=113 学习总结 2011-04-09 08:22 http://www.footya.com//?action=show&id=109 apache配置 php中没有php5apache2_2.dll的原因及解决办法 footya 在给apache配置php的过程中,如果php安装目录里没有php5apache2_2.dll,一定是下载的版本不对。
php 5.3.4有v9版和v6好几个版本
网站左边有几段文字:
which version do i choose?
if you are using php with apache 1 or apache2 from apache.org you need to use the vc6 versions of php
所以要下载v6c versions of php ，
v6c又有两个版本如下：
vc6 x86 non thread safe
vc6 x86 thread safe
以上两个版本中，non thread safe版的php在安装过程中,
没有apache的选项:
select the web server you wish to setup
iis fastcgi
other cgi
do not setup a web server

而thread safe版的安装过程中有apache 2.2.x module选项:
select the web server you wish to setup
apache 2.2.x module
apache cgi
iis fastcgi
iis cgi
nsapi
xitami
netserve web server
other cgi
do not setup a web server
-------------------------
所以应该下载的版本是 php 5.3.4vc6 x86 thread safe 去php官网下载,http://windows.php.net/download

有关apache的安装和配置请参照：《Apache+php+mysql在windows下的安装与配置图解（最新版）》

]]> http://www.footya.com//?action=show&id=109 学习总结 2011-02-27 10:36 http://www.footya.com//?action=show&id=108 Apache的Mode Rewrite模块的简单试用 footya 1、在[Apache安装目录]/conf/httpd.conf中找到
#LoadModule rewrite_module modules/mod_rewrite.so，去掉前面的注释符号#。
2、在[Apache安装目录]/conf/httpd.conf中找到
<Directory />
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Deny from all
</Directory>
把“AllowOverride None”改成“AllowOverride All”
3、在[Apache安装目录]/conf/httpd.conf中增加
RewriteEngine on
#RewriteBase /
RewriteRule ^/$ /new [R]
*以上规则的意思是访问根目录时定向到/new文件下

]]> http://www.footya.com//?action=show&id=108 学习总结 2011-02-12 15:58 http://www.footya.com//?action=show&id=107 软件设计师培训领悟 footya 能有这次培训机会纯属意外，短期的培训不是丰胸，不可能立刻就见效，培训只是提供一些思考方式和思路，为自己以后得设计提供一个参考，总之还是有点用处的。
感悟如下：
1、停止抱怨，不要老是怪需求变更等等；
2、提高自身素质，从小事做起，产品的好坏和程序员的素质息息相关；
3、从重构一步步到优秀；
4、克服代码的不良习惯，避免代码坏味道，避免大泥球；
5、架构和设计没有严格的界限，源代码也是设计；
6、需求的隐形成本需要能够描述清楚；
7、好的设计是1）实现需求，2）便于理解，3）可以应对变化；
8、架构图需要分开维度，不同的人关注不同的东西；
9、好好学习下设计模式，运用到自己的项目里去，及时开始用的很烂也要去尝试；
10、兵熊熊一个，将熊熊一窝，架构设计师的好坏决定着项目的成败；

]]> http://www.footya.com//?action=show&id=107 我参与的 2010-10-27 23:00 http://www.footya.com//?action=show&id=106 [译]iPad css布局在横向和纵向下的定位方法 footya 大小: 27.85 K 尺寸: 800 x 230 浏览: 6 次 点击打开新窗口浏览全图
原文：《iPad CSS Layout with landscape / portrait orientation modes》

       iPad今天终于登陆澳大利亚了，尽情欢呼吧！我准备尽快入手一台，这样就能继续完善我的css布局了使其尽可能的支持更多的设备了。可惜我现在还得继续使用iPhone SDK提供的iPad仿真器。
       为了庆祝iPad登陆我做了一个特别的 iPad网站布局，这个布局只用css就能实现iPad 横向和竖向的布局变化。这个布局可以从文章的结尾或者我的iPad示例页免费下载。
下面是这两种布局的一个简单的示意图：
大小: 16.11 K 尺寸: 500 x 303 浏览: 6 次 点击打开新窗口浏览全图
在横向（Landscape）的布局里有两列。主体内容在左边宽的一列里，三个碎块垂直叠在比较拥挤的右侧。当你把iPad竖起来时这个界面变为只有一列的设计。在竖向（Portrait）的布局里，主体内容占据了整个屏的宽度，剩下的三部分按三列横向依次定位到主体内容的下面。
       在这两种布局里有一个位于顶端的标头和一个位于地部的页脚。他们在横向时宽1024px，纵向时宽768px。看我的演示页可以看到更详细的精确到像素的范围。以下是我的演示页在iPad模拟器里的截图：
大小: 51.46 K 尺寸: 500 x 269 浏览: 24 次 点击打开新窗口浏览全图
这是怎么做到的？
首先我按1:1比例限定了这两种布局下的宽度使得它们能和iPad精确到像素的完全吻合。我用到了下面的META 标签：
这个变换布局的方法在没有JavaScript的帮助下就可以非常完美的工作。查看我的iPad布局示例或者直接下载示例文件亲自试一试。Demo   Download(ipad-css-layout.zip - 41kb)
希望你们能够喜欢这篇文章。如果你正在用你的iPad读这篇文章。。。那么你真是太幸运了：）。

XML/HTML代码
  1. <meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />  

以1:1的比例限定布局可以在iPad旋转时防止放大甚至溢出到正常的屏幕之外（通常，横向时更容易被放大，因为网页的被横跨1024px显示，与横向相比纵向时只有768px的宽度是可用的）。
       接下来结合这些我要利用一些css的规则来改变在竖向和横向下的布局。我能做到这些是利用@media的相关规则在竖向时把横向布局的css样式覆盖掉。下面是一些相关的css片断：

CSS代码
  1. /*normal styles here */  
  2. #wrap {   
  3.    width:1024px;   
  4. }   
  5. @media only screen and (orientation:portrait){   
  6.    /* portrait styles here */  
  7.    #wrap {   
  8.       width:768px;   
  9.    }   
  10. }  

 

--------------------------译文完-------------------------

文章并非逐字逐句翻译，很多都是按自己的理解写的，文章里的例子并没有用iPad试过，因为俺还没有：（。
此篇文章献给我曾经拥有过的好运，刚抽中的iPad就被取消了，很是郁闷，希望自己那天能真正拥有iPad的：）。

]]> http://www.footya.com//?action=show&id=106 XHTML/CSS 2010-10-22 15:23 http://www.footya.com//?action=show&id=102 一场关于用户体验的争论 footya 今天和同事讨论一个设计的合理性，悟到了一些东西。
先看两张图吧，以下两张图式针对项目里联系人分组模块的两种设计：

大小: 10.04 K 尺寸: 476 x 358 浏览: 3 次 点击打开新窗口浏览全图
图1：所有分组放在上面，如果分组个数超出宽度可以容纳的范围，会在两边出现通过点击可以滑动的小箭头。
大小: 11.33 K 尺寸: 543 x 358 浏览: 2 次 点击打开新窗口浏览全图
图2：所有分组放在左边，分组一直向下延伸，有多少个显示多少个。

两种设计的对比：

维度1【美观程度】：
图1的设计操作看起来更酷一点，喜欢炫酷效果的人可能会更喜欢第一种。
图2的设计简单直观，所有分组一目了然，这样的界面也会赢得很多人的喜欢。

维度2【操作成本】：
图1的设计要看第一个分组还好说直接点击一下就可以了，但是当分组多了以后，如果要看最后一个的时候就惨了，首先要把鼠标移动到右边那个很小的箭头上，接下来点击这个箭头，如果分组多的话需要点击很多次箭头才能到达最后一个。
图2的设计只需移动鼠标到分组页签，一次点击操作就可以看到自己想看的分组，如果分组多的话最多再滚几下滚轮，相比起来这个设计的操作成本要比图1小很多。

维度3【搜索】：
图1的设计页签处只能显示固定个数的分组，多出来的分组不点击箭头是不会显示出来的。图2的设计所有分组页签都显示在页面上。如果找不到分组，想要ctrl+F搜索的时候图2的优势就显示出来了。

维度4【开发成本】：
图1的设计复杂度高于图2，从页面制作到js逻辑实现都要比图2复杂很多，需要些更多的代码才能实现，开发成本不言而喻。

现在看来该选择哪一种设计就一目了然了。其实这个时候再回头看看最原始的设计就会发现上面两个已经是很大的进步了原始的设计如下图3：
大小: 11.18 K 尺寸: 400 x 481 浏览: 2 次 点击打开新窗口浏览全图。

]]> http://www.footya.com//?action=show&id=102 用户体验 2010-09-08 00:29 http://www.footya.com//?action=show&id=101 琐事 footya 看了下上一篇正式博文的时间到现在已经过去9个多月了，期间很长一段时间没有写东西，一方面是因为自己很懒，另一方面是因为域名出了点小问题，被迫关闭了半年多。在这巧无声息的9个月里，曾经有很多感悟和积累想写下来，都因为博客出问题偷懒了，趁着现在有点记忆捡点碎片吧。
1、户外：首先感谢美女格子，带我进入户外这个圈子，让我的业余生活变的丰富多彩，心态也变得更加乐观向上，更重要的是让我遇到了温柔、善良、贤惠等等优点的花花。感悟：“你怎么对待生活，生活就会怎么对待你”。
2、辞职：在纠结了3个多月以后，最终选择离开待了将近3年的新浪，很怀念那激情澎湃的日子和那些满怀理想的人们，是他们让我快速成长。新浪论坛、新浪吧、新浪页面构建、新浪RIA、新浪邮箱所有的这些都将是我宝贵的经历。
3、旅行：今年到目前为止去过的地方有济南(很暖和，但是不太干净)、青岛(一尘不染的美)、杭州(我的G1被永远的留在了那)、南京(厚重的像一位老人)、漠河(那里拥有目前为止很难见到的朴实人群)、北极村(中国最北，传说可以看到北极光的地方)、哈尔滨(一个很有情调的地方)。。。接下来会去哪我也不知道，总之如果时间和资金允许我不会停下来。
4、尊重：新的工作承担了新的责任，开始压力很大，自己在压力中磨练也在压力中成长。虽然团队在磨合过程中产生了一些冲突，但是只要大家心无恶意互相尊重，一切都不是问题。
5、自律：多与积极向上的人交流，不与满腹牢骚的愤青一起抱怨，环境不会因为抱怨而变好，只会因你积极向上而有所改善，情绪是可以传染的。自己要做的自律自省，不受别人影响也不要传染别人。
6、管理：新的工作有机会尝试一些管理类的事情，从面试、项目评估、任务分配再到一起做事情，学到了很多也结识了不少新朋友。
7、运动：很开心新的公司也开了游泳俱乐部，八中的游泳馆，50m、8泳道、都2M深，太爽了，重来没见过这么宽敞的游泳池。下一步准备参加羽毛球俱乐部，让身体接受全方位的锻炼。

]]> http://www.footya.com//?action=show&id=101 最近心情 2010-08-30 20:58 http://www.footya.com//?action=show&id=100 博客程序修复 footya 试试

]]> http://www.footya.com//?action=show&id=100 最近心情 2010-08-24 23:53