jquery源码学习

近期在学习jquery的一些基础功能的源码,如数据缓存(.data,回调函数).callbacks,异步队列$.deferred;虽然只选取了其中比较基础功能模块,但也算是迈开了js源码研究的第一步,也为后续职业选择加一个方向~ full stack咯

过程中很神奇的发现,研究js的过程中居然加深对后端语言的一些面向对象的思想和设计模式的理解,由此更加确信什么全栈的可行性(嘎嘎), 与此同时也学习到js的一些小技巧:

1. 自调用匿名函数

 	(function(window,undefined){
  		 var jQuery = ...
  		// ...
	  	window.jQuery = window.$ = jQuery;
 	})(window)
  • 通过创建一个自调用匿名函数,创建出特殊的函数作用域,这样就不会和已有的同名函数、方法和变量以及第三方库冲突了。 类似C#里的命名空间
  • 将window作为参数传入自调函数中
  • 方便直接访问window对象
  • 作为参数传入,有利于压缩代码的时候进行优化

2. 用字符串split生成数组

 	 var events = "bind-change live-change onX-change".split(" ") ;
 	 var events=["bind-change","live-change","live-change","onX-change"] ;

结果同样都是数组,但是用split 省去多个属性的双引号, 当属性越多效果越好,jquery就大量采用这技巧。而且也好看、输入的时候键盘敲的快、易于管理

3. 可变参数

C#中函数的可选参数只能放在末尾, 而js的灵活性使得其可以通过判断相应位置参数的类型来做更复杂的可选参数调度

4.jQuery.data 实现原理

$.cache:{
	1:{
		"data":{
			"key":"value"
		},
		"key":"value"
	}
	...
}

obj:{
	jQuery.expendo:1
}

数据都存在全局缓存对象$.cache中,并且通过对象jQuery.expendo属性来进行关联,对缓存数据集中管理,给其他模块功能提供基础支持。

5.jQuery类数组对象

jquery对象$("div")可以像数组一样用数字索引 $('div')[0] ,而返回的值是原生DOM对象;原因是用div去匹配的时候把dom对象作为jquery对象的数字属性值;

原文地址:https://www.cnblogs.com/mushishi/p/5767005.html