jQuery源码解读:部份jQuery工具方法实现

jopen 10年前

jQuery作为前端最流行的类库,没有之一,源码必须得读一读。 如果解读不正确的地方,还请同学们在评论中指正。 本文章基于jquery-1.9.1.js。(编者注:虽然JQ已经出到2.X,本文所述的方法是基本方法,没有版本之差,对于学习有所帮助)。


一、$.type() 判断js数据类型

用法:$.type(new Array()); //array


部份源码(截取关键部份,请忽略源码语法):


jQuery源码解读:部份jQuery工具方法实现


解读:


1、class2type生成后的内容为

jQuery源码解读:部份jQuery工具方法实现


2、core_toString使用的是对象实例的toString

所有继随自Object的对象都有 toString方法,为什么一定要使用object.toString,因为array,function虽然有toString方法,但该方法进行了 重写,array调用toString打印的数组成员用逗号隔开的字符串。这里使用的是{}.toString.call(obj);改变 toString的this指向为object实例。jquery为什么使用的是class2type.toString.call,这样就可以少声明一 个object。


jQuery源码解读:部份jQuery工具方法实现



这样就得到class2type的键名,以此判断数据类型。


二、$.each() 遍历一个数组或对象。

each()其实还是使用的for来进行循环的,除了方便外,因其做了一下简单的封装,所以效率还是要比for差,对于大型循环,尽量使用for.


三、$.trim() 去除字符串两端的空格。

jQuery源码解读:部份jQuery工具方法实现


该方法需要解释的是,“\uFEFF”和“\xA0”。


某些软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM),转码后是“\uFEFF”,因此我们在读取时需要自己去掉这些字符。


“\xA0”其实就是HTML中常见的“ ”


四、$.isNumeric() 判断是否是数字

jQuery源码解读:部份jQuery工具方法实现

isFinite() 函数用于检查其参数是否是无穷大。如果 number 是有限数字(或可转换为有限数字),那么返回 true。否则,如果 number 是 NaN(非数字),或者是正、负无穷大的数,则返回 false。


五、$.isEmptyObject() 判断对象是否为空

jQuery源码解读:部份jQuery工具方法实现


这个方法很好懂,就不多解释


六、$.parseJSON() 将JSON字符串转换为JSON对象

jQuery源码解读:部份jQuery工具方法实现 jQuery源码解读:部份jQuery工具方法实现


这个方法主要是看上面几个正则表达式,从字符串转JSON对象,仅仅是使用return ( new Function( “return ” + data ) )();


七、$.globalEval() 在全局作用域执行一段JS脚本


jQuery源码解读:部份jQuery工具方法实现

Query该方法源于:Jim Driscoll


方法原理:eval作用域问题


jQuery源码解读:部份jQuery工具方法实现

 

原文:http://segmentfault.com/blog/news/1190000002450582