西红柿爱番茄

/////////////// 2010-6-26 update /////////////////

鉴于在添加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]