jQuery抽象方法追踪（2）

w3school例2jQuery新增两种新的选择标示$("p").hide()，$(".test").hide()

<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
    $(".foo").hide();
  });
});
function $(selector) {
	return new makeQ(selector);
	function makeQ(selector) {
		if(typeof selector === "string") {
			var nodes = document.getElementsByTagName(selector);
			for(var i=0; i< nodes.length; i++) {
				this[i] = nodes[i];
			}
			this.click = function(callback) {
				for(var i in this) {
					//初始版本不严谨，应该处理key是数字字符串的属性
					if(!isNaN(i)) {
				    	this[i].onclick = callback;
				    }
				}
			}
			//都是批量设置DOM对象属性，应该可以进一步抽象
			this.hide = function() {
				for(var i in this) {
					if(!isNaN(i)) {
						this[i].style.display = "none";
					}   
				}				
			}			
		} else {
			this[0] = selector;
			this.ready = function(callback) {
				this[0].addEventListener('DOMContentLoaded', callback);
			}
			this.hide = function() {
				this[0].style.display = "none";
			}
		}
	}
}
</script>
</head>
<body>
<h2 class="foo">This is a heading</h2>
<p class="foo">This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

增加选择器后，最终代码后如下：

<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
    $(".foo").hide();
  });
});
function $(selector) {
	return new makeQ(selector);
	function makeQ(selector) {
		var nodes = {};
		//应该写个匹配css选择器的正则
		if(typeof selector === "string") {
			if(selector[0] === "#") {
				this[0] = document.getElementById(selector.substr(1));
			} else if(selector[0] === ".") {
				nodes = document.getElementsByClassName(selector.substr(1));
			} else {
				nodes = document.getElementsByTagName(selector);			
			}
			for(var i=0; i< nodes.length; i++) {
				this[i] = nodes[i];
			}
			this.click = function(callback) {
				for(var i in this) {
					//初始版本不严谨，应该处理key是数字字符串的属性
					if(!isNaN(i)) {
				    	this[i].onclick = callback;
				    }
				}
			}
			//都是批量设置DOM对象属性，应该可以进一步抽象
			this.hide = function() {
				for(var i in this) {
					if(!isNaN(i)) {
						this[i].style.display = "none";
					}   
				}				
			}			
		} else {
			this[0] = selector;
			this.ready = function(callback) {
				this[0].addEventListener('DOMContentLoaded', callback);
			}
			this.hide = function() {
				this[0].style.display = "none";
			}
		}
	}
}
</script>
</head>
<body>
<h2 class="foo">This is a heading</h2>
<p class="foo">This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

update:2015-2-19 利用原型对象重写后，代码如下：

<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
    $(".foo").hide();
  });
});
function $(selector) {
	function makeQ(selector) {
		var nodes = {};
		//应该写个匹配css选择器的正则
		if(typeof selector === "string") {
			if(selector[0] === "#") {
				this[0] = document.getElementById(selector.substr(1));
			} else if(selector[0] === ".") {
				nodes = document.getElementsByClassName(selector.substr(1));
			} else {
				nodes = document.getElementsByTagName(selector);			
			}
			for(var i=0; i< nodes.length; i++) {
				this[i] = nodes[i];
			}			
		} else if(selector === document){
			this[0] = selector;
			this.ready = function(callback) {
				this[0].addEventListener('DOMContentLoaded', callback);
			}
		} else {
			this[0] = selector;			
		}
	}
	makeQ.prototype = {
		click:function(callback) {
				for(var i in this) {
					//初始版本不严谨，应该处理key是数字字符串的属性
					if(!isNaN(i)) {
				    	this[i].onclick = callback;
				    }
				}
			},
		hide:function() {
				for(var i in this) {
					if(!isNaN(i)) {
						this[i].style.display = "none";
					}   
				}				
			}
	}
	return new makeQ(selector);
}
</script>
</head>
<body>
<h2 class="foo">This is a heading</h2>
<p class="foo">This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>