JQ源码分析部分笔记

总体构架

// 匿名子执行函数
(function() {
    (21,94) 定义一些变量和函数 jQuery = function() {};
    (96,283) 给jq对象，添加属性和方法，
    (285, 347) extend: jQ的继承方法
    (349, 817) jQuery.extend(): 拓展一些工具方法，静态
    (877,2856) Sizzle : 复杂选择器的实现
    (2880,3042) Callbacks: 回调对象：函数的统一管理
    (3043,3183) Deferred： 延迟对象： 对异步的统一管理
    (3184,3295) support :功能检测
    (3308, 3652) data() : 数据缓存
    (3653, 3797) queue(): 队列管理 保证异步的执行顺序
    (3803,4299) attr() prop() val() addClass() 对元素的操作
    (4300, 5128) on() prop() val() addClass() 对元素的操作
    (5140, 6057) DOM操作: 添加 删除 获取 包装 DOM 筛选
    (6058,6620) css() 样式的操作
    (6621,7854) 提交的数据和ajax(): ajax() load() getJson()
    (7855,8584) animate()
    (8585,8792) offset() ： 位置和尺寸的方法 
    (8804,8821) JQ支持模块化的模式
})()

JQuery的jQuery.fn.init 构造函数

• 一般的面对对象的写法

  function wife(){	
   }
   wife.prototype.init = function(){
  }
  wife.prototype.css = function(){
  }
   引用的时候
   var wife = new wife(); //初始化
   wife.init();
   wife.css();
  

• JQuery 中的写法

  function JQuery(){
  	return new JQuery.prototype.init();
  }
   JQuery.prototype.init = function(){
  }
  JQuery.prototype.css = function(){
  }
  //对象的引用
  jQuery.prototype.init.prototype = jQuery.prototype;
  JQuery中的调用实例  : JQuery().css()
  

####  JQuery中出现的一些正则

rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,
防止木马注入，只识别页面中真正的id 
//独立的空标签
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,

//匹配用于驼峰化的虚线字符串
rmsPrefix = /^-ms-/,   //ms是IE浏览器的前缀,除了ms,还有webkit

#### 给jq对象添加实例属性和方法
	```
	JQuery.fn =  JQuery.prototype{  //添加实例属性和方法

1. jquery:版本

		//alert($(),jquery

2. constructor：修正指向问题

			function wife(){
					//原生js一个对象自带constructor
			}

			<!-- wife.prototype.name ='hello'
			wife.prototype.age ='18'-->			

			wife.prototype = {
				constructor:wife // 修正指向
				name: 'hello'
				age:30
			}

 			var a = new wife();

			alert(a.constructor);

3.init()： 初始化和参数管理

	写错时:$(""), $(null), $(undefined), $(false)

	当处理的是字符串形式的时候
			$('ul','li');
			$('#div')  $('.box')  $('div')
			创建元素:  $('<li></li>')

• 在JQuery中 例如:$(‘li’).css(‘background’,‘red’)

		这个li相当于存在一个对象中
			this = {
					0：'li',
					1: 'li',
					2: 'li',
					3: 'li'
					jquery:···
					length:···默认是 0 
					···
				}

	if(){$('<div></div>') match = [ null, selector, null ];match = [ null, <div></div>, null ];}
	else{
		$('#div')   $('.box')  $('.box1>li')
		$('<li>hello'):这种的要处理一下
		
		match = null; //$('.box') $('div') //$('#div1 div.box')
		match = ['#div1', null, 'div1']; //$('#div1')
		match = ['<li>hello', '<li>' , null]; //$('<li>hel1o')

	}

• JQuery.parseHtML方法

		$ (function() {
			var str = '<li>1</1i><1i>2</1i><1i>3</1i><script>alert (\/script>)</script>'
				var arr = jQuery . parseHTML (str, document, true); //['li', 'li', 'li']
				$.each (arr, function(i) {
				$('ul') .append( arr[i] );
		});
	merge()方法在外就是数组合并的方法，但jQuery可以合json

	传函数时: $(function(){})
		$(function(){})他会调用 rootjQuery.ready( selector )方法
		而rootJQuery就等于 $(document)
		所以写$(function)就相当于写 $(document).ready( selector )
	传数组 json形式   
			$([])   $({})

	

4.Selector：存储选择字符串

5.length :this对象的长度

6.toArray(): 转数组

	$('div').toArray()  // :[div,div,div]

7.get(): 转原生集合

	不写下标就是全部
	例如:$('div').get(1).innerHTML = '222222222' ;

8.pushStack() : JQ对象入栈

9.each() : 遍历集合

10.ready() :DOM加载的接口

11.slice() :集合的截取

12. first() :集合的第一项

13.last() : 集合的最后一项

14.eq(): 集合的指定项

15.map() :返回的指定项

16.end(): 返回集合前的一个状态

17.push() :(内部使用)

18.sort() : (内部使用)

19.splice() :(内部使用)

extend: jQ的继承方法

• 自定义扩展差价插件的方法

 	$.extend({        //扩展工具方法
 		aaa:function(){
 			alert(1);
 	},
 		bbb:function(){
 		alert(2)
 	}
 });

调用方法: $.aaa(), $.bbb()

 $.fn.extend({      //扩展JQ实例方法
 	aaa:function(){
 		alert(3)
 },
 	bbb:function(){
 	alert(4)
 }
})

调用方法: $().aaa(), $().bbb()

• 当写多个对象自变量的时候，后面的对象都是扩展到第一个对象身上

var a={};

$.extend(a，{name:'hello'}，{age:30});

• 还可以做 深拷贝和浅拷贝

	深拷贝(20不受影响)
		var a={};
		var  b={name:{age:30});
		$.extend( true,a,b );
		a. name.age = 20;
		alert( b.name .age ) ;
	浅拷贝(30会变成20)
		ar a={};
		var  b={name:{age:30});
		$.extend(a,b );
		a. name.age = 20;
		alert( b.name .age ) ;

jQuery.extend = jQuery. fn.extend = function() {
	定义一些变量
		if() {}
		看是不是深拷贝情况

		if() {}

		看参数正确不

		if() {}

		看是不是插件情况

		for() { 

		可能有多个对象情况

		if(){}防止循环引用

		if() {}

		深拷贝

		else if(){}浅拷贝
	}
};

• 继承方式
  JQ中:拷贝继承

  js中:类式继承 / 原型继承 (new 构造函数 / {})

jQuery.extend(): 拓展一些工具方法，静态

	jQuery.extend({
		expando : 生成唯一JQ字符串(内部)
		noConflict() :防止冲突
		isReady : DOM是否 加载完(内部)
		readyWait :等待多少文件的计数器 (内部)
		holdReady() : 推迟 DOM触发
		ready() : 准备DOM触发
		isFunction() :是否为函数
		isArray ()  :是否为数组
		isWindow() : 是否为window
		isNumeric() :是否为数字
		type ()   :判断数据类型
		isPlainobject() :是否为对象自变量
		isEmptyobject() :是否为空的对象
		error() :抛出异常
		parseHTML ()  :解析节点
		parseJSON ()  :解析JSON 
		parseXML () :解析XML
		noop () :空函数
		globalEval () :全局解析JS
		camelCase ():转驼峰
		nodeName () :是否为指定节点名(内部)
		each () :遍历集合

				var arr = [a,b,c,d];

				$.each(aar,function(index,value) {
					console.log(index,value);
				})
		trim() :去掉左右空格
		makeArray () :类数组转真数组
		inAnray() :数组版indexOf
		merge() :合并数组
		grep () :过滤新数组
			var arr = [1,2,3,4]
			arr = $.grep(arr,function(n,i){return n>2})
			Array [ 3, 4 ]
		map () :映射新数组

		guid :唯一标识符(内部)

		proxy () :改this指向
		access() :多功能值操作(内部)
		now () :当前时间
		swap () :CSS交换(内部)
		});

		jQuery. ready.promise = function() {};监测DOM的异步 操作(内部)

		function isArraylike(){} 类似数组的判断(内部)

$(function(){})与window.οnlοad=function(){}的区别

• window.οnlοad=function(){}是要等待DOM节点与文件都加载完，再执行

DOMContentLoaded

• $(function(){})只需要DOM加在完就可以执行了

Callbacks: 回调对象：函数的统一管理

/*
once       调一次
memory     记忆
unique     唯一一次
stopOnFalse  掉一次false


add     添加
remove   删除
has
empty
disable
disabled
lock
locked
fireWith
fire
fired*/



/*function aaa(){
	alert(1);
	return false;
}

function bbb(){
	alert(2);
}

function ccc(){
	alert(3);
}*/

/*var cb = $.Callbacks('once');

cb.add( aaa );
cb.add( bbb );

cb.fire();
cb.fire();*/

/*var cb = $.Callbacks('memory');

cb.add( aaa );

cb.fire();

cb.add( bbb );*/

/*var cb = $.Callbacks('unique');

cb.add( aaa );
cb.add( aaa );

cb.fire();*/



/*var cb = $.Callbacks('stopOnFalse');

cb.add( aaa );
cb.add( bbb );

cb.fire();*/

/*var cb = $.Callbacks('once memory');

cb.add( aaa );

cb.fire();

cb.add( bbb );

cb.fire();

options : { once : true , memory : true }

optionsCache : {
	'once memory' : { once : true , memory : true }
}*/


function aaa(n){
	alert('aaa' + n);
	return false;
}

function bbb(n){
	alert('bbb'+n);
}

var cb = $.Callbacks();

//cb.add( aaa );
//cb.add( bbb );

cb.add(aaa,bbb);

cb.fire('hello');
cb.fire('hello');