经过两周的JS OOP学习,为了记录这难忘的时刻,写了一个mini的Query
下面便是代码咯!
(function(){ //构建变量保存window. var _$ = window.$; var _Query = window.Query; var Query = window.Query = window.$ = function(selector){ return new Query.fn.init(selector); } //处理原型 Query.fn = Query.prototype = { //给这个包添加一个初始化方法 init : function(selector){ //获取所有选择器指定的元素对象 var eles = document.querySelectorAll(selector); //将所有元素添加到this中,形成对象型数组 Array.prototype.push.apply(this,eles); //将this返回 return this; }, Query : "1.0.0", length : 0, size : function (){ return this.length; } }; // Query.fn.init.prototype = Query.fn; //实现继承,通过调用这个方法,可以不断的为Query添加功能 //添加静态 //添加实例 Query.exdent = Query.fn.exdent = function(){ //参数是一个对象 var o = (arguments[0] instanceof Object ? arguments[0] : {}); //将对象的属性和属性值一个个动态添加到this中 for(p in o){ this[p] = o[p]; } } //添加静态方法 Query.exdent({ //解决冲突 noConflict: function( deep ) { window.$ = _$; if ( deep ) window.jQuery = _Query; return jQuery; }, //循环 each : function(data, callback){ for(d in data){ try{ callback(parseInt(d),data[d]); } catch(e){ callback(d,data[d]); } } }, //去空格 trim: function( text ) { return (text || "").replace( /^s+|s+$/g, "" ); }, //异步 ajax : function(){ var o = arguments[0]; if(!(o instanceof Object)){ return; } var req; if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) req = new XMLHttpRequest(); if(!o.method) o.method='GET'; if(!o.contentType && o.method.toUpperCase()=='POST') o.contentType = 'application/x-www-form-urlencoded'; if (o.callback){ req.onreadystatechange = function(){ if(req.readyState==4&&req.status==200){ var data=req.responseText; try{ data = eval ("(" + data + ")"); } catch(err){ consloe.log("JSON switch views"); } o.callback(data); } } } req.open(o.method,o.url); if (o.contentType) req.setRequestHeader('Content-Type',o.contentType); req.send(o.param); }, //get异步 get : function(url, param, callback){ this.ajax({ url : url + "?" + param, callback : callback, }); }, //post异步 post : function(url, param, callback){ this.ajax({ url : url, callback : callback, param : param, method : "post" }); } }); //工具方法 Query.fn.exdent({ //获取元素 get : function (num){ if(!isNaN(num)){ return this[num]; } }, //遍历元素 each:function(callback){ for(var i = 0 ;i< this.length; i++){ callback(i,this[i]); } }, //序列化表单 serialize : function(){ var ipts = this[0].elements; var params = ''; for (var i = 0; i < ipts.length; i++) { var ipt = ipts[i]; if (ipt.type=='text' || ipt.type=='file' || ipt.type=='password' || ipt.type=='hidden' || ipt.type=='textarea' || ipt.type=='select-one' || ipt.type=='radio' || ipt.type=='checkbox'&&ipt.checked) { params+= ipt.name + '=' + encodeURI(ipt.value) + "&"; } } if (params!='') { params = params.substring(0, params.length-1); } return params; } }); //节点方法 Query.fn.exdent({ //追加 append : function() { var h = arguments[0]; this.each(function(index, ele){ if(h != undefined) ele.innerHTML += h; }); return this; }, //移除 remove : function(){ this.each(function(index,ele){ ele.parentNode.removeChild(ele); }); }, //文本 text : function(){ var t = arguments[0]; if(t != undefined){ this.each(function(index, ele){ ele.innerText = t; }); return this; }else{ return this[0].innerText; } }, //html html : function(){ var h = arguments[0]; if(h != undefined){ this.each(function(index, ele){ ele.innerHTML = h; }); return this; }else{ return this[0].innerHTML; } } }); //元素样式方法 Query.fn.exdent({ //样式 css : function (){ var length = arguments.length; if(length == 1){ if(arguments[0] instanceof Object){ for(var p in arguments[0]){ var o = arguments[0]; this.each(function(index, ele){ ele.style[p] = o[p]; }); } }else{ return this[0].style[arguments[0]]; } }else if(length == 2){ var name = arguments[0]; var value = arguments[1]; this.each(function(index, ele){ ele.style[name] = value; }); } return this; }, //属性 prop : function(){ var length = arguments.length; if(length == 1){ if(arguments[0] instanceof Object){ for(var p in arguments[0]){ var o = arguments[0]; this.each(function(index, ele){ ele.setAttribute(p,o[p]); }); } }else{ return this[0].getAttribute(arguments[0]); } }else if(length == 2){ var name = arguments[0]; var value = arguments[1]; this.each(function(index, ele){ ele.setAttribute(name,value); }); } return this; }, //隐藏 hide : function(){ this.each(function(index, ele){ ele.style.display = "none"; }); return this; }, //显示 show : function(){ this.each(function(index, ele){ ele.style.display = "block"; }); return this; } }); //事件处理方法 Query.fn.exdent({ on : function(eventName, callback){ var e = "on" + eventName; this.each(function(index, ele){ ele[e] = callback; }); } }); //事件方法 Query.fn.exdent({ //鼠标经过 mouseover : function(callback){ this.on("mouseover",callback); }, //鼠标移除 mouseout : function(callback){ this.on("mouseout",callback); }, //鼠标按下 mousedown : function(callback){ this.on("mousedown",callback); }, //鼠标松开 mouseup : function(callback){ this.on("mouseup",callback); }, //鼠标移动 mousemove : function(callback){ this.on("mousemove",callback); }, //点击 click : function(callback){ this.on("click",callback); }, //双击 dblclick : function(callback){ this.on("dblclick",callback); }, //提交按钮被点击 submit : function(callback){ this.on("submit",callback); }, //鼠标悬停 hover : function(over, out){ this.mouseover(over); this.mouseout(out); }, //获得焦点 blur : function(callback){ this.on("blur",callback); }, //失去焦点 focus : function(callback){ this.on("focus",callback); }, //内容被改变 change : function(callback){ this.on("change",callback); }, //文本被选中 select : function(callback){ this.on("select",callback); }, //关闭页面 unload : function(callback){ this.on("unload",callback); }, //窗口大小被改变 resize : function(callback){ this.on("resize",callback); }, //重置按钮被点击 reset : function(callback){ this.on("reset",callback); }, //加载 load : function(callback){ this.on("load",callback); } }); })();
通过Query.exdent和Query.fn.endent方法,可以为Query添加无数静态方法,原型方法!有兴趣的朋友可以拿过去试一试!虽然有些东西考虑的不完善。。。
(function(){//构建变量保存window.var _$ = window.$;var _Query = window.Query;var Query = window.Query = window.$ = function(selector){return new Query.fn.init(selector);}//处理原型Query.fn = Query.prototype = {//给这个包添加一个初始化方法init : function(selector){//获取所有选择器指定的元素对象var eles = document.querySelectorAll(selector);//将所有元素添加到this中,形成对象型数组Array.prototype.push.apply(this,eles);//将this返回return this;},Query : "1.0.0",length : 0,size : function (){return this.length;}};//Query.fn.init.prototype = Query.fn;//实现继承,通过调用这个方法,可以不断的为Query添加功能//添加静态//添加实例Query.exdent = Query.fn.exdent = function(){//参数是一个对象var o = (arguments[0] instanceof Object ? arguments[0] : {});//将对象的属性和属性值一个个动态添加到this中for(p in o){this[p] = o[p];}}//添加静态方法Query.exdent({//解决冲突noConflict: function( deep ) {window.$ = _$;
if ( deep )window.jQuery = _Query;
return jQuery;},//循环each : function(data, callback){for(d in data){try{callback(parseInt(d),data[d]);} catch(e){callback(d,data[d]);}}},//去空格trim: function( text ) {return (text || "").replace( /^s+|s+$/g, "" );},//异步ajax : function(){var o = arguments[0];if(!(o instanceof Object)){return;}var req;if (window.ActiveXObject)req = new ActiveXObject("Microsoft.XMLHTTP");else if (window.XMLHttpRequest)req = new XMLHttpRequest();if(!o.method)o.method='GET';if(!o.contentType && o.method.toUpperCase()=='POST')o.contentType = 'application/x-www-form-urlencoded';
if (o.callback){req.onreadystatechange = function(){if(req.readyState==4&&req.status==200){var data=req.responseText;try{data = eval ("(" + data + ")");} catch(err){consloe.log("JSON switch views");}o.callback(data);}}}req.open(o.method,o.url);if (o.contentType)req.setRequestHeader('Content-Type',o.contentType);req.send(o.param);},//get异步get : function(url, param, callback){this.ajax({url : url + "?" + param,callback : callback,});},//post异步post : function(url, param, callback){this.ajax({url : url,callback : callback,param : param,method : "post"});}});//工具方法Query.fn.exdent({//获取元素get : function (num){if(!isNaN(num)){return this[num];}},//遍历元素each:function(callback){for(var i = 0 ;i< this.length; i++){callback(i,this[i]);}},//序列化表单serialize : function(){var ipts = this[0].elements;var params = '';for (var i = 0; i < ipts.length; i++) {var ipt = ipts[i];if (ipt.type=='text' ||ipt.type=='file' ||ipt.type=='password' ||ipt.type=='hidden' ||ipt.type=='textarea' ||ipt.type=='select-one' ||ipt.type=='radio' ||ipt.type=='checkbox'&&ipt.checked){params+= ipt.name + '=' + encodeURI(ipt.value) + "&";}}if (params!='') {params = params.substring(0, params.length-1);}return params;}});//节点方法Query.fn.exdent({//追加append : function() {var h = arguments[0];this.each(function(index, ele){if(h != undefined)ele.innerHTML += h;});return this;},//移除remove : function(){this.each(function(index,ele){ele.parentNode.removeChild(ele);});},//文本text : function(){var t = arguments[0];if(t != undefined){this.each(function(index, ele){ele.innerText = t;});return this;}else{return this[0].innerText;}},//htmlhtml : function(){var h = arguments[0];if(h != undefined){this.each(function(index, ele){ele.innerHTML = h;});return this;}else{return this[0].innerHTML;}}});//元素样式方法Query.fn.exdent({//样式css : function (){var length = arguments.length;if(length == 1){if(arguments[0] instanceof Object){for(var p in arguments[0]){var o = arguments[0];this.each(function(index, ele){ele.style[p] = o[p];});}}else{return this[0].style[arguments[0]];}}else if(length == 2){var name = arguments[0];var value = arguments[1];this.each(function(index, ele){ele.style[name] = value;});}return this;},//属性prop : function(){var length = arguments.length;if(length == 1){if(arguments[0] instanceof Object){for(var p in arguments[0]){var o = arguments[0];this.each(function(index, ele){ele.setAttribute(p,o[p]);});}}else{return this[0].getAttribute(arguments[0]);}}else if(length == 2){var name = arguments[0];var value = arguments[1];this.each(function(index, ele){ele.setAttribute(name,value);});}return this;},//隐藏hide : function(){this.each(function(index, ele){ele.style.display = "none";});return this;},//显示show : function(){this.each(function(index, ele){ele.style.display = "block";});return this;}});//事件处理方法Query.fn.exdent({on : function(eventName, callback){var e = "on" + eventName;this.each(function(index, ele){ele[e] = callback;});}});//事件方法Query.fn.exdent({//鼠标经过mouseover : function(callback){this.on("mouseover",callback);},//鼠标移除mouseout : function(callback){this.on("mouseout",callback);},//鼠标按下mousedown : function(callback){this.on("mousedown",callback);},//鼠标松开mouseup : function(callback){this.on("mouseup",callback);},//鼠标移动mousemove : function(callback){this.on("mousemove",callback);},//点击click : function(callback){this.on("click",callback);},//双击dblclick : function(callback){this.on("dblclick",callback);},//提交按钮被点击submit : function(callback){this.on("submit",callback);},//鼠标悬停hover : function(over, out){this.mouseover(over);this.mouseout(out);},//获得焦点blur : function(callback){this.on("blur",callback);},//失去焦点focus : function(callback){this.on("focus",callback);},//内容被改变change : function(callback){this.on("change",callback);},//文本被选中select : function(callback){this.on("select",callback);},//关闭页面unload : function(callback){this.on("unload",callback);},//窗口大小被改变resize : function(callback){this.on("resize",callback);},//重置按钮被点击reset : function(callback){this.on("reset",callback);},//加载load : function(callback){this.on("load",callback);}});})();