模仿jquery的一些实现 第二版
具体如下:
//w作为window的形参,就表示window (function(w) { // 定义一个全局的window.wyl变量,就类似于jquery里的$,Jquery对象 w.wyl; /** * 模仿$(domObj)的形式,通过wyl(domObj)的方式把一个dom转成wyl对象 * * @param para * @returns {wyl} 这里的selector暂时只能是dom对象 */ wyl = function(selector) { this._selector = selector; if (this == window) { // 我自己原来写的 // return this.wyl; return new wyl(selector); } else { // 用来保存选中的元素 this.elements = []; // 判断selector的类型,因为jquery(xxx)中的xxx总共有三种类型,1 function ,2 字符串 ,如 // '#aa','.my'等等 ; 3 dom对象也就是object switch (typeof selector) { case 'function': this.wylAddEvent(w, 'load', selector); break; // 模拟 #xx选择器 case 'string': switch (selector.charAt(0)) { case '#':// 按照id选择器 var obj = document.getElementById(selector.substring(1)); this.elements.push(obj); break; case '.':// 按照class选择器 this.elements = getEleByClas(document, selector .substring(1)); break; default: // 按照tagName this.elements = document.getElementsByTagName(selector); } break; case 'object': this.elements.push(selector); break; default: break; } // 根据name获取dom /* var dom_ = document.getElementsByName('' + selector); */ /** * 根据 document.getElementsByName('' +selector);的形式获取到的dom对象 * 有length属性,而通过getElementById获取的dom对象没有length属性 * */ /* * if (dom_.length) { alert(dom_.length); } else { * alert(dom_.innerHTML + '目前这个框架只能通过传入name属性来使用,无法通过id来解析dom对象'); } */ // 作用:返回当前对象,即返回window.wyl这个对象 // return this; var this_ = [].push.apply(this, this.elements); // 注意这里返回的不是this_而是this return this; } } // 根据class进行选择,即模拟class选择器 wyl.getEleByClas = function(oParent, sClass) { var aEle = document.getElementsByTagName("*"); var aResults = []; for (i = 0; i < aEle.length; i++) { if (aEle[i].className == sClass) { aResults.push(aEle[i]); } } return aResults; } wyl.prototype.wylAddEvent = wyl.wylAddEvent = function(obj, sEv, fn) { if (obj.attachEvent) { obj.attachEvent('on' + sEv, fn); } else { obj.addEventListener(sEv, fn, false); } } // wyl.prototype.isArr的作用:在所有的wyl对象上加上isArr(para)的function, wyl.prototype.isArr = wyl.isArr = function(para) { /** * 在wyl对象上添加工具方法isArr(obj) 实例:var flag = wyl.isArr(obj); 如果为true那么就说明是数组 */ if (typeof para == 'object' && para instanceof Array) { return true; } else { return false; } } /** * 实现类似框架中的linkbutton()功能的方法 框架中的使用实例: $obj.linkbutton({ disabled:true }); * */ wyl.prototype.print = wyl.print = function(para) { alert(para); return this; } wyl.prototype.linkbutton = wyl.linkbutton = function(para) { var _type = typeof para; if (_type != 'object') { return this.print('传入的参数必须是object'); } // 存放传入的obejct类型的参数 var para_ = para || {}; var f = para_.disabled; if (f == true) { $(this).removeClass(); $(this).addClass('l-btn-disabled'); return this; } else { $(this).removeClass(); $(this).addClass('l-btn-abled'); return this; } } // 传入window对象 })(window)