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

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

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

// 选自 jQuery 源码中的 Sizzle 部分
function siblingCheck(a, b) {
	var cur = b && a,
		diff = cur && a.nodeType === 1 && b.nodeType === 1 &&
		(~b.sourceIndex || MAX_NEGATIVE) -
		(~a.sourceIndex || MAX_NEGATIVE);

	// other code ...	
}

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

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

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

(function(window, undefined) {
	var
		// 定义了一个对象变量，一个字符串变量，一个数组变量 
		class2type = {},
		core_version = "1.10.2",
		core_deletedIds = [],

		// 保存了对象、字符串、数组的一些常用方法 concat push 等等...
		core_concat = core_deletedIds.concat,
		core_push = core_deletedIds.push,
		core_slice = core_deletedIds.slice,
		core_indexOf = core_deletedIds.indexOf,
		core_toString = class2type.toString,
		core_hasOwn = class2type.hasOwnProperty,
		core_trim = core_version.trim;
		
})(window);

jQuery.fn = jQuery.prototype = {
	// ...
	
	// 将 jQuery 对象转换成数组类型 
	toArray: function() {
		// 调用数组的 slice 方法，使用预先定义好了的 core_slice ，节省查找内存地址时间，提高效率
		// 相当于 return Array.prototype.slice.call(this)
		return core_slice.call(this);
	}
}

function test(a,b,c){
	// 将参数 arguments 转换为数组
	// 使之可以调用数组成员方法
	var arr = Array.prototype.slice.call(arguments);

	...
}

// 如果不用钩子的情况
// 考生分数以及父亲名
function examinee(name, score, fatherName) {
    return {
        name: name,
        score: score,
        fatherName: fatherName
    };
}
 
// 审阅考生们
function judge(examinees) {
    var result = {};
    for (var i in examinees) {
        var curExaminee = examinees[i];
        var ret = curExaminee.score;
        // 判断是否有后门关系
        if (curExaminee.fatherName === 'xijingping') {
            ret += 1000;
        } else if (curExaminee.fatherName === 'ligang') {
            ret += 100;
        } else if (curExaminee.fatherName === 'pengdehuai') {
            ret += 50;
        }
        result[curExaminee.name] = ret;
    }
    return result;
}
 
 
var lihao = examinee("lihao", 10, 'ligang');
var xida = examinee('xida', 8, 'xijinping');
var peng = examinee('peng', 60, 'pengdehuai');
var liaoxiaofeng = examinee('liaoxiaofeng', 100, 'liaodaniu');
 
var result = judge([lihao, xida, peng, liaoxiaofeng]);
 
// 根据分数选取前三名
for (var name in result) {
    console.log("name:" + name);
    console.log("score:" + score);
}

// relationHook 是个钩子函数，用于得到关系得分
var relationHook = {
    "xijinping": 1000,    
    "ligang": 100,
    "pengdehuai": 50,
　　 // 新的考生只需要在钩子里添加关系分
}

// 考生分数以及父亲名
function examinee(name, score, fatherName) {
    return {
        name: name,
        score: score,
        fatherName: fatherName
    };
}
 
// 审阅考生们
function judge(examinees) {
    var result = {};
    for (var i in examinees) {
        var curExaminee = examinees[i];
        var ret = curExaminee.score;
        if (relationHook[curExaminee.fatherName] ) {
            ret += relationHook[curExaminee.fatherName] ;
        }
        result[curExaminee.name] = ret;
    }
    return result;
}
 
 
var lihao = examinee("lihao", 10, 'ligang');
var xida = examinee('xida', 8, 'xijinping');
var peng = examinee('peng', 60, 'pengdehuai');
var liaoxiaofeng = examinee('liaoxiaofeng', 100, 'liaodaniu');
 
var result = judge([lihao, xida, peng, liaoxiaofeng]);
 
// 根据分数选取前三名
for (var name in result) {
    console.log("name:" + name);
    console.log("score:" + score);
}

(function(window, undefined) {
	var 
		// 用于预存储一张类型表用于 hook
		class2type = {};

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

	jQuery.extend({
		// 确定JavaScript 对象的类型
		// 这个方法的关键之处在于 class2type[core_toString.call(obj)]
		// 可以使得 typeof obj 为 "object" 类型的得到更进一步的精确判断
		type: function(obj) {

			if (obj == null) {
				return String(obj);
			}
			// 利用事先存好的 hash 表 class2type 作精准判断
			// 这里因为 hook 的存在，省去了大量的 else if 判断
			return typeof obj === "object" || typeof obj === "function" ?
				class2type[core_toString.call(obj)] || "object" :
				typeof obj;
		}
	})
})(window);

var someHook = {
    get: function(elem) {
        // obtain and return a value
        return "something";
    },
    set: function(elem, value) {
        // do something with value
    }
}

// 传统写法
var elem = document.getElementById("foobar");
elem.style.background = "red";
elem.style.color = "green";
elem.addEventListener('click', function(event) {
  alert("hello world!");
}, true);

// jQuery 写法
$('xxx')
	.css("background", "red")
	.css("color", "green")
	.on("click", function(event) {
  	　　alert("hello world");
	});

// 传入键值对
jQuery("#some-selector")
  .css("background", "red")
  .css("color", "white")
  .css("font-weight", "bold")
  .css("padding", 10);

// 传入 JSON 对象
jQuery("#some-selector").css({
  "background" : "red",
  "color" : "white",
  "font-weight" : "bold",
  "padding" : 10
});

// binding events by passing a map
jQuery("#some-selector").on({
  "click" : myClickHandler,
  "keyup" : myKeyupHandler,
  "change" : myChangeHandler
});

// binding a handler to multiple events:
jQuery("#some-selector").on("click keyup change", myEventHandler);

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

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

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

(function(window, undefined) {
	var 
	// ...
	jQuery = function(selector, context) {
		// The jQuery object is actually just the init constructor 'enhanced'
		// 看这里，实例化方法 jQuery() 实际上是调用了其拓展的原型方法 jQuery.fn.init
		return new jQuery.fn.init(selector, context, rootjQuery);
	},

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

})(window);

jQuery.extend({
	ready: function(wait) {
		// 如果需要等待，holdReady()的时候，把hold住的次数减1，如果还没到达0，说明还需要继续hold住，return掉
		// 如果不需要等待，判断是否已经Ready过了，如果已经ready过了，就不需要处理了。异步队列里边的done的回调都会执行了
		if (wait === true ? --jQuery.readyWait : jQuery.isReady) {
			return;
		}

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

		// Remember that the DOM is ready
		// 记录 DOM ready 已经完成
		jQuery.isReady = true;

		// If a normal DOM Ready event fired, decrement, and wait if need be
		// wait 为 false 表示ready事情未触发过，否则 return
		if (wait !== true && --jQuery.readyWait > 0) {
			return;
		}

		// If there are functions bound, to execute
		// 调用异步队列，然后派发成功事件出去（最后使用done接收，把上下文切换成document，默认第一个参数是jQuery。
		readyList.resolveWith(document, [jQuery]);

		// Trigger any bound ready events
		// 最后jQuery还可以触发自己的ready事件
		// 例如：
		//    $(document).on('ready', fn2);
		//    $(document).ready(fn1);
		// 这里的fn1会先执行，自己的ready事件绑定的fn2回调后执行
		if (jQuery.fn.trigger) {
			jQuery(document).trigger("ready").off("ready");
		}
	}
})