使用HTML5简单实现一个JQuery
最近在做一个Android平台的几个WebApp，一开始使用JQuery类库，在后来性能优化的时候发现有些问题：一是JQuery类库有点大，在网络加载的时候有点慢，二是加载类库执行有点慢；后来就可以是否应该用JQuery。大部分是用JQuery的时候，用的最多的也就是JQuery对DOM操作方便和Ajax方便；JQuery的开发代码有9000多行，而且很多功能我们是用不到的；加上开发平台是Android，浏览器当然固定是webkit内核了，所以兼容性的代码要去掉好大一部分。所以我开始考虑来写一个简单使用的代码库，这样就可以不用使用JQuery了。
JQuery最强大的地方莫过于她的选择器，要写个类库要满足这个功能；HTML5就提供了这个标准：document.querySelector、document.querySelectorAll！
document.querySelector返回的是DOM对象，document.querySelectorAll返回的是DOM数组，那么就可以这样来实现我们需要的JQuery功能了。
1 (function (global){ 2 var Query = { 3 Insert : function (param) { 4 var object = document.createElement(param.type); 5 if(param.id) object.id = param.id; 6 if(param.class) object.className = param.class; 7 if(param.html) object.innerHTML = param.html; 8 if(param.parent) { 9 param.parent.append(object); 10 } 11 else{ 12 document.body.appendChild(object); 13 } 14 }, 15 16 Get : function (obj){ 17 var ele = null; 18 if(typeof(obj) == 'string'){ 19 ele = document.querySelectorAll(obj); 20 } 21 else{ 22 ele = [obj]; 23 } 24 var query = { 25 element : ele, 26 27 eq : function (i) { 28 if(this.element && this.element.length > 0){ 29 return $$(this.element[i]); 30 } 31 return null; 32 }, 33 34 get : function (i) { 35 var _ = this.eq(i); 36 return _ ? _.element[0] : null; 37 }, 38 39 html : function (html){ 40 if(this.element && this.element.length > 0){ 41 if(arguments.length == 1){ 42 for (var i = 0; i < this.element.length; i++) { 43 this.element[i].innerHTML = html; 44 }; 45 } 46 else{ 47 return this.element[0].innerHTML; 48 } 49 } 50 }, 51 52 css : function (name, value){ 53 if(this.element && this.element.length > 0){ 54 if(arguments.length == 2) { 55 this.element[0].style[name] = value; 56 } 57 else{ 58 return this.element[0].style[name]; 59 } 60 } 61 }, 62 63 append : function (object){ 64 if(this.element && this.element.length > 0){ 65 for (var i = 0; i < this.element.length; i++) { 66 this.element[i].appendChild(object); 67 } 68 } 69 }, 70 71 remove : function (object){ 72 if(this.element && this.element.length > 0){ 73 for (var i = 0; i < this.element.length; i++) { 74 if(this.element[i].parentNode){ 75 this.element[i].parentNode.removeChild(this.element[i]); 76 } 77 else{ 78 document.body.removeChild(this.element[i]); 79 } 80 }; 81 } 82 }, 83 84 insert : function (param){ 85 if(this.element && this.element.length > 0){ 86 for (var i = 0; i < this.element.length; i++) { 87 var object = document.createElement(param.type); 88 if(param.id) object.id = param.id; 89 if(param.class) object.className = param.class; 90 if(param.html) object.innerHTML = param.html; 91 this.element[i].appendChild(object); 92 } 93 } 94 }, 95 96 click : function (fn){ 97 this.bind('click', fn); 98 }, 99 100 bind : function(type, fn){ 101 if(this.element && this.element.length > 0){ 102 for (var i = 0; i < this.element.length; i++) { 103 this.element[i].addEventListener(type, fn); 104 } 105 } 106 }, 107 108 attr : function(name){ 109 if(this.element && this.element.length > 0){ 110 var attr = this.element[0].attributes[name]; 111 if(attr){ 112 return attr.value; 113 } 114 } 115 return null; 116 } 117 } 118 return query; 119 }, 120 121 ajax : function(p) { 122 var xhr = new XMLHttpRequest(); 123 if(p.url){ 124 if(p.type && p.type.toUpperCase() == 'POST') { 125 p.type = 'POST'; 126 } 127 else{ 128 p.type = 'GET'; 129 } 130 if(p.async){ 131 p.async = true; 132 } 133 else{ 134 p.async = false; 135 } 136 xhr.onerror = p.error; 137 xhr.open(p.type, p.url, p.async); 138 xhr.onreadystatechange = function () { 139 if(xhr.readyState === 1){ 140 if(p.beforeSend) { 141 p.beforeSend(); 142 } 143 } 144 else if(xhr.readyState === 4){ 145 if(xhr.status == 200) { 146 p.success && p.success(xhr.responseText); 147 } 148 else{ 149 console.log(p.url, xhr.status); 150 p.error && p.error( xhr.status, xhr ); 151 } 152 p.complete && p.complete(); 153 } 154 } 155 xhr.send( p.data || null ); 156 } 157 this.abort = function (){ 158 xhr.abort(); 159 }; 160 } 161 }; 162 global.Query = global.$ = Query; 163 global.$$ = Query.Get; 164 })(window);
一百多行代码，很方便，不用在去加载那几百K的JQuery了。而且想怎么改就怎么改！
