jQuery源码阅读中学到的豆知识

由 漆黑菌 于 2019年06月10日 发布

用+号和!号来启动自执行函数

例:

+function ($) {
'use strict';
var version = $.fn.jquery.split(' ')[0].split('.')
if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 3)) {
    throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4')
}
}(jQuery);

原理

在JavaScript中逻辑运算符拥有很高的计算优先级,所以会计算/执行后面的function。

~~执行两次按位非运算舍去浮点数小数部分

例:

~~(Math.random() * 1000000)

原理

按位逻辑操作符第一步时会将被操作数转换成32位整数,此时会丢弃小数精度信息。按位非运算可逆,因此两次后舍去了小数精度信息,还原了整数位信息。

在变量前使用+号转换变量为数字

例:

nodeType = +elem.nodeType || 1;

原理

JavaScript的隐式类型转换。

三元运算符顺序

从右往左运算

例:

i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;

运算顺序为

i = i ? (i < 0 ? Math.max( 0, len + i ) : i ): 0;

获取当前浏览器支持的CSS前缀

然而2019年了,通过前缀支持CSS新特性的方案已经是一个被公认的屑设计了,再加上postcss等新时代工具,jQuery这种写法已经是时代眼泪了。

源代码:

var cssPrefixes = [ "Webkit", "O", "Moz", "ms" ],
	emptyStyle = document.createElement( "div" ).style;

function vendorPropName( name ) {

	// shortcut for names that are not vendor prefixed
	if ( name in emptyStyle ) {
		return name;
	}

	// check for vendor prefixed names
	var capName = name.charAt( 0 ).toUpperCase() + name.slice( 1 ),
		i = cssPrefixes.length;

	while ( i-- ) {
		name = cssPrefixes[ i ] + capName;
		if ( name in emptyStyle ) {
			return name;
		}
	}
}

匹配空白元素的正则表达式

源代码

whitespace = "[\\x20\\t\\r\\n\\f]"