LlinZzi's Blog

JavaScript面向对象编程[三] 自定义事件

Fri, 28 Nov 2008 10:27:43 +0800

继 < JavaScript面向对象编程[二] 事件处理>(http://onewww.net/blog/article.asp?id=124)

上一篇给foo类增加了
addEvent和removeEvent方便事件的注册与注销

这次总结下自定义事件的几种方法

 程序代码


    <script type="text/javascript">
        <!--

    var foo = function(){ this.init.apply(this,arguments);};

    foo.prototype = {
        init:function(_name){
            this.name = _name;
            this.addEvent('click',document,this.say,this,'hello world!');
        },
        say:function(_ev,_word){
            alert(this.name +':' +_word);
            this.stop();
            this.onSay(_word);
        },
        stop:function(){
            this.removeEvent('click',document,this.say);
        },
        addEvent:function(_event,_element,_fn,_scope,_args){
            var args = Array.prototype.slice.call(arguments, 0);  
            ev = args.shift(),
            element = args.shift(),
            fn = args.shift(),
            scope = args.length>0?args.shift():window;
            element['e'+ev+fn] =  function(_ev){
                _ev == _ev || window.event;
                args.unshift(_ev);
                fn.apply(scope,args);
            };
            if (element.addEventListener) {
                element.addEventListener(ev, element['e'+ev+fn], false);
            } else if (element.attachEvent) {
                element.attachEvent("on" +ev, element['e'+ev+fn]);
            }
        },
        removeEvent:function(_event,_element,_fn){
            if (_element.removeEventListener) {
                _element.removeEventListener(_event, _element['e'+_event+_fn], false);
            } else if (_element.detachEvent) {
                _element.detachEvent("on" +_event, _element['e'+_event+_fn]);
            }
            try {
                delete _element['e'+_event+_fn];
            }catch(_ex){
                _element['e'+_event+_fn] = null;
            }
        },
        onSay:function(){}

    }


var a = new foo('llinzzi');
a.onSay = function(_word){
    alert('事件:'+this.name +'刚说了'+ _word);
}

HTML代码

<html>
<head>
	<title>自定义事件</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
	<meta name="keywords" content="" >
	<meta name="description" content="" >
</head>
<body>

var foo = function(){ this.init.apply(this,arguments);};

foo.prototype = {
		init:function(_name){
			this.name = _name;
			this.addEvent('click',document,this.say,this,'hello world!');
		},
		say:function(_ev,_word){
			alert(this.name +':' +_word);
			this.stop();
			this.onSay(_word);
		},
		stop:function(){
			this.removeEvent('click',document,this.say);
		},
		addEvent:function(_event,_element,_fn,_scope,_args){
			var args = Array.prototype.slice.call(arguments, 0);  
			ev = args.shift(),
			element = args.shift(),
			fn = args.shift(),
			scope = args.length>0?args.shift():window;
			element['e'+ev+fn] =  function(_ev){
				_ev == _ev || window.event;
				args.unshift(_ev);
				fn.apply(scope,args);
			};
			if (element.addEventListener) {
				element.addEventListener(ev, element['e'+ev+fn], false);
			} else if (element.attachEvent) {
				element.attachEvent("on" +ev, element['e'+ev+fn]);
			}
		},
		removeEvent:function(_event,_element,_fn){
			if (_element.removeEventListener) {
				_element.removeEventListener(_event, _element['e'+_event+_fn], false);
			} else if (_element.detachEvent) {
				_element.detachEvent("on" +_event, _element['e'+_event+_fn]);
			}
			try {
				delete _element['e'+_event+_fn];
			}catch(_ex){
				_element['e'+_event+_fn] = null;
			}
		},
		onSay:function(){}

}

var a = new foo('llinzzi');
a.onSay = function(_word){
	alert('事件:'+this.name +'刚说了'+ _word);
}

// -->
	</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

增加了个onSay的事件，在类定义的时候只定义成空函数，然后在需要的时候调用，定义具体的方法是在类实例化后，给实例中的onSay

缺点是只能定义一次的onSay的回调，如果多次定义后面的会把前面的覆盖掉，修改一下。

 程序代码


    var foo = function(){ this.init.apply(this,arguments);};

    foo.prototype = {
        init:function(_name){
            this.name = _name;
            this.addEvent('click',document,this.say,this,'hello world!');
        },
        say:function(_ev,_word){
            alert(this.name +':' +_word);
            this.stop();
            this._onSay(_word);
        },
        stop:function(){
            this.removeEvent('click',document,this.say);
        },
        addEvent:function(_event,_element,_fn,_scope,_args){
            var args = Array.prototype.slice.call(arguments, 0);  
            ev = args.shift(),
            element = args.shift(),
            fn = args.shift(),
            scope = args.length>0?args.shift():window;
            element['e'+ev+fn] =  function(_ev){
                _ev == _ev || window.event;
                args.unshift(_ev);
                fn.apply(scope,args);
            };
            if (element.addEventListener) {
                element.addEventListener(ev, element['e'+ev+fn], false);
            } else if (element.attachEvent) {
                element.attachEvent("on" +ev, element['e'+ev+fn]);
            }
        },
        removeEvent:function(_event,_element,_fn){
            if (_element.removeEventListener) {
                _element.removeEventListener(_event, _element['e'+_event+_fn], false);
            } else if (_element.detachEvent) {
                _element.detachEvent("on" +_event, _element['e'+_event+_fn]);
            }
            try {
                delete _element['e'+_event+_fn];
            }catch(_ex){
                _element['e'+_event+_fn] = null;
            }
        },
        _onSay:function(){
            if(!this._onSayArray) return;    
            for(var i=0; i<this._onSayArray.length; i++){
                this._onSayArray[i].apply(this,arguments);
            }
        },
        addOnSay:function(_fn){
            if(!this._onSayArray) this._onSayArray = new Array();
            this._onSayArray.push(_fn);
        }
    }


var a = new foo('llinzzi');
a.addOnSay(function(_word){
    alert('事件1:'+this.name +'刚说了'+ _word);
});
a.addOnSay(function(_word){
    alert('事件2:'+this.name +'刚说了'+ _word);
});

HTML代码

var foo = function(){ this.init.apply(this,arguments);};

foo.prototype = {
		init:function(_name){
			this.name = _name;
			this.addEvent('click',document,this.say,this,'hello world!');
		},
		say:function(_ev,_word){
			alert(this.name +':' +_word);
			this.stop();
			this._onSay(_word);
		},
		stop:function(){
			this.removeEvent('click',document,this.say);
		},
		addEvent:function(_event,_element,_fn,_scope,_args){
			var args = Array.prototype.slice.call(arguments, 0);  
			ev = args.shift(),
			element = args.shift(),
			fn = args.shift(),
			scope = args.length>0?args.shift():window;
			element['e'+ev+fn] =  function(_ev){
				_ev == _ev || window.event;
				args.unshift(_ev);
				fn.apply(scope,args);
			};
			if (element.addEventListener) {
				element.addEventListener(ev, element['e'+ev+fn], false);
			} else if (element.attachEvent) {
				element.attachEvent("on" +ev, element['e'+ev+fn]);
			}
		},
		removeEvent:function(_event,_element,_fn){
			if (_element.removeEventListener) {
				_element.removeEventListener(_event, _element['e'+_event+_fn], false);
			} else if (_element.detachEvent) {
				_element.detachEvent("on" +_event, _element['e'+_event+_fn]);
			}
			try {
				delete _element['e'+_event+_fn];
			}catch(_ex){
				_element['e'+_event+_fn] = null;
			}
		},
		_onSay:function(){
			if(!this._onSayArray) return;	
			for(var i=0; i<this._onSayArray.length; i++){
				this._onSayArray[i].apply(this,arguments);
			}
		},
		addOnSay:function(_fn){
			if(!this._onSayArray) this._onSayArray = new Array();
			this._onSayArray.push(_fn);
		}
	}

var a = new foo('llinzzi');
a.addOnSay(function(_word){
	alert('事件1:'+this.name +'刚说了'+ _word);
});
a.addOnSay(function(_word){
	alert('事件2:'+this.name +'刚说了'+ _word);
});

// -->
	</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

实例通过addOnSay方法来增加事件响应，可以增加多个。

缺点，代码繁琐，如果要增加addOnSayAfter addOnSayBefore 就要增加很多代码。

再修改一下

 程序代码


    var foo = function(){ this.init.apply(this,arguments);};

    foo.prototype = {
        init:function(_name){
            this.name = _name;
            this.addEvent('click',document,this.say,this,'hello world!');
        },
        say:function(_ev,_word){
            this.fireEvent('saybefore',_word);
            alert(this.name +':' +_word);
            this.stop();
            this.fireEvent('sayafter',_word);
        },
        stop:function(){
            this.removeEvent('click',document,this.say);
        },
        addEvent:function(_event,_element,_fn,_scope,_args){
            var args = Array.prototype.slice.call(arguments, 0);  
            ev = args.shift(),
            element = args.shift(),
            fn = args.shift(),
            scope = args.length>0?args.shift():window;
            element['e'+ev+fn] =  function(_ev){
                _ev == _ev || window.event;
                args.unshift(_ev);
                fn.apply(scope,args);
            };
            if (element.addEventListener) {
                element.addEventListener(ev, element['e'+ev+fn], false);
            } else if (element.attachEvent) {
                element.attachEvent("on" +ev, element['e'+ev+fn]);
            }
        },
        removeEvent:function(_event,_element,_fn){
            if (_element.removeEventListener) {
                _element.removeEventListener(_event, _element['e'+_event+_fn], false);
            } else if (_element.detachEvent) {
                _element.detachEvent("on" +_event, _element['e'+_event+_fn]);
            }
            try {
                delete _element['e'+_event+_fn];
            }catch(_ex){
                _element['e'+_event+_fn] = null;
            }
        },
        fireEvent:function(){
            var args = Array.prototype.slice.call(arguments, 0);  
            var _event = args.shift();
            if(!this.cusEvents) return;
            if(!this.cusEvents[_event]) return;
            for(var i=0; i<this.cusEvents[_event].length; i++){
                this.cusEvents[_event][i].apply(this,args);
            }
        },
        catchEvent:function(_event,_fn){
            if(!this.cusEvents) this.cusEvents = {}
            if(!this.cusEvents[_event]) this.cusEvents[_event] = new Array();
            this.cusEvents[_event].push(_fn);
        }
    }


var a = new foo('llinzzi');

a.catchEvent('saybefore',function(_word){
    alert('事件1:'+this.name +'想说'+ _word);
});

a.catchEvent('sayafter',function(_word){
    alert('事件2:'+this.name +'刚说了'+ _word);
});

HTML代码

var foo = function(){ this.init.apply(this,arguments);};

foo.prototype = {
		init:function(_name){
			this.name = _name;
			this.addEvent('click',document,this.say,this,'hello world!');
		},
		say:function(_ev,_word){
			this.fireEvent('saybefore',_word);
			alert(this.name +':' +_word);
			this.stop();
			this.fireEvent('sayafter',_word);
		},
		stop:function(){
			this.removeEvent('click',document,this.say);
		},
		addEvent:function(_event,_element,_fn,_scope,_args){
			var args = Array.prototype.slice.call(arguments, 0);  
			ev = args.shift(),
			element = args.shift(),
			fn = args.shift(),
			scope = args.length>0?args.shift():window;
			element['e'+ev+fn] =  function(_ev){
				_ev == _ev || window.event;
				args.unshift(_ev);
				fn.apply(scope,args);
			};
			if (element.addEventListener) {
				element.addEventListener(ev, element['e'+ev+fn], false);
			} else if (element.attachEvent) {
				element.attachEvent("on" +ev, element['e'+ev+fn]);
			}
		},
		removeEvent:function(_event,_element,_fn){
			if (_element.removeEventListener) {
				_element.removeEventListener(_event, _element['e'+_event+_fn], false);
			} else if (_element.detachEvent) {
				_element.detachEvent("on" +_event, _element['e'+_event+_fn]);
			}
			try {
				delete _element['e'+_event+_fn];
			}catch(_ex){
				_element['e'+_event+_fn] = null;
			}
		},
		fireEvent:function(){
			var args = Array.prototype.slice.call(arguments, 0);  
			var _event = args.shift();
			if(!this.cusEvents) return;
			if(!this.cusEvents[_event]) return;
			for(var i=0; i<this.cusEvents[_event].length; i++){
				this.cusEvents[_event][i].apply(this,args);
			}
		},
		catchEvent:function(_event,_fn){
			if(!this.cusEvents) this.cusEvents = {}
			if(!this.cusEvents[_event]) this.cusEvents[_event] = new Array();
			this.cusEvents[_event].push(_fn);
		}
	}

var a = new foo('llinzzi');

a.catchEvent('saybefore',function(_word){
	alert('事件1:'+this.name +'想说'+ _word);
});

a.catchEvent('sayafter',function(_word){
	alert('事件2:'+this.name +'刚说了'+ _word);
});

// -->
	</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

最后如果将catchEvent fireEvent addEvent removeEvent 单独放在一个类.EventHeloper
将addEvent和catchEvent整合
EventHeloper.addEvent(element/object,dom event/custom event,callback) 这样还是很方便的。

 程序代码


    EventHelper = {
        Events:{Dom:{},Custom:{}},
        addEvent:function(_object,_event,_fn,_scope,_args){
            var args = Array.prototype.slice.call(arguments, 0),  
                obj = args.shift(),
                ev = args.shift(),
                fn = args.shift(),
                scope = args.length>0?args.shift():window;
            var eType = obj.nodeType?'Dom':'Custom';
            var fun;
            if(eType=='Dom'){
                sfn = function(_ev){
                    _ev == _ev || window.event;
                    args.unshift(_ev);
                    fn.apply(scope,args);
                }
                if (obj.addEventListener) {
                    obj.addEventListener(ev,sfn, false);
                } else if (obj.attachEvent) {
                    obj.attachEvent("on" +ev,sfn);
                }
            }else {
                sfn = function(){
                    var __sargs = Array.prototype.slice.call(arguments, 0);
                    var _sargs = __sargs.concat(args);
                    fn.apply(scope,_sargs);
                }    
            }
            fun = { fn:fn,sfn:sfn };
            this.Events[eType][obj] = this.Events[eType][obj] || {};
            this.Events[eType][obj][ev] = this.Events[eType][obj][ev] || new Array();
            this.Events[eType][obj][ev].push(fun);
        },
        removeEvent:function(_object,_event,_fn){
            var obj = _object,
                ev = _event,
                fn = _fn;
            var eType = obj.nodeType?'Dom':'Custom';
            if(!this.Events[eType][obj]) return;

            var fun;
            for( var i=0; i<this.Events[eType][obj][ev].length;i++){
                if(fn == this.Events[eType][obj][ev][i].fn){
                    fun = this.Events[eType][obj][ev][i].sfn;
                    this.Events[eType][obj][ev].splice(i,1);
                    break;
                }
            }
            if(eType=='Dom'){
                if (obj.removeEventListener) {
                    obj.removeEventListener(ev, fun, false);
                } else if (obj.detachEvent) {
                    obj.detachEvent("on" + ev, fun);
                }
            }

        },
        fireEvent:function(_object,_event){
            var args = Array.prototype.slice.call(arguments, 0),  
                obj = args.shift(),
                ev = args.shift();
            var eType = 'Custom';
            if((!this.Events[eType][obj]) || (!this.Events[eType][obj][ev])) return;
            for(var i=0; i<this.Events[eType][obj][ev].length; i++){
                this.Events[eType][obj][ev][i].sfn.apply(window,args);
            }
        }
    }

修改一下演示的例子

HTML代码

EventHelper = {
		Events:{Dom:{},Custom:{}},
		addEvent:function(_object,_event,_fn,_scope,_args){
			var args = Array.prototype.slice.call(arguments, 0),  
				obj = args.shift(),
				ev = args.shift(),
				fn = args.shift(),
				scope = args.length>0?args.shift():window;
			var eType = obj.nodeType?'Dom':'Custom';
			var fun;
			if(eType=='Dom'){
				sfn = function(_ev){
					_ev == _ev || window.event;
					args.unshift(_ev);
					fn.apply(scope,args);
				}
				if (obj.addEventListener) {
					obj.addEventListener(ev,sfn, false);
				} else if (obj.attachEvent) {
					obj.attachEvent("on" +ev,sfn);
				}
			}else {
				sfn = function(){
					var __sargs = Array.prototype.slice.call(arguments, 0);
					var _sargs = __sargs.concat(args);
					fn.apply(scope,_sargs);
				}	
			}
			fun = { fn:fn,sfn:sfn };
			this.Events[eType][obj] = this.Events[eType][obj] || {};
			this.Events[eType][obj][ev] = this.Events[eType][obj][ev] || new Array();
			this.Events[eType][obj][ev].push(fun);
		},
		removeEvent:function(_object,_event,_fn){
			var obj = _object,
				ev = _event,
				fn = _fn;
			var eType = obj.nodeType?'Dom':'Custom';
			if(!this.Events[eType][obj]) return;

var fun;
			for( var i=0; i<this.Events[eType][obj][ev].length;i++){
				if(fn == this.Events[eType][obj][ev][i].fn){
					fun = this.Events[eType][obj][ev][i].sfn;
					this.Events[eType][obj][ev].splice(i,1);
					break;
				}
			}
			if(eType=='Dom'){
				if (obj.removeEventListener) {
					obj.removeEventListener(ev, fun, false);
				} else if (obj.detachEvent) {
					obj.detachEvent("on" + ev, fun);
				}
			}

},
		fireEvent:function(_object,_event){
			var args = Array.prototype.slice.call(arguments, 0),  
				obj = args.shift(),
				ev = args.shift();
			var eType = 'Custom';
			if((!this.Events[eType][obj]) || (!this.Events[eType][obj][ev])) return;
			for(var i=0; i<this.Events[eType][obj][ev].length; i++){
				this.Events[eType][obj][ev][i].sfn.apply(window,args);
			}
		}
	}

var foo = function(){ this.init.apply(this,arguments);};

foo.prototype = {
		init:function(_name){
			this.name = _name;
			EventHelper.addEvent(document,'click',this.say,this,'hello world!');
		},
		say:function(_ev,_word){
			EventHelper.fireEvent(this,'saybefore',_word);
			alert(this.name +':' +_word);
			this.stop();
			EventHelper.fireEvent(this,'sayafter',_word);
		},
		stop:function(){
			EventHelper.removeEvent(document,'click',this.say);
		}
	}

var a = new foo('llinzzi');

function sayBefore(_word,_word2){
		alert('事件1:'+this.name +'想说'+ _word+_word2);
	}
	function sayAfter(_word){
		alert('事件2:'+this.name +'刚说了'+ _word);
	}

EventHelper.addEvent(a,'saybefore',sayBefore,a,'外部的数据');
	//EventHelper.removeEvent(a,'saybefore',sayBefore);
	EventHelper.addEvent(a,'sayafter',sayBefore,a);

// -->
	</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上面例子的 EventHelper.addEvent方法可以增加自定义事件或者原生的事件
EventHelper.addEvent(document,'click',function(){alert('hello');}); // 原生事件
EventHelper.addEvent(foo,'say',function(){alert('hello');}); // 自定义时间

对应的EventHelper.removeEvent也可以移除自定义事件。

IE下的强大调试工具DebugBar

Wed, 26 Nov 2008 09:03:37 +0800

一直以为Core Services的DebugBar是收费的，今天才发现针对个人用户是免费的。

著名的IETester也是Core Services公司的产品。

还有能让ie支持console.log()的CompanionJS。

DebugBar可以号称IE下的FireBug了。

见截图。

下载地址
http://www.debugbar.com/download.php

个人用户的注册方法
http://www.debugbar.com/register/index.php

==================================================================
还有一个更强力的 IE WebDeveloper ，但是要收费

下载
http://www.ieinspector.com/dominspector/download.html

JavaScript面向对象编程[二] 事件处理

Thu, 20 Nov 2008 17:06:32 +0800

继 < JavaScript面向对象编程[一] 构造函数 >(http://onewww.net/blog/article.asp?id=106)

如果采用上篇文章的方法构建的类，如果要处理事件按通常的写法会造成回调函数作用域丢失。

 程序代码


        var foo = function(){ this.init.apply(this,arguments);};
        
        foo.prototype = {
            init:function(_name){
                 this.name = _name;
                 this.addEvent('click',document,this.say);
            },
            say:function(_ev){
                alert(this.name);
                this.stop();
            },
            stop:function(){
                 this.removeEvent('click',document,this.say);
          },
            addEvent:function(_event,_element,_fn){
                if (_element.addEventListener) {
                    _element.addEventListener(_event, _fn, false);
                } else if (_element.attachEvent) {
                    _element.attachEvent("on" +_event,_fn);
                } 
            },
            removeEvent:function(_event,_element,_fn){
                if (_element.removeEventListener) {
                    _element.removeEventListener(_event, _fn, false);
                } else if (_element.detachEvent) {
                    _element.detachEvent("on" +_event, _fn);
                }
            }
        }

        var a = new foo('llinzzi');

以上代码可以观察到this.say的alert方法已经调用，但内部的this.name已经不存在了，因为找不到this了。并且如果要像say里面传值似乎也比较麻烦。

解决this丢失和传值问题的代码，并解决传this后不能注销事件的问题。

 程序代码

        var foo = function(){ this.init.apply(this,arguments);};
        
        foo.prototype = {
            init:function(_name){
                 this.name = _name;
                 this.addEvent('click',document,this.say,this,'hello world!');
            },
            say:function(_ev,_word){
                alert(this.name +':' +_word);
                this.stop();
            },
            stop:function(){
                 this.removeEvent('click',document,this.say);
          },
            addEvent:function(_event,_element,_fn,_scope,_args){
                var args = this._toArray(arguments),
                    ev = args.shift(),
                    element = args.shift(),
                    fn = args.shift(),
                    scope = args.length>0?args.shift():window;
                element['e'+ev+fn] =  function(_ev){
                    _ev == _ev || window.event;
                    args.unshift(_ev);
                    fn.apply(scope,args); 
                };
                if (element.addEventListener) {
                    element.addEventListener(ev, element['e'+ev+fn], false);
                } else if (element.attachEvent) {
                    element.attachEvent("on" +ev, element['e'+ev+fn]);
                } 
            },
            removeEvent:function(_event,_element,_fn){
                if (_element.removeEventListener) {
                    _element.removeEventListener(_event, _element['e'+_event+_fn], false);
                } else if (_element.detachEvent) {
                    _element.detachEvent("on" +_event, _element['e'+_event+_fn]);
                } 
                try {
                    delete _element['e'+_event+_fn];
                }catch(_ex){
                    _element['e'+_event+_fn] = null;
                }
            },
            _toArray:function(iterable){
                if (!iterable) return [];
                if (iterable.toArray) return iterable.toArray();
                var length = iterable.length || 0, results = new Array(length);
                while (length--) results[length] = iterable[length];
                return results;
            }
        }


        var a = new foo('llinzzi');

下一次会分享一下在用面向对象编程过程中的一些心得，有关设计模式的一些整理。

JavaScript获取准确的行高

Wed, 19 Nov 2008 09:39:37 +0800

需求：n多行文字的div，隐藏超过5行的部分。
分析：我能想到的有2种思路，一种是计算5行的文字个数，重新innerHTML。第二种给div设置高度，沿着第二个思路往下走，就是设置div的高度为5×lineheigh。
解决：任务锁定到货的lineheight的问题上。css的设置会影响到lineheight。所以首先要获得css的lineheight与fontsize，如果有padding的话，也可以算进去。

相关知识点：
1，获取css不能通过element.style的方式，这只能获得内联样式，获得不到样式表中的定义。需要采用二级DOM。

 程序代码

    var style = _element.currentStyle || document.defaultView.getComputedStyle(_element,null);
        var value = style[_property]

2，ie返回的单位是pt，ff返回的是px。需要pt到px的转换

 程序代码

    var px = parseInt(pt)*((1/72)*screen.deviceXDPI) +'px';

3，ie在没有设置lineheight的情况下会返回‘normal'，normal的数值究竟是多少？浏览器的默认高度是多少？没找到理论依据，希望了解的朋友提供下。我计算出来的如下公式。ie和ff都如此，但ff是可以读出默认数值的。所以似乎也没有计算的必要。

 程序代码

var defaultLineheight = fontsize*(7/6);

把以上代码攒起来，封装一个设置隐藏多余行的类

 程序代码

(function(){

 var AutoOverHider = function() { this.init.apply(this,arguments);};

 AutoOverHider.prototype = {
     init:function(_element,_maxLine){
        this.element = document.getElementById(_element);
        if(_maxLine) this.hide(_maxLine);
    },
    hide:function(_maxLine){
        this.maxLine = _maxLine;
        var lineHeight = this._getStyle('lineHeight');
        if(lineHeight=='normal') { lineHeight = 7/6+'';}
        if(lineHeight.substr(lineHeight.length-2)!='px')    lineHeight = lineHeight * parseInt(this._getStyle('fontSize')) + 'px';
        var paddingHeight = this._getStyle('paddingBottom');
        alert(paddingHeight);
        this.height =  this.maxLine * parseInt(lineHeight) - parseInt(paddingHeight);
        this.element.style.height = this.height  + 'px';
        this.element.style.overflow = 'hidden';
    },
    show:function(){
        this.element.style.height = 'auto';
    },
    _getStyle:function(_property,_element){
        _element = _element||this.element;
        var style = _element.currentStyle || document.defaultView.getComputedStyle(_element,null);
        var value = style[_property]
        if(/*@cc_on!@*/0 ) {
            if(value.substr(value.length-2)=='pt')
                value = parseInt(value)*((1/72)*screen.deviceXDPI) +'px';
        }
        return value;
    }
 };
 
 
})()

调用

 程序代码

<div id="t1">
千余字
</div>

 var a1 = new AutoOverHider('t1');
 a1.hide(5);
或者
 var a1 = new AutoOverHider('t1'，5);

macbook重装系统

Tue, 21 Oct 2008 20:38:36 +0800

朋友一台macbook系统坏了，让我拿来修一下。此前我也没玩过mac os x
10.4的系统，也顺便想升级到10.5 印象里重新安装10.5比升级更方便些。
下载了一个10.5的镜像6.6G，下了3天，开始还挺开心，后来反应过来一张4.7的dvd刻不下。。去找了下h9的dvd碟，没买到。
于是回来琢磨怎么硬盘安装，可以用火线的ipod来安装，可我没有。
还有一套方案是先给本分区，分2个驱，把镜像恢复到第二个分区，第二个分区就变成了安装盘，重启可引导。
可用bootcamp分区，由于是10.4的系统所以只能用1.4的bootcamp，好不容易下载到，提示已过期，吐血修改系统时间，搞定，安装后提示硬盘损坏，然我修复，于是修复之，修复提示无法修复。。玩我。。
第二天和克军借了一张macbook的10.5.4的系统盘，和文丞借了个macbook pro的10.5.2的盘，兴冲冲的放进去光驱（10.5.4的）。启动，提示该mac os x 无法安装到此机器。于是马上格式化硬盘，心想是不是原系统作怪。格式化后还不行，再放10.5.2的盘，问题依旧。。 google之，结论是原装机器带的盘不能换别的老机型上。
想了下，光盘引导系统，磁盘工具，把硬盘分2个区，插上移动硬盘里面有之前下的10.5的6.6g那个镜像，在磁盘工具里直接设置下把第二个硬盘恢复为6.6的镜像，吃饭，吃完后发现已经完事，重启，搞定。

1500出售闲置AppleTV

Wed, 15 Oct 2008 11:09:08 +0800

已售出

本来是想买来装上linux当服务器玩的，后来因为没有显示器（apple tv要求的显示器接口是HDMI，租的房子的电视也很差，不支持色差线），配置起来不方便，所以也没玩起来，也懒的折腾了，就卖了。

现在appletvhacks.net介绍appleTV已经可以完全被破解了可以播放任何格式的影片。
机器成色全新，因为基本就没用过。不过拆过，因为要hack成linux 40G版

相关资料
http://www.appletvhacks.net

淘宝链接

需要的朋友留言或加msn llinzzi@gmail.com

Chrome的hack写法以及CSS的支持程度

Thu, 04 Sep 2008 10:58:52 +0800

Chrome的CSS支持程度引用自 Estelle

Chrome的hack写法引用自 Estelle

 程序代码

body:nth-of-type(1) p{
   color: #333333;
}

Only the Google Chrome and Safari 3.1 browsers will show paragraphs as red.

JS框架检测器 - YUI Monitor

Thu, 04 Sep 2008 10:37:32 +0800

当打开网站的时候能检测到网站的js框架及其版本（如：YUI jquery prototype）

安裝 Greasemonkey
安裝 YUI Monitor

firefox插件记录优酷的播放记录

Fri, 18 Jul 2008 17:12:18 +0800

经常上优酷看电视剧，卡通等。第二天继续看的时候又不记得上次看到哪了，当然你可以去浏览器的历史记录里找，不过很麻烦。写了个greasemonkey的小扩展，下载greasemonkey，可以记录前几次的播放地址，当播放可以自动切换的专辑列表的时候也可以正常记录。

youku-playlist 安装

安装到greasemonkey后，再看过视频后，下次打开首页，会在首页底部看到列表。

基于YUI的城市联动组件

Tue, 20 May 2008 09:29:40 +0800

参加过D2的朋友会对YUI印象比较深刻吧；）
//城市级联
//特点支持3级连动 2级联动
//后期加载数据采用js方式可跨域,也会本地缓存
//可以前期绑定城市状态，方便在修改页面进行使用
//回调事件

demo

手里没有区的信息，那个朋友有提供下

LlinZzi's Blog

JavaScript面向对象编程[三] 自定义事件

IE下的强大调试工具DebugBar

JavaScript面向对象编程[二] 事件处理

JavaScript获取准确的行高

macbook重装系统

1500出售闲置AppleTV

Chrome的hack写法以及CSS的支持程度

JS框架检测器 - YUI Monitor

firefox插件 记录优酷的播放记录

基于YUI的城市联动组件

firefox插件记录优酷的播放记录