<!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小库，继续完善之中