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的特色,比拼一下,狠批一下,臭骂一下,鄙视一下吧,不要吝啬你的代码。