jQuery 源码分析2: jQuery.fn.init

 //jQuery.fn.intit 中使用到的外部变量:

 // 判断是否为HTML标签或#id
 rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/;

 // window.document的jQuery对象
 rootjQuery = jQuery(window.document);

 // 判断是否为HTML标签
 rsingleTag = (/^<(\w+)\s*\/?>(?:<\/\1>|)$/);

 init = jQuery.fn.init = function( selector, context ) {
           var match, elem;

           // 处理空selector $(""), $(null), $(undefined), $(false)
           if ( !selector ) {
                return this;          // 返回空jQuery对象
           }
           // 处理 HTML 字符串
           if ( typeof selector === "string" ) {
                if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
                     // 如果头尾含有 "<", ">"则跳过正则表达式检查
                     match = [ null, selector, null ];
                } else {
                     match = rquickExpr.exec( selector );     // 使用正则表达式检查是否为#id或HTML标签
                }
                // 确定是一个html标签，或为#id时没有特定的上下文
                if ( match && (match[1] || !context) ) {
                      // HANDLE: $(html) -> $(array)
                     if ( match[1] ) {
                          context = context instanceof jQuery ? context[0] : context;
                          // jQuery.merge把jQuery.parseHTML的返回值合并到this上
                          // jQuery.parseHTML将HTML字符串转换为一个DOM节点的集合
                          // 如果context不为空则以conext节点为上下文来创建HTML片段
                          // jQuery.parseHTML中的参数true表明保留HTML字符串中的脚本
                          // 如果parseHTML方法不存在则会抛出异常
                          jQuery.merge( this, jQuery.parseHTML(
                               match[1],
                               context && context.nodeType ? context.ownerDocument || context : document,
                               true
                          ) );
                           // jQuery(html, attributes),example
                          // $( "<div></div>", {
                          //      "class": "my-div",
                          //      on: { touchstart: function( event ) {// Do something}
                          // }
                          // })
                          // rsingleTag检测字符串时候为一个HTML tag
                          // jQuery.isPlainObject 判断context是否为纯粹的对象字面量
                          // 纯粹对象字面量表明这个对象是有new或{}创建的，它有构造器，有原型链继承，但要排除window或DOM对象

                          // 如果context不是纯粹对象字面量,for in 语句操作可能会出错
                          if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
                               for ( match in context ) {
                                    // 调用自身的方法
                                    if ( jQuery.isFunction( this[ match ] ) ) {
                                         this[ match ]( context[ match ] );
                                     // 设置属性
                                    } else {
                                         this.attr( match, context[ match ] );
                                    }
                               }
                          }
                           return this;
                      // $('#id') 选择id
                     } else {

                          // 直接利用document的方法来说实现
                          elem = document.getElementById( match[2] );
                           // Check parentNode to catch when Blackberry 4.6 returns
                          // nodes that are no longer in the document #6963
                          // Blackberry4.6 返回时有parentNode
                          if ( elem && elem.parentNode ) {

                               // IE和Opera的返回对象是第一个name符合的对象
                               if ( elem.id !== match[2] ) {     // 如果ID错误,在rootjQuery中用find查找
                                    return rootjQuery.find( selector );
                               }
                                // 如果不存在这个节点,则插入一个
                               this.length = 1;
                               this[0] = elem;
                          }
                           this.context = document;     // 添加上下文
                          this.selector = selector;    // 更改选择器为id
                          return this;
                     }
                 // 选择器表达式: $(expr, $(...))

                // 如果context为空或context是一个jQuery对象,jQuery.jquery存放version信息
                } else if ( !context || context.jquery ) {
                     return ( context || rootjQuery ).find( selector );
                 // 选择器表达式: $(expr, context)
                // 等同于: $(context).find(expr)
                } else {        // 利用jQuery构造器调用context
                     return this.constructor( context ).find( selector );
                }
            // $(a_node), 一个DOM节点元素
           } else if ( selector.nodeType ) {     // 直接把该节点添加到this上
                this.context = this[0] = selector;
                this.length = 1;
                return this;
            // selector 是一个function, 调用jQuery.ready(func) 的快捷方式
           } else if ( jQuery.isFunction( selector ) ) {
                return typeof rootjQuery.ready !== "undefined" ?
                     rootjQuery.ready( selector ) :
                     // 如果ready方法不存在,则立即执行
                     selector( jQuery );
           }
            if ( selector.selector !== undefined ) {     // 如果选择器包含其他属性,赋值给this的同名属性
                this.selector = selector.selector;
                this.context = selector.context;
           }

           // 将selector合并到this上
           return jQuery.makeArray( selector, this );
      };

 

 

 

     init执行过程：

• 处理空selector，相当于返回jQuery方法接口
• 判断HTML字符串
• • HTML字符或#id
  • • 单独HTML标签，创建DOM对象并插入
    • #id，使用document.getElementById获取DOM对象
  • 选择器表达式，使用$.find
• 函数，注册到ready或立即执行
• DOM对象,直接返回

 

可以看到init初始化一个jQuery对象，根据形参来搜索或建立一个DOM对象(又或者是执行jQuery.ready方法)，并将该对象返回。

jQuery.fn.init的实现十分精明，在JavaScript中实现了方法的重载,让API调用变得更为简单方便。

过程中有针对浏览器兼容性的处理、纯粹对象判断，用来保证运行的可靠性和稳定性，这部分十分值得研读和学习。