jquery_3.4.1源码阅读【一】

Jquery

Jquery在JavaScript库中是一个“老司机”了，它给前端工作者提供了很多便捷的API。
大小： 330kb
点击下载

each

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
   // 停止遍历
   if( i === 1 ){
	retrun false
   }
 });

每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。

	each: function( obj, callback ) {
		var length, i = 0;

		if ( isArrayLike( obj ) ) {
			length = obj.length;
			for ( ; i < length; i++ ) {
				if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
					break;
				}
			}
		} else {
			for ( i in obj ) {
				if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
					break;
				}
			}
		}

		return obj;
	}

可以看到这里和underscore 阅读【一】中的**_.each**方法很相似，都对传入的参数做是否是类数组的判断处理。不同的是，这里没有传入context。

那么迭代器中的this是如何作绑定的呢？

不难看出，是通过传入的callback调用其call方法绑定遍历的每一项。underscore是放在optimizeCb中绑定传入的上下文。

map

// 把form中的每个input元素的值建立一个列表。
$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

将一组元素转换成其他数组（不论是否是元素数组）

	// arg is for internal usage only
	map: function( elems, callback, arg ) {
		var length, value,
			i = 0,
			ret = [];

		// Go through the array, translating each of the items to their new values
		if ( isArrayLike( elems ) ) {
			length = elems.length;
			for ( ; i < length; i++ ) {
				value = callback( elems[ i ], i, arg );

				if ( value != null ) {
					ret.push( value );
				}
			}

		// Go through every key on the object,
		} else {
			for ( i in elems ) {
				value = callback( elems[ i ], i, arg );

				if ( value != null ) {
					ret.push( value );
				}
			}
		}

		// Flatten any nested arrays
		return concat.apply( [], ret );
	},

知识点

isArrayLike在Jquery与underscore中的不同实现

相同点： 判断值是否存在，判断值是否有‘length’属性且该属性值的类型是‘number’
不同点：jquery判断了类型值是否是Array

Jquery中的类型获取 toType

function toType( obj ) {
	if ( obj == null ) {
		return obj + "";
	}

	// Support: Android <=2.3 only (functionish RegExp)
	return typeof obj === "object" || typeof obj === "function" ?
		class2type[ toString.call( obj ) ] || "object" :
		typeof obj;
}

关键词	作用
class2type	利用 toString.call（something）传参获取类型值