Javascript Show Room

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

鉴于在添加DOM元素的style行内样式的时候有时候可能需要连续插入几个的需求,使用循环插入的方式可能会造成多次的reflow,故一次性的插入可能会好些,不过下面实现的需求比较单一,不能重复后续添加其他的style的属性值,除非重复设置。看具体需求而定吧:

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);
}

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

有时候为了实现去除数组重复项的需求,为此写了个小函数,效率也比较可观:

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;
}

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

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

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

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

鉴于我们需要频繁的操作DOM元素的childNodes,所以编写了一个foreachChildNodes函数,参数depth表示需要处理的childNodes的深度,索引从1开始;参数fn是一个函数,带有每一个childNode的DOM元素作为参数,《测试效果页面》。同时附加上一个foreachAttributes函数作为操作DOM元素的属性:

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);
    }
}

/////////////// 2010-3-8 update /////////////////

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");

/////////////// 2010-2-27 update /////////////////

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;
}

/////////////// 2010-2-26 update /////////////////

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;
}

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

//得到一个由参数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;
}

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

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

(全文…)