jQuery 源码剖析-4 init 函数分析

47  // Handle HTML strings

48  if ( typeof selector === "string" ) {

49     // Are we dealing with HTML string or an ID?

50     var match = quickExpr.exec( selector );

51

52     // Verify a match, and that no context was specified for #id

53     if ( match && (match[1] || !context) ) {

54

55         // HANDLE: $(html) -> $(array)

56         if ( match[1] )

57            selector = jQuery.clean( [ match[1] ], context );

58

59         // HANDLE: $("#id")

60         else {

61            var elem = document.getElementById( match[3] );

62

63            // Handle the case where IE and Opera return items

64            // by name instead of ID

65            if ( elem && elem.id != match[3] )

66                return jQuery().find( selector );

67

68            // Otherwise, we inject the element directly into the jQuery object

69            var ret = jQuery( elem || [] );

70            ret.context = document;

71            ret.selector = selector;

72            return ret;

73         }

74

75     // HANDLE: $(expr, [context])

76     // (which is just equivalent to: $(content).find(expr)

77     } else

78         return jQuery( context ).find( selector );

79

80  // HANDLE: $(function)

81  // Shortcut for document ready

82  } else if ( jQuery.isFunction( selector ) )

 

第 48 行通过 typeof 判断参数是否为一个字符串，字符串又有三种可能。

 

在第 50 行通过正则表达式来判断字符串是否为一个 ID 或者一个 HTML 的串。match 保存匹配的结果。

第 53 行判断是否为 HTML 串，通过判断是否满足正则表达式的第一个分组来判断，是通过 jQuery.clean 进行处理。返回结果保存在 selector 中。

否则的话，说明满足了第三个分组，字符串是一个 ID，从 61 行开始，进行 ID 的处理，首先使用标准的 document.getElementById 通过 ID 来获取对象的引用。但是，这个方法在 IE 和 Opera 下有一个问题，浏览器在没有找到指定 ID 的对象的时候，会再次寻找 name 属性为这个 ID 的对象，如果有的话，会返回 name 属性为 ID 的对象，这样就不一定是我们希望的结果了。在第 65 行进行判断，如果找到的对象不是我们期望的对象，那么重新使用 find 进行处理。

 

如果 ID 没有问题，那么将结果创建成一个 jQuery 对象，69 行说明如果没有找到对象就使用一个数组对象来表示。再次使用 jQuery() 函数，这次调用函数的参数就是一个对象的引用，如果找到了，那么这个参数就是找到的对象，如果没有找到，参数就使一个数组对象。

如果找到了，那么这个对象就一定有 nodeType 属性，在上边的分析中 （41-46行）可以看到，jQuery 函数将返回一个 jQuery 对象，这个对象属性为 0 的成员值就是找到的对象，还有一个 length 的成员为 1, 另外有一个 context 的成员同样指向这个找到的对象。

如果没有找到对象，那么传递一个数组对象，这个对象的 length 属性将为 0。

对于数组的处理将在下面看到。

第 69 行中 ret 将表示这个 jQeury 对象，然后，设置 context 属性为 当前的文档对象 document ，selector 为当前结果的选择器。最后在第 72 行返回这个对象。

 

第 77 行的 else 用来处理字符串的第三种可能，它对应 53 行的用来判断 selector 是否为 ID 或者 HTML 串的 if 语句，也就是说不是 HTML 串，也不是 ID的字符串，那么，只有一种可能，就是这是一个 CSS 的选择串。那么通过第 78 行进行处理，直接返回。

 

82  } else if ( jQuery.isFunction( selector ) )

83     return jQuery( document ).ready( selector );

 

第 82 和 83 行处理第三种可能：函数。

如果参数为一个函数，那么，首先通过 jQuery( document ) 获取一个表示 document 的 jQuery 对象，然后将函数设置这个对象的 ready 事件处理。

 

84

85  // Make sure that old selector state is passed along

86  if ( selector.selector && selector.context ) {

87     this.selector = selector.selector;

88     this.context = selector.context;

89  }

90

91  return this.setArray(jQuery.isArray( selector ) ?

92     selector :

93     jQuery.makeArray(selector));

94},

 

86 行的 selector 为第 57 行所获得的通过 HTML 串得到的对象。如果这个对象有 selector 属性和 context 属性，那么复制到当前的对象上来。

91 行判断这个 selector 对象是否为数组对象，如果是，将这个对象上的数组成员复制到当前对象上来，如果不是的话，首先通过 93 行的 makeArray 创建成数组对象。然后再复制到当前对象上来。