Self-taught js for about half a year, should be said to be intermittent learning for half a year, in the middle of all kinds of work, a variety of moods impetuous, ashamed. This year, we must find a front-end job on the web, otherwise the family can not account for it, they have to save some money, get married.

For the future, in order to be able to have a high-paying job, determined to die jQuery source code, after two months of learning, learned a lot of js knowledge, now make a record.

Encapsulate simple dom operation.

I. Resolving Namespace and Variable Pollution

1. scope of action

2. Execute the function immediately

3. closure

JQuery is a class array object, there are various methods, of course, jQuery's dom selector is sizzle very bull fork, it is known that there are faster dom selector, strength to explore again. JQuery uses no new constructor and can use $(). xx directly

(function(window){
	var wdjs=function(selector){
		return new wdjs.fn.init(selector);//Returns an instance of init attribute of wdjs prototype chain
	}
	wdjs.fn=wdjs.prototype={
		init:function(selector){
			return this;//Return pointer scope
		}
	}
	wdjs.fn.init.prototype=wdjs.fn;//Binding wdjs.prototype prototype to init.prototype prototype prototype, and implementing init instance is a wdjs instance.


	window.wdjs=window.$=wdjs;//Register global variables$
})(window)

Specific individuals do not know clearly, directly engage in a simple dom selector, to achieve personal goals.

2. dom selector

1.id

2. class

3. Property name (input:['])

4. Label (a div p)

Because the dom selector is somewhat large and the individual has not yet learned the regular expression, the querySeletor and querySeletor All are not used to get the nodes, so it is simple to do.

(function(window){
	var wdjs=function(selector){
		return new wdjs.fn.init(selector);//Returns an instance of init attribute of wdjs prototype chain
	}
	wdjs.fn=wdjs.prototype={
		init:function(selector){
			var doc=document;
			//Eliminate blank characters at the beginning and end of a string
			String.prototype.trim=function(){
				//Eliminating Blank Characters with replace
				return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');//Direct use of trim() is incompatible with IE
			}
			//IE9 - indexOf does not support arrays
			if(!Array.prototype.indexOf){
				//Add the indexOf attribute of the array prototype
				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){
				//String splicing, splitting into arrays with spaces
				//compound selector
				
			}else{
				//Single selector, calling native dom selection within javascript
				var type=selector.trim().charAt(0);//Returns the first character
				switch(type){
					case '.':
						//Class selector, IE incompatible with getElementsByClassName method
						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+/);//Class name
								if(cla.indexOf(selector.slice(1))!=-1){//If a node exists
									classes.push(node[i]);
								}
							}
							return classes;
						}
						
					break;
					case '#':
						//id selector
						return doc.getElementById(selector.slice(1,selector.length));
					break;
					case '[':
						//attribute selectors
						
					break;
					default ://Tag tag selector
						return doc.getElementsByTagName(selector);

				}
			}
				return this;//Return pointer scope
			}
	}
	wdjs.fn.init.prototype=wdjs.fn;//Binding wdjs.prototype prototype to init.prototype prototype prototype, and implementing init instance is a wdjs instance.


	window.wdjs=window.$=wdjs;//Register global variables$
})(window)

There are no implementation ids, classes, labels, attribute names, nor multilevel lookups, such as $(' id. class') and so on. There is nothing to optimize the code inside, and we should consider it again in later learning.

Single access node, class selection return array, label return class array.

Next, we'll learn about js basics such as content, regular expressions, ajax encapsulation, and so on.