模仿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)

  

 

posted @ 2016-08-11 22:45  Sunor  阅读(171)  评论(0编辑  收藏  举报