<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="demo1">this is a demo.</div> <div id="demo2">this is a demo.</div> <div id="demo3">this is a demo.</div> <script type="text/javascript"> /** * [MYAPP description] * @type {[type]} */ var MYAPP=MYAPP || {}; MYAPP.namespace=function(ns_string){ var parts=ns_string.split("."), parent=MYAPP, i; if (parts[0]==="MYAPP") { parts=parts.slice(1); } for(i=0;i<parts.length;i++){ if (typeof parent[parts[i]]==="undefined") { parent[parts[i]]={}; } parent=parent[parts[i]]; } return parent; } MYAPP.namespace("MYAPP.DOM"); MYAPP.namespace("MYAPP.COR"); MYAPP.COR={ extend:function(Child,Source){ var i; for(i in Source){ Child[i]=Source[i]; } return Child; } } MYAPP.DOM.dome=(function(){ function Dome(els){ var i; for(var i=0;i<els.length;i++){ this[i]=els[i]; } this.length=els.length; } MYAPP.COR.extend(Dome.prototype,(function(){ if (typeof Array.prototype.indexOf !=="function") { Array.prototype.indexOf=function(item){ var i; for(i=0;i<this.length;i++){ if (this[i]===item) { return i; } } return -1; } } return { map:function(fun){ var results=[],i; for(i=0;i<this.length;i++){ results.push(fun.call(this,this[i],i)); } return results; }, forEach:function(fun){ this.map(fun); return this; }, mapOne:function(fun){ var len=this.map(fun); return len.length > 1 ? len : len[0]; }, text:function(text){ if (typeof text !=="undefined") { return this.forEach(function(el){ el.innerHTML=text; }) }else{ return this.mapOne(function(el){ return el.innerText; }) } }, html:function(html){ if (typeof html !=="undefined") { return this.forEach(function(el){ return el.innerHTML=html; }) }else{ return this.mapOne(function(el){ return el.innHTML; }) } }, addClass:function(classes){ var className=" ",i; if (typeof classes !=="string") { for(i=0;i<classes.length;i++){ className+=classes[i]; } }else{ className+=classes; } return this.forEach(function(el){ el.className+=className; }) }, removeClass:function(clazz){ return this.forEach(function(el){ var cs=el.className.split(" "),i; while ((i=cs.indexOf(clazz))>-1) { cs=cs.slice(0,i).concat(cs.slice(++i)); }; el.className=cs.join(" "); }) }, attr:function(attr,val){ if (typeof val !=="undefined") { return this.forEach(function(el){ el.setAttribute(attr,val); }) }else{ return this.mapOne(function(el){ return el.getAttribute(attr); }) } }, append:function(els){ return this.forEach(function (parEl, i) { (function(){ els.forEach(function(childEl){ var childEl=childEl.cloneNode(true); parEl.appendChild(childEl); }) })() }); }, prepend:function(els){ return this.forEach(function(parEl,i){ (function(){ els.forEach(function(childEl){ var childEl=childEl.cloneNode(true); parEl.insertBefore(childEl,parEl.firstChild); }) })() }) }, remove:function(){ return this.forEach(function(el){ return el.parentNode.removeChild(el); }) }, on:(function(){ if (document.addEventListener) { return function(evt,fn){ return this.forEach(function(el){ el.addEventListener(evt,fn,false); }) } }else if(document.attachEvent){ return function(evt,fn){ return this.forEach(function(el){ el.attachEvent("on"+evt,fn); }) } }else{ return function(evt,fn){ return this.forEach(function(el){ el["on"+evt]=fn; }); } } }()), off:function(){ if (document.removeEventListener) { return function(evt,fn){ return this.forEach(function(el){ el.removeEventListener(evt,fn,false); }) } }else if(document.detachEvent){ return function(evt,fn){ return this.forEach(function(el){ el.detachEvent(evt,fn,false); }) } }else{ return function(evt,fn){ return this.forEach(function(el){ el["on"+evt]=null; }) } } } } }())) return { get:function(selector){ var els; if (typeof selector ==="string") { els=document.querySelectorAll(selector); }else if(selector.length){ els=selector; }else{ els=[selector]; } return new Dome(els); }, create:function(tagName,attrs){ var el=new Dome([document.createElement(tagName)]); if (attrs) { if (attrs.className) { el.addClass(attrs.className); delete attrs.className; } if (attrs.text) { el.text(attrs.text); delete attrs.text; } for(var key in attrs){ if (attrs.hasOwnProperty(key)) { el.attr(key,attrs[key]); } } } return el; } } }()) MYAPP.DOM.whenReady=(function(){ var funcs=[],ready=false; var handler=function(e){ if (ready) { return null; } if (e.type==="readystatechange" && document.readyState!=="complete") { return null; } for(var i=0;i<funcs.length;i++){ funcs[i].call(document); } ready=true; funcs=null; } if (document.addEventListener) { document.addEventListener("DOMContentLoaded",handler,false); document.addEventListener("readystatechange",handler,false); window.addEventListener("load", handler, false); }else if(document.attachEvent){ document.attachEvent("onreadystatechange",handler); window.attachEvent("onload",handler); } return function whenReady(f){ if(ready){ f.call(document); }else{ funcs.push(f); } } }()) // MYAPP.DOM.whenReady(function(){ // var demo=MYAPP.DOM.dome.get("#demo1,#demo2,#demo3"); // var e=MYAPP.DOM.dome.create("div",{className:"3",text:"333"}); // demo.prepend(e); // }) </script> </body> </html>
结合之前看的一些js书籍以及blog和一些js框架源码 最近总结了一下，花点时间完善了一下之前写的js小库，继续完善之中