Javascript代码优化无非主要围绕：DOM操作、循环、闭包、对象重复出现、对象的声明方式、作用域链、字符串操作、类的声明方式等等。循环、闭包、对象重复出现是从作用域链的角度去优化的；DOM操作主要围绕HTMLCollection、NodeList等来优化；对象的声明方式主要是对象（Object）、数组（Array）、字符串（String）、函数（Function）、正则（RegExp）等内置的对象使用字面量的方式来声明，这个比使用new来实例化相应的对象在性能上要强很多；字符串操作的优化方式主要是通过数组的push和join方法；类的声明方式优化方式主要是分清属性和方法的声明的方式，方法使用prototype的方式来声明；Javascript语言本身的流程操作语句的优化（if、switch、with、eval等等）。

因此，我将Javascript代码优化主要分为六类：DOM“真空”空间、缩短作用域链、字面量声明方式、字符串操作、类声明方式、流程操作语句。下面将逐个叙述：

DOM“真空”空间
DOM“真空”空间这个词或许有些迷惑，举个例子就明白了：当使用removeChild将一个DOM元素从DOM树中删除之后，这个DOM元素并没有彻底消失，它就存在于DOM“真空”空间中，可以通过引用重新调用这个元素，并且对它的操作不会影响DOM文档树。

所以很多对DOM的HTMLCollection、NodeList操作的优化，都是利用了这个“真空”空间，先将元素从DOM树中剥离开来，再对这个元素进行一系列的操作之后，最后再通过appendChild或者insertBefore插入原来位置的DOM树中。这样就使得页面的reflow的次数最小化。比如下面优化的例子：

[javascript]
/**
* Remove an element and provide a function that inserts it into its original position
* @param element {Element} The element to be temporarily removed
* @return {Function} A function that inserts the element into its original position
**/
//removeToInsertLater函数的作用是将element从DOM树中删除，保存于DOM“真空”空间里，同时返回一个闭包函数，用于在对element操作之后将其插回原来的位置。
function removeToInsertLater(element) {
var parentNode = element.parentNode;
var nextSibling = element.nextSibling;
parentNode.removeChild(element);
return function() {
if (nextSibling) {
parentNode.insertBefore(element, nextSibling);
} else {
parentNode.appendChild(element);
}
nextSibling=null; //因为处于闭包中，需要设置为null，断开作用域链，下同。
parentNode=null;
};
}
//接下来我们就可以对element进行一系列的操作，最后插回去
function updateAllAnchors(element, anchorClass) {
var insertFunction = removeToInsertLater(element);
var anchors = element.getElementsByTagName(‘a’);
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
insertFunction();
}
[/javascript]

如果所示，将需要操作的DOM元素先从DOM树中剥离开来，对其进行操作，再安插回去，减少了页面reflow的次数，还有一种方式是将HTMLCollection、NodeList对象转换成数组的形式来进行操作，这都是不错的优化方式，可以应用在很多类似的优化案例中。当然了，对DOM的操作，DOM本身提供的API方法也都存在性能问题，使用nextSibling比childNodes快多了、使用item比使用普通的索引慢多了、不同的循环的方式对操作HTMLCollection、NodeList也都存在不同的性能：《雷人的优化HTMLCollection对象的循环操作技巧》，这个将会在下面的循环里叙述。

缩短作用域链
缩短作用域链，说简单点就是尽量使用局部变量来储存外部的对象。对于在循环中重复出现的对象，这个尤其具有优化效果；对于在闭包函数外的对象，当需要在闭包内使用的时候，可以在闭包内声明一个局部变量来储存该对象；还有对DOM元素的length属性、或者在DOM操作的循环中单个DOM元素使用局部变量来储存，也十分具有优化效果。目的就是使得在数据存取的过程中从作用域链中能最快的取出来，而最快的取出来的前提就是需要对象或者变量在作用域链的顶部。经过测试表明：局部变量的存取速度是最快的。所以将作用域外的对象局部引用化，也是不错的优化方式。循环也算是缩短作用域链的一个方面，但是某些方面也不全是，这个跟循环内部的比较和判断有关，具体请浏览《对循环操作的几种优化》。下面举几个例子：

[javascript]
//例子一：将NodeList的length属性缓存起来，这样就可以避免每次重新计算length属性，重新查询一遍DOM树。
var d = document.getElementsByTagName("div");
for(var i=0, l = d.length; i<l; i++){
//code here…
}
//=====================================
//例子二：将每一个DOM元素局部化，因为对每一个DOM元素的操作，都需要在NodeList中去查询这个DOM元素。
var d = document.getElementsByTagName("div");
for(var i=0, l = d.length; i<l; i++){
var item = d[i];
item.className="active";
item.title = "active item";
//……
}
//=====================================
//例子三：储存重复出现的对象或者方法，特别是在循环中。将document.body缓存起来，这样在循环里读取的速度就非常快了。
var b = document.body;
for(var i=0;i<10;i++){
b.appendChild(document.createTextNode("some text"));
}
//=====================================
//例子四：对闭包外的对象或者变量在闭包内局部化。
//msg在setTimeout闭包参数的作用域外
function setupAlertTimeout() {
var msg = ‘Message to alert’;
window.setTimeout(function() { alert(msg); }, 100);
}
//下面这个更快，将变量声明放到闭包内，使得读取速度更快。
function setupAlertTimeout() {
window.setTimeout(function() {
var msg = ‘Message to alert’;
alert(msg);
}, 100);
}
//再来个更快的，这下避免使用闭包来作为setTimeout的参数，使得程序运行更快。
function alertMsg() {
var msg = ‘Message to alert’;
alert(msg);
}
function setupAlertTimeout() {
window.setTimeout(alertMsg, 100);
}
[/javascript]

对于上面例子四中关于闭包的使用，在这里解释一下：闭包非常强大而且使用，但是它也有很多缺陷，比如：是造成很多内存泄漏的罪魁祸首；声明一个闭包比声明一个不是闭包的内部函数更慢，比声明一个静态函数就更慢了。因此得出了上面的结论。

还有，对于缩短作用域链的一个更直白的解释例子如下：

[javascript]
var a = ‘a’;
function createFunctionWithClosure() {
var b = ‘b’;
return function () {
var c = ‘c’;
a;
b;
c;
};
}
var f = createFunctionWithClosure();
f();
[/javascript]

如上所示：当函数f调用的时候，读取a比读取b慢，比读取c又更慢。这就是作用域链的存取速度导致的性能问题，在HTMLCollection、NodeList中更甚。

字面量声明方式
这个字面量的声明方式的优化方式比较简单易懂，就是使用Javascript这门语言所独有的可以使用字面量的形式来声明对象的特点，这些比使用new来实例化响应的内置的对象将消耗更多的性能和时间，而且也不够灵活。比如下面的声明方式：

[javascript]
var obj = {};
var obj2 = {
"name":"supersha"
}
var arr = [];
var arr2 = [1,2];
var reg = /abc/gi;
var fn = function(){
alert("传说中的Hello world");
}
[/javascript]

字符串操作
字符串中的优化已经算是不值得多说了，主要使用数组的push、join方法来时优化。现在来说说使用传统的“+”或者“+=”运算符为啥低效：当使用“+”或者“+=”运算符的时候，内存中先会创建一个变量副本来储存这个连接的结果，之后把结果赋值给“=”号左边的变量或者对象属性，最后销毁这个变量副本，当在循环中通过“+”或者“+=”来连接字符串的时候，就不得不忍受副本变量的创建、赋值、销毁这一连串的操作，如果需要连接的两个字符串比较大的时候，就更难以忍受了。所以，对它的优化，就被无可奈何的提出来了。举个例子：

[javascript]
//例子一：
var veryLongMessage = [
'This is a long string that due to our strict line length limit of',
' characters per line must be wrapped. ',
'% of engineers dislike this rule. The line length limit is for ',
' style purposes, but we do not want it to have a performance impact.',
' So the question is how should we do the wrapping?'
].join();
//=====================================
//例子二：
var strBuilder = ['First 20 fibonacci numbers:'];
for (var i = 0; i < 20; i++) {
strBuilder.push(i, ‘ = ‘, fibonacci(i));
}
var fibonacciStr = strBuilder.join(”);
[/javascript]

类声明方式
类声明方式的优化，主要是利用了prototype原型链的优点，使得类在实例化的时候不需要给每一个实例都声明相同名称的方法或者属性，而是通过prototype原型链来声明方法或者属性，使得每一个类的实例都从原型链共享这个方法或者属性（有些不知道怎么表达，暂且这样吧）。比如下面的例子：

[javascript]
//下面声明类的方式比较糟糕
var Car = function(color,model,owner){
this.color=color;
this.model=model;
this.owner=owner;
this.setColor=function(c){
this.color=c;
}
//….
}
//改进一下下，好多了……
var Car = function(color,model,owner){
this.color=color;
this.model=model;
this.owner=owner;
}
Car.prototype.setColor=function(c){
this.color=c;
}
[/javascript]

流程操作语句
这里所说的流程操作语句主要是if、switch、do while、while、for、try catch，也有with、eval等等。if语句和switch语句之间的衡量是经常会碰到的优化问题：《对Duff策略优化数组操作的疑虑》；循环的优化在上面已经叙述过了；我相信很多叙述有关Javascript性能的文章都建议避免使用with、eval，甚至是try catch语句，因为catch语句会增加作用域链的深度，造成数据读取速度下降的性能问题，更多的细节可以阅读《高性能网站建设进阶指南》和Nicholas C.Zakas著的《High Performance JavaScript》中更详细的叙述。

总结：上面例举了Javascript代码优化的五个基本类别的方式。当然了，Javascript代码优化还远不止上面例子中出现的情况，大到设计模式、Ajax应用，小到还有对if、switch、with、eval等等的优化等等，无处不存在着代码性能优化这些细节问题，但是细化下来，也基本在上面五个类别里了。案例是丰富多彩的，但是本质不变。目的只有一个：让你的代码跑的更快。

延伸阅读：《IE + JavaScript Performance Recommendations – Part 1》，《IE+JavaScript Performance Recommendations Part 2: JavaScript Code Inefficiencies》，《IE+JScript Performance Recommendations Part 3: JavaScript Code Inefficiencies》，《Optimizing JavaScript code》，《Speeding up JavaScript: Working with the DOM》

[javascript]
var getPointerPosition=function(evt){
evt = evt || window.event;
return {
x:evt.pageX || evt.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft),
y:evt.pageY || evt.clientY+(document.documentElement.scrollTop || document.body.scrollTop)
}
}

var getKeyPressed=function(evt){
evt = evt || window.event;
return {
"code":evt.keyCode,
"value":String.fromCharCode(evt.keyCode)
}
}

var getTarget=function(evt){
evt = evt || window.event;
var target=evt.target || evt.srcElement;
return target.nodeType===3 ? target.parentNode : target;
}
[/javascript]

//////////////// 2010-05-08 updates //////////////

下面的一个addListener函数通过使用三元运算符和Lazy Defined Pattern的方式来编写，感觉有些意思，避免了每次调用该函数都需要浏览器嗅探的判断：
[javascript]
var addListener=function(elem,type,handle){
addListener= elem.addEventListener ? function(elem,type,handle){
elem.addEventListener(type,handle,false);
} : (elem.attachEvent ? function(elem,type,handle){
elem.attachEvent("on"+type,handle);
} : function(elem,type,handle){
elem["on"+type]=handle;
});
addListener(elem,type,handle);
}
[/javascript]
//////////////// 2010-03-25 updates //////////////
[javascript]
//摘自Mootools release-1.1.1 版本库
function $merge(){
var mix = {};
for (var i = 0; i < arguments.length; i++){
for (var property in arguments[i]){
var ap = arguments[i][property];
var mp = mix[property];
if (mp && $type(ap) == ‘object’ && $type(mp) == ‘object’) mix[property] = $merge(mp, ap); //递归
else mix[property] = ap;
}
}
return mix;
};
//Usage:var mergedObj = $merge(obj1, obj2, obj3);
///////

//不错的自执行函数编写方式
(function(calc) {
if (ie) {
core.pageX = function(event) {
return event.clientX + calc(‘Left’);
};
core.pageY = function(event) {
return event.clientY + calc(‘Top’);
};
}
else {
core.pageX = function(event) {
return event.pageX;
};
core.pageY = function(event) {
return event.pageY;
};
}
})(function (side) {
return (element['scroll' + side] || 0) – (element['client' + side] || 0);
});
[/javascript]
//////////////// 2010-03-24 updates //////////////
[javascript]
//Javascript中labeled语句的实例，有助于归类代码，划分代码类型。
//Source：http://james.padolsey.com/javascript/labelled-blocks-useful/
var getJSONP = function(url, success){
declareVars: {
var ud = "_" + new Date(),
script = document.createElement("script"),
head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;

}
defineCallback: {
window[ud] = function(data){
head.removeChild(script);
delete window[ud];
success && success(data);
}
}
addScriptToDocument: {
script.src = url.replace(/callback=.*/, ‘callback=’ + ud);
head.appendChild(script);
}
}
//Usage：
getJSONP("http://www.ilovejs.net/lab/measure/measure-person-v2.js?callback=", function(d){
alert("success");
});
[/javascript]
//////////////// 2010-03-22 updates //////////////
[javascript]
优化循环：
function getElementsByClassName(className,node,tag){
var results=node.getElementsByTagName(tag);
var elements=[],length=results.length,classElements=[];
//将NodeList里的DOM元素保存到数组里
while(length–) elements[length]=results[length];
var pattern = new RegExp("(^|\\s)" + className + "(\\s|$)");
for(var i=0,l=elements.length;i<l;i++){
if(pattern.test(elements[i].className)){
classElements.push(elements[i]);
}
}
return classElements;
}

优化遍历childNodes：nextSibling() better that childNodes[].
function loopChildren(elem){
var node = elem.firstChild;
while(node != null){
node=node.nextSibling;
}
}
/////worse:not recommended.
function loopChildren(elem){
var nodes=elem.childNodes();
var length=nodes.length;
for(var i=0;i<length;i++){
var node=nodes[i]; // bad
…
}
}
[/javascript]
俺非常喜欢Javascript一些另类的编写方式，也喜欢捣鼓捣鼓，在看一些js库源码的时候，当看到一些出乎意料的编写方式的时候，亦都兴奋不已，不得不佩服：他妈太有才了！！重在思维！！！下面是俺收集和原创的一些捣鼓代码，会陆续更新：
[javascript]
document.getElementsByTagName(‘body’)[0].appendChild((function(){
var s = document.createElement(‘script’);
s.type = ‘text/javascript’;
s.src = API + encodeURIComponent(tinypath) + ‘&callback=FireworkDisplay.updateTinyUrl’;
return s;
})());

///////////////////////////////////////////////////

var typeOf = (function(){
var toString = Object.prototype.toString;
return function(a,b) {
return toString.call(a).match(/\s(.+)\]/)[1].toLowerCase() === b;
};
})();

///////////////////////////////////////////////////

var setHTML=function(id,html){
(function(i){
return typeof i === "string" ? document.getElementById(i) : i;
)(id).innerHTML=html;
return arguments.callee;
}
//setHTML("div","a")("div","aa")("div","aaa");

///////////////////////////////////////////////////

//同一个函数三种写法：
function a(){
(arguments[0] || function() { console.log("it is funny");})();
}

(function(){
(arguments[0] || function() { console.log("it is funny");})();
}(function(){ console.log("it is funny");});

new function(){ //相当于自执行函数
(arguments[0] || function() { console.log("it is funny");})();
}

///////////////////////////////////////////////////

Function.prototype.partial = function(){
var fn = this, args = Array.prototype.slice.call(arguments);
return function(){
var arg = 0;
for (var i = 0; i < args.length && arg < arguments.length; i++)
if (args[i] === undefined)
args[i] = arguments[arg++];
return fn.apply(this, args);
};
};

///////////////////////////////////////////////////

Function.prototype.bind=function(context){
var that=this;
return function(){
return that.apply(context || that,arguments);
}
}

/////////////////////////////////////////////////////

Function.prototype.method=function(name,fn){
this.prototype[name]=fn;
return this;
}

////////////////////////////////////////////////////
//用于优化数组循环的操作，当每个循环需要花费比较多的时间来执行的时候，尤其有用
function chunk(array, process, context){
var items = array.concat(); //clone the array
setTimeout(function(){
var item = items.shift();
process.call(context, item);

if (items.length > 0){
setTimeout(arguments.callee, 100);
}
}, 100);
}
[/javascript]

鉴于在添加DOM元素的style行内样式的时候有时候可能需要连续插入几个的需求，使用循环插入的方式可能会造成多次的reflow，故一次性的插入可能会好些，不过下面实现的需求比较单一，不能重复后续添加其他的style的属性值，除非重复设置。看具体需求而定吧：
[javascript]
var setStyle=function(elem,s){
var styles=[];
if(Object.prototype.toString.call(s) === "[object Object]"){
for(var k in s){
styles.push(k+":"+s[k]);
}
s=styles.join(";");
}
return elem.setAttribute("style",s) || (elem.style.cssText=s);
}
[/javascript]

/////////////// 2010-6-20 update /////////////////

有时候为了实现去除数组重复项的需求，为此写了个小函数，效率也比较可观：
[javascript]
var pureMultilArray=function (arr){
var o={};
var a = [];
for(var i=0,l=arr.length;i < l;i++){
!(arr[i] in o) && a.push(arr[i]) && (o[arr[i]]="");
}
return a;
}
[/javascript]

/////////////// 2010-5-21 update /////////////////

下面的extend函数是从baseJS库里面摘取的片段，觉得实现方式不错。本人对它进行了一点小修改：

[javascript]
var extend=function() {
var argu=arguments;
function ext(destination, source) {
for(var property in source) {
destination[property] = source[property];
}
}
if(argu.length == 2) {
ext(argu[0], argu[1])
} else {
var l = argu.length,i=l-1;
while(i) { ext(argu[0],argu[i--]);
}
}
}
//usage:
extend(obj1,obj2,obj3,obj4); //all extend to obj1
[/javascript]

/////////////// 2010-5-14 update /////////////////

鉴于我们需要频繁的操作DOM元素的childNodes，所以编写了一个foreachChildNodes函数，参数depth表示需要处理的childNodes的深度，索引从1开始；参数fn是一个函数，带有每一个childNode的DOM元素作为参数，《测试效果页面》。同时附加上一个foreachAttributes函数作为操作DOM元素的属性：
[javascript]
var foreachChildNodes = function(el, fn, depth){
var nodes = el.childNodes;
depth = depth || 1;
var d = –depth;
for (var i = 0, l = nodes.length; i < l; i++) {
var node = nodes[i];
if (d > 0 && node.childNodes.length > 0) {
foreachChildNodes(node, fn, d);
}
if (node.nodeType === 1) {
fn(node);
}
}
}
//Usage:
foreachChildNodes(document.getElementById("ul"),function(el){
alert(el.innerHTML);
},2);

var foreachAttributes = function(el, fn){
var attrs = el.attributes;
for (var i = 0, l = attrs.length; i < l; i++) {
var attr = attrs[i];
fn(attr, attr.nodeValue);
}
}
[/javascript]

/////////////// 2010-3-8 update /////////////////
[javascript]
var LoadJavascript=function(pattern){
pattern = pattern || "Insert-DOM";
var loadPattern={
"XHR-Eval":function(url,callback){
url = url+"?noCache="+(new Date()).getTime();
callback=callback || function(obj){};
var xhr=false;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
try{
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xhr.open("GET",url,true);
xhr.onreadystatechange=function(){
if(xhr.readyState === 4 && ( xhr.status === 200 || xhr.status === 304)){
eval(xhr.responseText);
callback(xhr);
}
}
xhr.send(null);
},
"XHR-Injection":function(url,callback){
url = url+"?noCache="+(new Date()).getTime();
callback=callback || function(obj){};
var xhr=false;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
try{
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xhr.open("GET",url,true);
xhr.onreadystatechange=function(){
if(xhr.readyState === 4 && ( xhr.status === 200 || xhr.status === 304)){
var script = document.createElement("script");
document.getElementsByTagName("head")[0].appendChild(script);
script.setAttribute("id",url.match(/\/(\w+)\.js/)[1]);
script.setAttribute("type","text/javascript");
script.text=xhr.responseText;
callback(xhr);
}
}
xhr.send(null);
},
"Iframe":function(){
var iframe=document.getElementById("iframe");
document.body.appendChild(iframe);
iframe.setAttribute("width","0");
iframe.setAttribute("height","0");
iframe.setAttribute("src",url);
},
"Insert-DOM":function(url,callback){
url = url+"?noCache="+(new Date()).getTime();
callback=callback || function(obj){};
var script=document.createElement("script");
document.getElementsByTagName("head")[0].appendChild(script);
script.setAttribute("id",url.match(/\/(\w+)\.js/)[1]);
script.setAttribute("type","text/javascript");
script.setAttribute("src",url);
if(script.onreadystatechange){
script.onreadystatechange=function(){
if(script.status === "loaded" || script.status === "complete"){
callback(script);
}
}
}else{
script.onload=function(){
callback(script);
}
}
}
}
return loadPattern[pattern];
}

//Usage:
// LoadJavascript("XHR-Eval")("http://www.ilovejs.net/test.js");
[/javascript]

/////////////// 2010-2-27 update /////////////////
[javascript]
var getChildNodesBy = function(elem, method){
var childs = elem.childNodes;
var returnChilds = [];
for (var i = 0, len = childs.length; i < len; i++) {
var child = childs[i];
if (method.call(child) && child.nodeType === 1) {
returnChilds.push(child);
}
}
return returnChilds;
}
[/javascript]
/////////////// 2010-2-26 update /////////////////
[javascript]
var createElementWithName = function(tag, name){
try {
return elem = document.createElement(‘<’ + tag + ‘ name="’ + name + ‘"></’ + tag + ‘>’);
}
catch (e) {
elem = document.createElement(tag);
elem.setAttribute("name", name);
}
return elem;
}
[/javascript]

/////////////// 2010-2-21 update /////////////////

[javascript]
//得到一个由参数n指定长度的随机字符串，可以自定义种字符串seek。
var randomString = function(n, seek){
seek = seek || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var rand = "";
var l = seek.length;
for (var i = 0; i < n; i++) {
rand += seek[Math.floor(Math.random() * l)];
}
return rand;
}
[/javascript]

///////////////////////////////////////////////////////////////////

喜欢show和read代码的你是否愿意展示自己平时积累的认为自豪的代码片段呢？来吧，在这里展示一下你的code的特色，比拼一下，狠批一下，臭骂一下，鄙视一下吧，不要吝啬你的代码。

本人先入为主，下面是我平时记录的关于Event和Dom操作的一些功能函数，限于时间，就先展示一下这些吧，后续更新……
[javascript]
;(function(global){
global.LIB = global.LIB || {};
/*
* Static method :namespace,it is to make a namspace under the LIB.
*/
LIB.namespace = function(ns){
var names = ns && typeof ns.split === "function" && ns.split(".");
var current = LIB;
for (var i = 0, l = names.length; i < l; i++) {
if (!current[names[i]]) {
current[names[i]] = {};
}
current = current[names[i]];
}
}

/*
* LIB.util.Event space:it is all about the event method.
*/
LIB.namespace("util.Event");
var E = LIB.util.Event;
/*
* addListener: add Event to a DOM Element.use the Lazy Definition Pattern
*/
E.addListener = function(el, type, handle){
E.addListener = (function(){
if (el.addEventListener) {
return function(el, type, handle){
el.addEventListener(type, handle, false);
}
} else if (el.attachEvent) {
return function(el, type, handle){
el.attachEvent("on" + type, function(e){
handle.call(el, e);
});
}
} else {
return function(el, type, handle){
el["on" + type] = handle;
}
}
})();
E.addListener(el, type, handle);
};
/*
* LIB.util.Event.on:it is the same to addListener
*/
E.on = E.addListener;
/*
* removeListener:remove Event from a DOM Element,use the Lazy Definition Pattern
*/
E.removeListener = function(el, type, handle){
E.removeListener = (function(){
if (el.removeEventListener) {
return function(el, type, handle){
el.removeEventListener(type, handle, false);
}
} else if (el.detachEvent) {
return function(el, type, handle){
el.detachEvent("on" + type, handle);
}
} else {
return function(el, type){
el["on" + type] = null;
}
}
})();
E.removeListener(el, type, handle);
}
/*
* LIB.util.Event.unon:it is the same with removeListener
*/
E.unon = E.removeListener;
/*
* LIB.util.Event.hover:it is similar with jQuery’s hover method
*/
E.hover = function(el, h_over, h_out){
E.on(el, "mouseover", h_over);
E.on(el, "mouseout", h_out);
}
/*
* LIB.util.Event.toggle:Loop to execute the functon’s params
*/
E.toggle = function(el){
var i = 1, a = arguments;
el["onclick"] = function(e){
(a[i++]).call(el, e); //执行从第二个参数开始的函数
if (i === a.length) { //如果到了参数末尾，重新开始执行
i = 1;
}
}
}
/*
* LIB.util.Event.one: Excute only once.
*/
E.one = function(el, type, handle){
el["on" + type] = function(e){
handle.call(el, e);
el["on" + type] = null;
}
}
/*
* LIB.util.Event.onDOMReady:execute the code while DOM is able to use once.
*/
E.onDOMReady = function(fn){
(function(){
if (document && document.getElementsByTagName && document.getElementById && document.body) {
fn();
} else {
//利用arguments.callee获取匿名函数的引用，之后在setTimeout定时器里循环执行
setTimeout(arguments.callee, 20);
}
})();
}
/*
* LIB.util.Event.onAvailable:it is similar to YUI’s onAvailable event.
* onAvailable(id,fn,scope);
*/
E.onAvailable = function(id, fn, scope){
(function(){
var el = document.getElementById(id);
if (el == undefined) {
setTimeout(arguments.callee, 20);
} else {
//将要调用的函数的上下文是scope，默认是当前指定id的DOM Element
fn.call(scope || el);
}
})();
}
/*
* LIB.util.Event.onContentReady:it is similar to YUI’s onContentReady event.
*/
E.onContentReady = function(id, fn, scope){
(function(){
var el = document.getElementById(id);
if (!(el && el.nextSibling)) {
setTimeout(arguments.callee, 20);
} else {
fn.call(scope || el);
}
})();
}
/*
* LIB.util.Event.preventDefault:prevent the default behavior of a DOM element.
*/
E.preventDefault = function(ev){
if (ev && ev.preventDefault) {
ev.preventDefault();
} else {
window.event.returnValue = false;
}
return false;
}
/*
* LIB.util.Event.stopPropagation:stop the event’s bubble.
*/
E.stopPropagation = function(ev){
if (ev && ev.stopPropagation) {
ev.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}
/*
* LIB.util.Event.stopEvent:it is similar to YUI’s stopEvent method.
*/
E.stopEvent = function(ev){
E.preventDefault(ev);
E.stopPropagation(ev);
}

///////////////////////////////////////////////////////
/*
* LIB.util.Dom:All about how to operate DOM Element.
*/
LIB.namespace("util.Dom");
var D = LIB.util.Dom;

//Get NodeList by tagName
D.getElementsByTagName = function(tag, parent){
return (parent || document).getElementsByTagName(tag || "*");
}

//添加对原生getElementsByClassName的支持
//get NodeList by className
D.getElementsByClassName = function(classname, tag, parent){
if (document.getElementsByClassName && Array.filter) {
return Array.filter((parent || document).getElementsByClassName(classname), function(el){
return tag ? el.nodeName.toLowerCase() == tag : true;
});
} else {
var elems = (parent || document).getElementsByTagName(tag),
reg = new RegExp("\\b" + classname + "\\b"),
nodes = [],
cn="";
for (var i = 0,l=elems.length;i<l;i++) {
cn=elems[i].className;
if(!cn) continue;
if (reg.test(cn)) {
nodes.push(elems[i]);
}
}
return nodes;
}
}
//Create a new DOM Element
D.create = function(tag){
return document.createElement(tag);
}
//return DOM Element’s innerhtml
D.html = function(el){
return el.innerHTML;
}
//return DOM Element’s inner text
D.text = function(el){
return this.html(el).replace(/<[\/]?[^>]+>/gi,"");
}
//return DOM Element’s html,include itself
D.outerHTML = function(el){
var wrap = D.create("div"), html;
wrap.appendChild(el);
html = wrap.innerHTML;
wrap = null;
return html;
}
//return the next Element of the current Element;
D.nextSibling = function(el){
var next = el.nextSibling;
while (next.nodeType !== 1) {
next = next.nextSibling;
}
return next;
}
//return the previousSibling Element of the current Element
D.previousSibling = function(el){
var pre = el.previousSibling;
while (pre.nodeType !== 1) {
pre = pre.previousSibling;
}
return pre;
}
//return the first child of a DOM Element
D.firstChild = function(el){
var first;
while (first.nodeType !== 1) {
first = first.nextSibling;
}
return child;
}
//return the last child of a DOM Element
D.lastChild = function(el){
var last = el.lastChild;
while (last.nodeType !== 1) {
last = last.previousSibling;
}
return last;
}
//return the DOM Element’s parentNode
D.parentNode = function(el){
return el.parentNode;
}
//Weather have a className
D.hasClass = function(el, classname){
return new RegExp("\\b" + classname + "\\b\\s*", "g").test(el.className);
}
//add a className to a DOM Element
D.addClass = function(el, classname){
var c = el.className;
el.className = c === "" ? classname : c + " " + classname;
}
//remove a className from a DOM Element
D.removeClass = function(el, classname){
var reg = new RegExp("\\b" + classname + "\\b\\s*", "g");
el.className = el.className.replace(reg, "");
}
//get DOM Elements’s reference by id
//Example: LIB.util.Dom.get("div"[,"test"..])
D.get = function(){
var a = arguments, elems = [];
for (var i = 0, l = a.length; i < l; i++) {
var el = a[i];
if (typeof el === "object") {
elems.push(el);
} else if (typeof el === "string") {
elems.push(document.getElementById(el));
}
}
return elems.length === 1 ? elems[0] : elems;
}
//get the DOM Element’s direction children,不算文本节点
D.getChildren = function(el){
var childs = el.childNodes, returnChilds = [];
var current;
for (var i = 0; current = childs[i++];) {
//解决FF下空白节点问题
if (current.nodeType === 1) {
returnChilds.push(current);
}
}
return returnChilds;
}
//setStyle:it is similar to YUI’s setStyle method
D.setStyle=function(el,attr,value){
//将“font-size”这样的形式转化为“fontSize”的形式。
attr=attr.replace(/-(\w)/,function(m,p){return p.toUpperCase();});
el.style[attr]=value;
}
//getStyle:it is similar to YUI’s getStyle method
D.getStyle=function(el,attr){
attr=attr.replace(/-(\w)/,function(m,p){return p.toUpperCase();});
return el.style[attr];
}
})(this);
[/javascript]

2010-01-04 18:34:50 更新 code

[javascript]
//getComputedStyle:获取DOM Element的最终样式
//注意：样式属性的书写格式必须是骆驼型，比如:font-size要写成fontSize
D.getFinalStyle = function(el, attr){
if (el.currentStyle) { //IE
return el.currentStyle[attr];
} else if (window.getComputedStyle) { //W3C
return window.getComputedStyle(el, null)[attr];
} else {
return el.style[attr];
}
}
//height:get a DOM Element’s really height,include a element’s display to ve set ‘none’
D.height = function(el){
//首先判断DOM Element是否隐藏
if (this.getComputedStyle(el, "display") !== "none") {
return el.offsetHeight || el.clientHeight;
} else {
//获取隐藏掉的函数的高度，先让它显示，获取到高度之后再隐藏，下同
el.style.display = "block";
var h = el.offsetHeight || el.clientHeight;
el.style.display = "none";
return h;
}
}
//width:get a DOM Element’s really width,include a element’s display to ve set ‘none’
D.width = function(el){
if (this.getComputedStyle(el, "display") !== "none") {
return el.offsetWidth || el.clientWidth;
} else {
el.style.display = "block";
var w = el.offsetWidth || el.clientWidth;
el.style.display = "none";
return w;
}
}
//toggleClass:如果DOM Element中有了指定的css类，则删除，反之则添加
D.toggleClass=function(el,classname){
if(this.hasClass(el,classname)){
this.removeClass(el,classname);
}else{
this.addClass(el,classname);
}
}
[/javascript]

2010-01-05 11:22:09 更新 code

[javascript]
//getAttribute:获取DOM Element指定的属性
D.getAttribute=function(el,attr){
//使用getAttributeNode方法能直接使用‘class’，‘for’来取得属性值
return attr === "href" ? el.getAttribute("href",2) : el.getAttributeNode(attr).value;
}
//setAttribute:设置DOM Element指定的属性
D.setAttribute=function(el,attr,value){
attr={"class":"className","for":"htmlFor"}[attr] || attr;
try {
el[attr] = value;
}catch(e){
el.setAttribute(attr,value);
}
}
//stringToDOM:将一个HTML形式的字符串或者纯内容的字符串转化为DOM Element‘s reference
D.stringToDOM=function(str){
if(typeof str === "object") return;
var div=this.create("div"),elems=[];
div.innerHTML=str;
try{
var node=div.firstChild;
while(node){
elems.push(node);
node=node.nextSibling;
}
return elems.length === 1 ? elems[0] : elems;
}finally{
div=null;
}
}
//insertAfter:将一个DOM Element插入到另外一个DOM Element的后面
D.insertAfter=function(newNode,refNode){
var next=this.nextSibling(refNode);
if(next){
refNode.parentNode.insertBefore(newNode,next);
}else{
refNode.parentNode.appendChild(newNode);
}
return newNode;
}
//prepend:将一个DOM Element插入到某个DOM Element的前面
D.prepend=function(newNode,parent){
var first=parent.firstChild;
if(first){
parent.insertBefore(newNode,first);
}else{
parent.appendChild(newNode);
}
}
[/javascript]

2010-01-05 14:03:22 更新 code

[javascript]
//wrap:将一个DOM Element被包含于另外一个DOM Element
//引入的wrap可以是一个HTML字符串，也可以是一个DOM Element’s reference.
//如果是HTML字符串的话，建议是从一个父元素开始，eg："<div class=’test’></div>" 等等
D.wrap=function(node,wrapNode){
if(typeof wrapNode === "string"){
wrapNode=this.stringToDOM(wrapNode);
node.parentNode.insertBefore(wrapNode,node);
wrapNode.appendChild(node);
}else{
wrapNode.appendChild(node);
}
return wrapNode;
}
[/javascript]