千里之行——www.footya.com http://www.footya.com// 人的头脑太复杂,时间过得久,有时候连自己也被自己骗了,记下来才是最真实的...... Copyright (C) 2004 Security Angel Team [S4T] All Rights Reserved. SaBlog-X Version 1.6 Build 20080806 Wed, 08 Feb 2012 17:23:46 +0000 30 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 浏览: 11 次 点击打开新窗口浏览全图

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

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 浏览: 0 次 点击打开新窗口浏览全图
命令模式的角色组成：
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 浏览: 1 次 点击打开新窗口浏览全图
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 浏览: 0 次 点击打开新窗口浏览全图

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

单件模式模式的实现基于两个要点：
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 浏览: 1 次 点击打开新窗口浏览全图
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 浏览: 2 次 点击打开新窗口浏览全图

 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 浏览: 0 次 点击打开新窗口浏览全图

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

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


初步设计的UML图如下：

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

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 浏览: 4 次 点击打开新窗口浏览全图
原文：《iPad CSS Layout with landscape / portrait orientation modes》

       iPad今天终于登陆澳大利亚了，尽情欢呼吧！我准备尽快入手一台，这样就能继续完善我的css布局了使其尽可能的支持更多的设备了。可惜我现在还得继续使用iPhone SDK提供的iPad仿真器。
       为了庆祝iPad登陆我做了一个特别的 iPad网站布局，这个布局只用css就能实现iPad 横向和竖向的布局变化。这个布局可以从文章的结尾或者我的iPad示例页免费下载。
下面是这两种布局的一个简单的示意图：
大小: 16.11 K 尺寸: 500 x 303 浏览: 4 次 点击打开新窗口浏览全图
在横向（Landscape）的布局里有两列。主体内容在左边宽的一列里，三个碎块垂直叠在比较拥挤的右侧。当你把iPad竖起来时这个界面变为只有一列的设计。在竖向（Portrait）的布局里，主体内容占据了整个屏的宽度，剩下的三部分按三列横向依次定位到主体内容的下面。
       在这两种布局里有一个位于顶端的标头和一个位于地部的页脚。他们在横向时宽1024px，纵向时宽768px。看我的演示页可以看到更详细的精确到像素的范围。以下是我的演示页在iPad模拟器里的截图：
大小: 51.46 K 尺寸: 500 x 269 浏览: 22 次 点击打开新窗口浏览全图
这是怎么做到的？
首先我按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 浏览: 2 次 点击打开新窗口浏览全图
图1：所有分组放在上面，如果分组个数超出宽度可以容纳的范围，会在两边出现通过点击可以滑动的小箭头。
大小: 11.33 K 尺寸: 543 x 358 浏览: 1 次 点击打开新窗口浏览全图
图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 浏览: 1 次 点击打开新窗口浏览全图。

]]> 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 http://www.footya.com//?action=show&id=98 《javascript高级程序设计》读书笔记3:事件 footya

js和HTML直接的交互是通过用户和浏览器操作页面时引发的事件来处理的。页面载入完成时，会出现一个事件。用户点击一个按钮时，点击也是一个事件。


事件流也就是事件发生的顺序，包括冒泡型事件和捕获型事件
冒泡型事件的基本思想是，事件从最特定的事件目标到最不特定的事件目标（document 对象）的顺序触发。事件按照DOM层次结构像水泡一样不断上升至顶端。

如果有这样的页面：
<html>
<head>
<title>test</title>

</head>
<body onclick="fun()">
<div onclick="fun()">click</div>

</body>
</html>

不同的浏览器冒泡顺序如下：
IE5.5 <div/> —> <body/> —> document
IE6.0 <div/> —> <body/> —> <html/> —> document
>=Mozilla 1.0 <div/> —> <body/> —> <html/> —> document  —> window

捕获型事件的基本思想是，事件从最不精确的对象（document 对象）开始触发，然后到最精确。事件按照DOM层次的顶端开始向下延伸。

DOM事件流

DOM同时支持两种事件模型：捕获型事件和冒泡型事件，但是捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束（大部分兼容标准的浏览器会延续到window对象）
同样用上面的例子点击div事件顺序如下：







DOM事件最独特的性质是，文本节点也触发事件（在IE中不会）。

事件处理函数/监听函数
用户响应某个事件而调用的函数成为事件处理函数（event handler），或者DOM称之为事件监听函数（event listener）。
在JavaScript中分配事件处理函数，如下：
var oDiv = document.getElementById("div");
oDiv.onclick = function(){

alert("hello");

}
在HTML中分配事件处理函数如下：
<div onclick="alert('hello')"></div>

IE的事件处理函数：

两个参数----要分配的事件处理函数的名字、一个函数
oDiv.attachEvent("onclick",fun);

oDiv.detachEvent("onclick",fun);
DOM的事件处理函数：

三个参数----事件名称、要分配的函数和处理函数是用于冒泡阶段(false)还是捕获阶段(true)
oDiv.addEventListener("click", fun,false);

oDiv.removeEventListener("click", fun,false);
如果使用addEventListener()将事件处理函数加入到捕获阶段，则必须在removeEventListener()中指明是捕获阶段，才能正确地将这个事件处理函数删除。

事件对象
发生的事件的信息的事件对象，包含的信息：
1、引起事件的对象；
2、事件发生时鼠标的信息；

3、事件发生时键盘的信息；
事件对象只在发生事件时才被创建，且只有事件处理函数才能访问。所有事件处理函数执行完毕后，事件对象就被销毁。

定位
IE中，事件对象是window对象的一个属性event。
oDiv.onclick =function(){

var oEvent = window.event;

}
DOM标准说，event对象必须作为唯一的参数传给事件处理函数。
oDiv.onclick = function(){

var oEvent = arguments[0];

}

或
oDiv.onclick = function(oEvent){

}
相似性
1、获取事件类型
oEvent.type
2、获取按键代码（keydown/keyup事件）
oEvent.keyCode  属性总包含代表按下按键的数值代码
3、检测shift、alt、ctrl键
oEvent.shiftKey
oEvent.altKey

oEvent.ctrlKey

每个属性包含一个表示按键是否被按下的Boolean值
4、获取客户端坐标
oEvent.clientX
oEvent.clientY
这些属性描述鼠标在该区域内的位置离边界有多远
5、获取屏幕坐标
oEvent.screenX
oEvent.screenY
这些属性返回表示离用户屏幕的边界有多远

区别
1、获取目标
IE oEvent.srcElement

DOM oEvent.target

2、获取字符代码
IE oEvent.keyCode  返回字符的代码等于他的Unicode值
DOM oEvent.charCode 返回字符的代码等于他的Unicode值
String.formCharCode(oEvent.charCode) 返回时机的字符
如果不确定按下的按键是否是字符，可以用isChar属性来进行判断：
if(oEvent.isChar){
var iCharCode = oEvent.charCode;

}

3、阻止某个事件的默认行为
IE oEvent.returnValue = false；
DOM oEvent.preventDefault();
4、停止事件复制（冒泡）
IE oEvent.cancelBubble = true
DOM oEvent.stopPropagation()


事件的类型
DOM标准定义了以下几组事件：
+ 鼠标事件：用户使用鼠标进行特定操作时触发；

+ 键盘事件：用户在键盘上敲击、输入时触发；
+ HTML事件：窗口发生变动或者发生特定的客户端--服务器端交互时触发；
+ 突变事件：底层的DOM结构发生改变时触发
鼠标事件
1、事件的属性
坐标属性
type属性
target或srcElement属性
shiftKey、ctrlKey、altKey和metaKey属性
button属性

2、顺序

要触发dblclick事件，在同一个目标上要按顺序发生以下事件：mousedown、mouseup、click、mousedown、mouseup、click、dblclick
键盘事件
keydown
keypress
keyup
1、事件的属性
keyCode属性
charCode属性
target或者srcElement属性
shiftKey、ctrlKey、altKey和metaKey属性

2、顺序

用户按一次某字符按键时，会按以下顺序发生事件：

keydown
keypress

Keyup

如果用户按一次某非字符按键，会按以下属性发生事件

keydown
keyup


HTML事件
load事件
unload事件
abort事件
error事件
select事件
change事件
submit事件
reset事件
resize事件
scroll事件
focus事件
blur事件

]]> http://www.footya.com//?action=show&id=98 AJAX/Javascript 2009-12-30 23:48 http://www.footya.com//?action=show&id=95 call和apply的一个简单的例子 footya 先看下手册上的解释:

call 方法

调用一个对象的一个方法，以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

参数

thisObj

可选项。将被用作当前对象的对象。

arg1, arg2,  , argN

可选项。将被传递方法参数序列。

说明

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply 方法

应用某一对象的一个方法，用另一个对象替换当前对象。

apply([thisObj[,argArray]])

参数

thisObj

可选项。将被用作当前对象的对象。

argArray

可选项。将被传递给该函数的参数数组。

说明

如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。

如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

从手册的解释来看，call和apply的作用是一样的：调用一个对象的一个方法，以另一个对象替换当前对象。
不同之处：
call 的参数为 将被传递方法参数序列。
apply的参数为 将被传递给该函数的参数数组

1、先来看一个没参数的

JavaScript代码
  1. function a(){  
  2.     this.name = "wo";  
  3.     this.showName = function(){  
  4.         alert(this.name);  
  5.     }  
  6. }  
  7. // a 通过使用apply方法临时把自身的this替换为b，使得b拥有了a的属性和方法  
  8. function b(){  
  9.     a.apply(this);//call 和 apply起的作用是一样的  
  10.     this.name = "ta";//  
  11. }  
  12. var bb = new b();  
  13. bb.showName();// out "ta"  

【未完待续】

]]> http://www.footya.com//?action=show&id=95 AJAX/Javascript 2009-10-20 11:11 http://www.footya.com//?action=show&id=93 判短form表单是否被修改的一个方法 footya 最近在开发中有这样一个需求：
如果在进行操作但未保存的情况下点击顶部其它页面链接，则弹出提示框，
大小: 6.06 K 尺寸: 327 x 153 浏览: 12 次 点击打开新窗口浏览全图
1、点击“确定”进入所有点页面并关闭本窗口；
2、点击“取消”或“x”，取消本次跳转操作并关闭本窗口。
不知道别人怎么做，我想出来的算法是：
1、取到form内所有表单的值，
2、把表单键值对转化为hash对象，
3、把hash对像转化为数组，
4、把数组拼接成字符串，
5、然后比较两个字符串是否相等。

JavaScript代码
  1. /**  
  2.      * 把表单内容转换为hash对象  
  3.      * @public  
  4.      * @param {HTMLElement} form对象  
  5.      * @return {oHash}  
  6.      * @author footya | yongsheng2@staff.sina.com.cn  
  7.      * @update 2009-8-10   修改自alz框架
  8.      * @example  
  9.      *          formToHash(document.forms[0]);  
  10.      */  
  11.     function formToHash(form){   
  12.         var oHash = {};   
  13.         var el;   
  14.         for(var i = 0,len = form.elements.length;i < len;i++){   
  15.             el = form.elements[i];   
  16.             if(el.name == "") continue;   
  17.             if(el.disabled) continue;   
  18.             switch(el.tagName.toLowerCase()){   
  19.                 case "fieldset":   
  20.                     break;   
  21.                 case "input":   
  22.                     switch(el.type){   
  23.                     case "radio":   
  24.                         if(el.checked)   
  25.                             oHash[el.name] = el.value;   
  26.                         break;   
  27.                     case "checkbox":   
  28.                         if(el.checked){   
  29.                            if(!oHash[el.name])   
  30.                             oHash[el.name] = [el.value];   
  31.                            else  
  32.                             oHash[el.name].push(el.value);   
  33.                         }   
  34.                         break;   
  35.                     case "button":   
  36.                         break;   
  37.                     case "image":   
  38.                         break;   
  39.                     default:   
  40.                         oHash[el.name] = el.value;   
  41.                         break;   
  42.                     }   
  43.                     break;   
  44.                 case "select":   
  45.                     if(el.multiple){   
  46.                         //alert(el.name);   
  47.                         for(var j = 0, lens = el.options.length;j < lens; j++){   
  48.                             if(el.options[j].selected){   
  49.                                 if(!oHash[el.name])   
  50.                                     oHash[el.name] = [el.options[j].value];   
  51.                                 else  
  52.                                     oHash[el.name].push(el.options[j].value);   
  53.                             }   
  54.                         }   
  55.                     }else{   
  56.                             oHash[el.name] = el.value;   
  57.                     }   
  58.                     break;   
  59.                 default:   
  60.                     oHash[el.name] = el.value;   
  61.                     break;   
  62.             }   
  63.         }   
  64.         el = null;   
  65.         return oHash;   
  66.     }  
JavaScript代码
  1. /**  
  2.  * 把含有表单数据的hash对象转化为数组  
  3.  * @public  
  4.  * @param {obj} hash对象  
  5.  * @return {Array}  
  6.  * @author footya | yongsheng2@staff.sina.com.cn  
  7.  * @update 2009-8-10   修改自alz框架
  8.  * @example  
  9.  *      var aData = formHashToArray(hash);  
  10.  */  
  11. function formHashToArray(hash){   
  12.     var a = [];   
  13.     for(var k in hash){   
  14.         if(typeof(hash[k]) == "string"){   
  15.             a.push(k + "=" + encodeURIComponent(hash[k]));   
  16.         }   
  17.         else{   
  18.             for(var i = 0, len = hash[k].length; i < len; i++){   
  19.                 a.push( k + "=" + encodeURIComponent(hash[k][i]));   
  20.             }   
  21.         }   
  22.     }   
  23.     return a;   
  24. }  


调用这两个方法来实现字符串对比

JavaScript代码
  1. var FormHashin = formToHash(FILTERFORM);//记录表单的初始状态   
  2.     /***change window***/  
  3.     function outWrite(e){   
  4.         var event = window.event||e;   
  5.         event.returnValue = "您修改的设置尚未保存，确定要离开吗？";   
  6.     }   
  7.     window.onbeforeunload = function(e){//卸载页面时再获取一次表单状态   
  8.         var FormHashout = formToHash(FILTERFORM);   
  9.         if(!compareHash(FormHashin, FormHashout)){   
  10.             try{outWrite(e)}catch(exp){};   
  11.         }   
  12.     };   
  13.     //比较两个hash对象是否相等。   
  14.     function compareHash(hash1,hash2){   
  15.         var h1 = formHashToArray(hash1).join("-");   
  16.         var h2 = formHashToArray(hash2).join("-");   
  17.         if(h1 == h2){   
  18.             return true;   
  19.         }else{   
  20.             return false;   
  21.         }   
  22.     }  
]]> http://www.footya.com//?action=show&id=93 AJAX/Javascript 2009-09-24 14:01