jQuery源碼學習---簡單dom封裝(一)

封裝簡易的dom操作。

一、解決命名空間和變量污染

1.作用域

2.立即執行函數

3.閉包

jQuery是一個類數組對象,裏面有各種方法,當然jQuery的dom選擇器是sizzle很牛叉,據瞭解還有更快的dom選擇器,實力上去再探索。jQuery使用無new構造函數,可以直接使用$().xx 

(function(window){
	var wdjs=function(selector){
		return new wdjs.fn.init(selector);//返回wdjs原型鏈init屬性的實例
	}
	wdjs.fn=wdjs.prototype={
		init:function(selector){
			return this;//返回指針作用域
		}
	}
	wdjs.fn.init.prototype=wdjs.fn;//將wdjs.prototype原型綁定到init.prototype原型,實現init實例就是wdjs實例


	window.wdjs=window.$=wdjs;//註冊全局變量$
})(window)


具體的個人說不清楚,直接搞搞簡單的dom選擇器,完成個人目標。

二、dom選擇器

1.id

2.類(class)

3.屬性名(input:[''])

4.標籤(a div p)

由於dom選擇器有些龐大,個人還未學會正則表達式,所以並未使用querySeletor和querySeletorAll來獲取節點,簡單搞搞。

(function(window){
	var wdjs=function(selector){
		return new wdjs.fn.init(selector);//返回wdjs原型鏈init屬性的實例
	}
	wdjs.fn=wdjs.prototype={
		init:function(selector){
			var doc=document;
			//消除字符串頭尾空白字符
			String.prototype.trim=function(){
				//用replace消除空白字符
				return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');//直接使用trim()不兼容IE
			}
			//IE9-不支持數組的indexOf
			if(!Array.prototype.indexOf){
				//添加數組原型indexOf屬性
				Array.prototype.indexOf=function(value){
					for(var i=0,len=this.length;i<len;i++){
						if(this[i]==value){
							return i;
						}
					}
					return -1;
				}
			}
			if(selector.trim().split(' ').length>1){
				//字符串拼接,用空格分割成數組
				//複合選擇器
				
			}else{
				//單項選擇器,調用javascript內部原生dom選擇
				var type=selector.trim().charAt(0);//返回第一個字符
				switch(type){
					case '.':
						//類選擇器,IE不兼容getElementsByClassName方法
						var classes=[];
						if(doc.getElementsByClassName){
							return doc.getElementsByClassName(selector.slice(1,selector.length));
						}else{
							var node=doc.getElementsByTagName('*');
							for(var i=0;i<node.length;i++){
								var cla=node[i].className.split(/\s+/);//類名
								if(cla.indexOf(selector.slice(1))!=-1){//如果存在節點
									classes.push(node[i]);
								}
							}
							return classes;
						}
						
					break;
					case '#':
						//id選擇器
						return doc.getElementById(selector.slice(1,selector.length));
					break;
					case '[':
						//屬性選擇器
						
					break;
					default ://tag標籤選擇器
						return doc.getElementsByTagName(selector);

				}
			}
				return this;//返回指針作用域
			}
	}
	wdjs.fn.init.prototype=wdjs.fn;//將wdjs.prototype原型綁定到init.prototype原型,實現init實例就是wdjs實例


	window.wdjs=window.$=wdjs;//註冊全局變量$
})(window)

實現id,類,標籤,屬性名沒有,也沒有實現多級查找,如$('#id .class')等等。裏面代碼優化什麼的都沒有,後期學習中再考慮。

單項獲取節點,類選擇返回數組,標籤返回類數組。

接下來學習內容,正則表達式,ajax封裝等等js基礎。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章