【深入浅出jQuery】源码浅析2--奇技淫巧

// ||短路表达式
var foo = a || b;
// 相当于
*f(a){
	foo = a;
}else{
	foo = b;
}

// &&短路表达式
var bar = a && b;
// 相当于
*f(a){
	bar = b;
}else{
	bar = a;
}

// 选自 jQuery 源码中的 S*zzle 部分
fu*ct*o* s*bl***Check(a, b) {
	var cur = b && a,
		d*ff = cur && a.*odeType === 1 && b.*odeType === 1 &&
		(~b.sourceI*dex || MA*_NEGATIVE) -
		(~a.sourceI*dex || MA*_NEGATIVE);

	// other code ...	
}

var a = 1, b = 0, c = 3;

var foo = a && b && c, // 0 ,相当于 a && (b && c) 
  bar = a || b || c;  // 1

*f(foo){ ... }     //不够严谨
*f(!!foo){ ... }   //更为严谨，!!可将其他类型的值转换为boolea*类型

(fu*ct*o*(w**dow, u*def**ed) {
	var
		// 定义了一个对象变量，一个字符串变量，一个数组变量 
		class2type = {},
		core_vers*o* = "1.10.2",
		core_deletedIds = [],

		// 保存了对象、字符串、数组的一些常用方法 co*cat push 等等...
		core_co*cat = core_deletedIds.co*cat,
		core_push = core_deletedIds.push,
		core_sl*ce = core_deletedIds.sl*ce,
		core_**dexOf = core_deletedIds.**dexOf,
		core_toStr*** = class2type.toStr***,
		core_hasOw* = class2type.hasOw**roperty,
		core_tr*m = core_vers*o*.tr*m;
		
})(w**dow);

jQuery.f* = jQuery.prototype = {
	// ...
	
	// 将 jQuery 对象转换成数组类型 
	toArray: fu*ct*o*() {
		// 调用数组的 sl*ce 方法，使用预先定义好了的 core_sl*ce ，节省查找内存地址时间，提高效率
		// 相当于 retur* Array.prototype.sl*ce.call(th*s)
		retur* core_sl*ce.call(th*s);
	}
}

fu*ct*o* test(a,b,c){
	// 将参数 ar*ume*ts 转换为数组
	// 使之可以调用数组成员方法
	var arr = Array.prototype.sl*ce.call(ar*ume*ts);

	...
}

// 如果不用钩子的情况
// 考生分数以及父亲名
fu*ct*o* exam**ee(*ame, score, fatherName) {
&*bsp;&*bsp;&*bsp;&*bsp;retur* {
&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;*ame: *ame,
&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;score: score,
&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;fatherName: fatherName
&*bsp;&*bsp;&*bsp;&*bsp;};
}
&*bsp;
// 审阅考生们
fu*ct*o* jud*e(exam**ees) {
&*bsp;&*bsp;&*bsp;&*bsp;var result = {};
&*bsp;&*bsp;&*bsp;&*bsp;for (var * ** exam**ees) {
&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;var curExam**ee = exam**ees[*];
&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;var ret = curExam**ee.score;
&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;// 判断是否有后门关系
&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;*f (curExam**ee.fatherName === 'x*j***p***') {
&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;ret += 1000;
&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;} else *f (curExam**ee.fatherName === 'l**a**') {
&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;ret += 100;
&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;} else *f (curExam**ee.fatherName === 'pe**dehua*') {
&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;ret += 50;
&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;}
&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;result[curExam**ee.*ame] = ret;
&*bsp;&*bsp;&*bsp;&*bsp;}
&*bsp;&*bsp;&*bsp;&*bsp;retur* result;
}
&*bsp;
&*bsp;
var l*hao = exam**ee("l*hao", 10, 'l**a**');
var x*da = exam**ee('x*da', 8, 'x*j**p***');
var pe** = exam**ee('pe**', 60, 'pe**dehua*');
var l*aox*aofe** = exam**ee('l*aox*aofe**', 100, 'l*aoda**u');
&*bsp;
var result = jud*e([l*hao, x*da, pe**, l*aox*aofe**]);
&*bsp;
// 根据分数选取前三名
for (var *ame ** result) {
&*bsp;&*bsp;&*bsp;&*bsp;co*sole.lo*("*ame:" + *ame);
&*bsp;&*bsp;&*bsp;&*bsp;co*sole.lo*("score:" + score);
}

// relat*o*Hook 是个钩子函数，用于得到关系得分
var relat*o*Hook = {
    "x*j**p***": 1000,    
    "l**a**": 100,
    "pe**dehua*": 50,
　　 // 新的考生只需要在钩子里添加关系分
}

// 考生分数以及父亲名
fu*ct*o* exam**ee(*ame, score, fatherName) {
    retur* {
        *ame: *ame,
        score: score,
        fatherName: fatherName
    };
}
 
// 审阅考生们
fu*ct*o* jud*e(exam**ees) {
    var result = {};
    for (var * ** exam**ees) {
        var curExam**ee = exam**ees[*];
        var ret = curExam**ee.score;
        *f (relat*o*Hook[curExam**ee.fatherName] ) {
            ret += relat*o*Hook[curExam**ee.fatherName] ;
        }
        result[curExam**ee.*ame] = ret;
    }
    retur* result;
}
 
 
var l*hao = exam**ee("l*hao", 10, 'l**a**');
var x*da = exam**ee('x*da', 8, 'x*j**p***');
var pe** = exam**ee('pe**', 60, 'pe**dehua*');
var l*aox*aofe** = exam**ee('l*aox*aofe**', 100, 'l*aoda**u');
 
var result = jud*e([l*hao, x*da, pe**, l*aox*aofe**]);
 
// 根据分数选取前三名
for (var *ame ** result) {
    co*sole.lo*("*ame:" + *ame);
    co*sole.lo*("score:" + score);
}

(fu*ct*o*(w**dow, u*def**ed) {
	var 
		// 用于预存储一张类型表用于 hook
		class2type = {};

	// 原生的 typeof 方法并不能区分出一个变量它是 Array 、Re*Exp 等 object 类型，jQuery 为了扩展 typeof 的表达力，因此有了 $.type 方法
	// 针对一些特殊的对象（例如 *ull，Array，Re*Exp）也进行精准的类型判断
	// 运用了钩子机制，判断类型前，将常见类型打表，先存于一个 Hash 表 class2type 里边
	jQuery.each("Boolea* Number Str*** Fu*ct*o* Array Date Re*Exp Object Error".spl*t(" "), fu*ct*o*(*, *ame) {
		class2type["[object " + *ame + "]"] = *ame.toLowerCase();
	});	

	jQuery.exte*d({
		// 确定*avaScr*pt 对象的类型
		// 这个方法的关键之处在于 class2type[core_toStr***.call(obj)]
		// 可以使得 typeof obj 为 "object" 类型的得到更进一步的精确判断
		type: fu*ct*o*(obj) {

			*f (obj == *ull) {
				retur* Str***(obj);
			}
			// 利用事先存好的 hash 表 class2type 作精准判断
			// 这里因为 hook 的存在，省去了大量的 else *f 判断
			retur* typeof obj === "object" || typeof obj === "fu*ct*o*" ?
				class2type[core_toStr***.call(obj)] || "object" :
				typeof obj;
		}
	})
})(w**dow);

var someHook = {
    *et: fu*ct*o*(elem) {
        // obta** a*d retur* a value
        retur* "someth***";
    },
    set: fu*ct*o*(elem, value) {
        // do someth*** w*th value
    }
}

// 传统写法
var elem = docume*t.*etEleme*tById("foobar");
elem.style.back*rou*d = "red";
elem.style.color = "*ree*";
elem.addEve*tL*ste*er('cl*ck', fu*ct*o*(eve*t) {
  alert("hello world!");
}, true);

// jQuery 写法
$('xxx')
	.css("back*rou*d", "red")
	.css("color", "*ree*")
	.o*("cl*ck", fu*ct*o*(eve*t) {
  	　　alert("hello world");
	});

// 传入键值对
jQuery("#some-selector")
  .css("back*rou*d", "red")
  .css("color", "wh*te")
  .css("fo*t-we**ht", "bold")
  .css("padd***", 10);

// 传入 *SON 对象
jQuery("#some-selector").css({
  "back*rou*d" : "red",
  "color" : "wh*te",
  "fo*t-we**ht" : "bold",
  "padd***" : 10
});

// b**d*** eve*ts by pass*** a map
jQuery("#some-selector").o*({
  "cl*ck" : myCl*ckHa*dler,
  "keyup" : myKeyupHa*dler,
  "cha**e" : myCha**eHa*dler
});

// b**d*** a ha*dler to mult*ple eve*ts:
jQuery("#some-selector").o*("cl*ck keyup cha**e", myEve*tHa*dler);

// G*ve the ***t fu*ct*o* the jQuery prototype for later **sta*t*at*o*
jQuery.f*.***t.prototype = jQuery.f*;

// 无 *ew 构造
$('#test').text('Test');

// 当然也可以使用 *ew
var test = *ew $('#test');
test.text('Test');

(fu*ct*o*(w**dow, u*def**ed) {
	var 
	// ...
	jQuery = fu*ct*o*(selector, co*text) {
		// The jQuery object *s actually just the ***t co*structor 'e*ha*ced'
		// 看这里，实例化方法 jQuery() 实际上是调用了其拓展的原型方法 jQuery.f*.***t
		retur* *ew jQuery.f*.***t(selector, co*text, rootjQuery);
	},

	// jQuery.prototype 即是 jQuery 的原型，挂载在上面的方法，即可让所有生成的 jQuery 对象使用
	jQuery.f* = jQuery.prototype = {
		// 实例化化方法，这个方法可以称作 jQuery 对象构造器
		***t: fu*ct*o*(selector, co*text, rootjQuery) {
			// ... 
		}
	}
	// 这一句很关键，也很绕
	// jQuery 没有使用 *ew 运算符将 jQuery 实例化，而是直接调用其函数
	// 要实现这样,那么 jQuery 就要看成一个类，且返回一个正确的实例
	// 且实例还要能正确访问 jQuery 类原型上的属性与方法
	// jQuery 的方式是通过原型传递解决问题，把 jQuery 的原型传递给jQuery.prototype.***t.prototype
	// 所以通过这个方法生成的实例 th*s 所指向的仍然是 jQuery.f*，所以能正确访问 jQuery 类原型上的属性与方法
	jQuery.f*.***t.prototype = jQuery.f*;

})(w**dow);

jQuery.exte*d({
	ready: fu*ct*o*(wa*t) {
		// 如果需要等待，holdReady()的时候，把hold住的次数减1，如果还没到达0，说明还需要继续hold住，retur*掉
		// 如果不需要等待，判断是否已经Ready过了，如果已经ready过了，就不需要处理了。异步队列里边的do*e的回调都会执行了
		*f (wa*t === true ? --jQuery.readyWa*t : jQuery.*sReady) {
			retur*;
		}

		// 确定 body 存在
		*f (!docume*t.body) {
			// 如果 body 还不存在 ，DOMCo*te*tLoaded 未完成，此时
			// 将 jQuery.ready 放入定时器 setT*meout 中
			// 不带时间参数的 setT*meout(a) 相当于 setT*meout(a,0)
			// 但是这里并不是立即触发 jQuery.ready
			// 由于 javascr*pt 的单线程的异步模式 
			// setT*meout(jQuery.ready) 会等到重绘完成才执行代码，也就是 DOMCo*te*tLoaded 之后才执行 jQuery.ready
			// 所以这里有个小技巧：在 setT*meout 中触发的函数, 一定会在 DOM 准备完毕后触发
			retur* setT*meout(jQuery.ready);
		}

		// Remember that the DOM *s ready
		// 记录 DOM ready 已经完成
		jQuery.*sReady = true;

		// If a *ormal DOM Ready eve*t f*red, decreme*t, a*d wa*t *f *eed be
		// wa*t 为 false 表示ready事情未触发过，否则 retur*
		*f (wa*t !== true && --jQuery.readyWa*t &*t; 0) {
			retur*;
		}

		// If there are fu*ct*o*s bou*d, to execute
		// 调用异步队列，然后派发成功事件出去（最后使用do*e接收，把上下文切换成docume*t，默认第一个参数是jQuery。
		readyL*st.resolveW*th(docume*t, [jQuery]);

		// Tr***er a*y bou*d ready eve*ts
		// 最后jQuery还可以触发自己的ready事件
		// 例如：
		//    $(docume*t).o*('ready', f*2);
		//    $(docume*t).ready(f*1);
		// 这里的f*1会先执行，自己的ready事件绑定的f*2回调后执行
		*f (jQuery.f*.tr***er) {
			jQuery(docume*t).tr***er("ready").off("ready");
		}
	}
})