详解jQuery构造器的实现

2009-01-13发布的1.3版

 
 
 
    
  
  
  
  1. init: function( selector, context ) {   
    2. 
  
  
  
  2.  // Make sure that a selection was provided   
    3. 
  
  
  
  3.     selector = selector || document;   
    4. 
  
  
  
  4. 
  
  
  
  5. 
  
  
  
  6.     // 处理节点参数,直接添加属性到新实例上   
    7. 
  
  
  
  7.     if ( selector.nodeType ) {   
    8. 
  
  
  
  8.         this[0] = selector;   
    9. 
  
  
  
  9.         this.length = 1;   
    10. 
  
  
  
  10.         this.context = selector;   
    11. 
  
  
  
  11.         return this;   
    12. 
  
  
  
  12.     }   
    13. 
  
  
  
  13.     // 处理字符串参数   
    14. 
  
  
  
  14.     if ( typeof selector === "string" ) {   
    15. 
  
  
  
  15.         // 判定是否为HTML片断还是ID   
    16. 
  
  
  
  16.         var match = quickExpr.exec( selector );   
    17. 
  
  
  
  17.             if ( match && (match[1] || !context) ) {   
    18. 
  
  
  
  18.              // 如果是HTML片断,转换一个由节点构造的数组   
    19. 
  
  
  
  19.             if ( match[1] )   
    20. 
  
  
  
  20.                selector = jQuery.clean( [ match[1] ], context );      
    21. 
  
  
  
  21.             // 如果是ID,则查找此元素,如果找到放进空数组中   
    22. 
  
  
  
  22.             else {   
    23. 
  
  
  
  23.                 var elem = document.getElementById( match[3] );    
    24. 
  
  
  
  24.                 // Make sure an element was located   
    25. 
  
  
  
  25.                 if ( elem ){   
    26. 
  
  
  
  26.                     // 处理 IE and Opera 混淆ID与NAME的bug   
    27. 
  
  
  
  27.                     if ( elem.id != match[3] )   
    28. 
  
  
  
  28.                         return jQuery().find( selector );   
    29. 
  
  
  
  29.                     var ret = jQuery( elem );   
    30. 
  
  
  
  30.                     ret.context = document;   
    31. 
  
  
  
  31.                     ret.selector = selector;   
    32. 
  
  
  
  32.                     return ret;   
    33. 
  
  
  
  33.                 }   
    34. 
  
  
  
  34.                 selector = [];   
    35. 
  
  
  
  35.             }   
    36. 
  
  
  
  36.         } else  
    37. 
  
  
  
  37.         //使用Sizzle处理其他CSS表达式,生成实例并返回   
    38. 
  
  
  
  38.             return jQuery( context ).find( selector );   
    39. 
  
  
  
  39.         // 处理函数参数，直接domReady   
    40. 
  
  
  
  40.     } else if ( jQuery.isFunction( selector ) )   
    41. 
  
  
  
  41.         return jQuery( document ).ready( selector );   
    42. 
  
  
  
  42.      //处理jQuery对象参数，简单地将其两个属性赋给新实例   
    43. 
  
  
  
  43.     if ( selector.selector && selector.context ) {   
    44. 
  
  
  
  44.         this.selector = selector.selector;   
    45. 
  
  
  
  45.         this.context = selector.context;   
    46. 
  
  
  
  46.     }   
    47. 
  
  
  
  47.     //将上面得到节点数组，用setArray方法把它们变成实例的元素   
    48. 
  
  
  
  48.     return this.setArray(jQuery.makeArray(selector));   
    49. 
  
  
  
  49. }, 
    50.

2009-02-19发布的1.32版

 
 
 
    
  
  
  
  1. init: function( selector, context ) {   
    2. 
  
  
  
  2.     // Make sure that a selection was provided   
    3. 
  
  
  
  3.     selector = selector || document;   
    4. 
  
  
  
  4.     // 处理节点参数,直接添加属性到新实例上   
    5. 
  
  
  
  5.     if ( selector.nodeType ) {   
    6. 
  
  
  
  6.         this[0] = selector;   
    7. 
  
  
  
  7.         this.length = 1;   
    8. 
  
  
  
  8.         this.context = selector;   
    9. 
  
  
  
  9.         return this;   
    10. 
  
  
  
  10.     }   
    11. 
  
  
  
  11.      //处理字符串参数   
    12. 
  
  
  
  12.     if ( typeof selector === "string" ) {   
    13. 
  
  
  
  13.         //判定是否为HTML片断还是ID   
    14. 
  
  
  
  14.         var match = quickExpr.exec( selector );   
    15. 
  
  
  
  15.         if ( match && (match[1] || !context) ) {   
    16. 
  
  
  
  16.            // 如果是HTML片断,转换一个由节点构造的数组   
    17. 
  
  
  
  17.             if ( match[1] )   
    18. 
  
  
  
  18.                 selector = jQuery.clean( [ match[1] ], context );   
    19. 
  
  
  
  19.             else {   
    20. 
  
  
  
  20.                 var elem = document.getElementById( match[3] );   
    21. 
  
  
  
  21. 
  
  
  
  22.                 // 如果是ID,则查找此元素,如果找到放进空数组中   
    23. 
  
  
  
  23.                 if ( elem && elem.id != match[3] )   
    24. 
  
  
  
  24.                   return jQuery().find( selector );   
    25. 
  
  
  
  25.                    //这里对1.3版做了些优化,更简洁   
    26. 
  
  
  
  26.                 var ret = jQuery( elem || [] );   
    27. 
  
  
  
  27.                 ret.context = document;   
    28. 
  
  
  
  28.                 ret.selector = selector;   
    29. 
  
  
  
  29.                 return ret;   
    30. 
  
  
  
  30.             }   
    31. 
  
  
  
  31.         } else  
    32. 
  
  
  
  32.             //使用Sizzle处理其他CSS表达式,生成实例并返回   
    33. 
  
  
  
  33.             return jQuery( context ).find( selector );   
    34. 
  
  
  
  34.            // 处理函数参数，进行domReady操作   
    35. 
  
  
  
  35.     } else if ( jQuery.isFunction( selector ) )   
    36. 
  
  
  
  36.         return jQuery( document ).ready( selector );   
    37. 
  
  
  
  37.         //处理jQuery对象参数，简单地将其两个属性赋给新实例   
    38. 
  
  
  
  38.     if ( selector.selector && selector.context ) {   
    39. 
  
  
  
  39.         this.selector = selector.selector;   
    40. 
  
  
  
  40.         this.context = selector.context;   
    41. 
  
  
  
  41.     }   
    42. 
  
  
  
  42. //这里对1.3版做了些扩展,允许传珍上元素集合(HTMLCollection)与节点集合(NodeList),   
    43. 
  
  
  
  43. //元素数组可能是我们用字符串转换过来的,也可以是用户直接传进来的   
    44. 
  
  
  
  44.     return this.setArray(jQuery.isArray( selector ) ? selector : jQuery.makeArray(selector));   
    45. 
  
  
  
  45. },  
    46.

2010-01-13发布的1.4版

 
 
 
    
  
  
  
  1. init: function( selector, context ) {   
    2. 
  
  
  
  2.     var match, elem, ret, doc;   
    3. 
  
  
  
  3.     //处理空白字符串,null,undefined参数(新增),返回一个非常纯净的实例   
    4. 
  
  
  
  4.     if ( !selector ) {   
    5. 
  
  
  
  5.         return this;   
    6. 
  
  
  
  6.     }   
    7. 
  
  
  
  7.     // 处理节点参数,直接添加属性到新实例上   
    8. 
  
  
  
  8.     if ( selector.nodeType ) {   
    9. 
  
  
  
  9.         this.context = this[0] = selector;//写法上优化   
    10. 
  
  
  
  10.         this.length = 1;   
    11. 
  
  
  
  11.         return this;   
    12. 
  
  
  
  12.     }   
    13. 
  
  
  
  13.     //处理字符串参数   
    14. 
  
  
  
  14.     if ( typeof selector === "string" ) {   
    15. 
  
  
  
  15.         //  判定是否为HTML片断还是ID   
    16. 
  
  
  
  16.         match = quickExpr.exec( selector );   
    17. 
  
  
  
  17.         if ( match && (match[1] || !context) ) {   
    18. 
  
  
  
  18.             //如果是HTML片断   
    19. 
  
  
  
  19.             if ( match[1] ) {   
    20. 
  
  
  
  20.                 //取得文档对象   
    21. 
  
  
  
  21.                 doc = (context ? context.ownerDocument || context : document);   
    22. 
  
  
  
  22.                 // 如果是单个标签,直接使用 document.createElement创建此节点并放入数组中   
    23. 
  
  
  
  23.                 ret = rsingleTag.exec( selector );   
    24. 
  
  
  
  24.                 if ( ret ) {   
    25. 
  
  
  
  25.                     //如果后面跟着一个纯净的JS对象,则为此节点添加相应的属性或样式   
    26. 
  
  
  
  26.                     if ( jQuery.isPlainObject( context ) ) {   
    27. 
  
  
  
  27.                         selector = [ document.createElement( ret[1] ) ];   
    28. 
  
  
  
  28.                         jQuery.fn.attr.call( selector, context, true );   
    29. 
  
  
  
  29.                     } else {   
    30. 
  
  
  
  30.                         selector = [ doc.createElement( ret[1] ) ];   
    31. 
  
  
  
  31.                     }   
    32. 
  
  
  
  32.                 } else {   
    33. 
  
  
  
  33.                     //改由buildFragment来生成节点集合(NodeList)   
    34. 
  
  
  
  34.                     ret = buildFragment( [ match[1] ], [ doc ] );   
    35. 
  
  
  
  35.                     selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes;   
    36. 
  
  
  
  36.                 }   
    37. 
  
  
  
  37.             } else {   
    38. 
  
  
  
  38.                 // 如果是ID,则查找此元素,如果找到放进空数组中   
    39. 
  
  
  
  39.                 elem = document.getElementById( match[2] );   
    40. 
  
  
  
  40.                 if ( elem ) {  
    41. 
  
  
  
  41.                     // 处理 IE and Opera 混淆ID与NAME的bug   
    42. 
  
  
  
  42.                     if ( elem.id !== match[2] ) {   
    43. 
  
  
  
  43.                         return rootjQuery.find( selector );   
    44. 
  
  
  
  44.                     }   
    45. 
  
  
  
  45.                     //这里也做了一些优化,原来是很傻地再生成一个jQuery实例   
    46. 
  
  
  
  46.                     this.length = 1;   
    47. 
  
  
  
  47.                     this[0] = elem;   
    48. 
  
  
  
  48.                 }   
    49. 
  
  
  
  49.                 this.context = document;   
    50. 
  
  
  
  50.                 this.selector = selector;   
    51. 
  
  
  
  51.                return this;   
    52. 
  
  
  
  52.             }     
    53. 
  
  
  
  53. 
  
  
  
  54.             // 如果字符是很简单的标签选择器,那基本没有必要走Sizzle路线,直接getElementsByTagName,很好的优化   
    55. 
  
  
  
  55.         } else if ( !context && /^\w+$/.test( selector ) ) {   
    56. 
  
  
  
  56.             this.selector = selector;   
    57. 
  
  
  
  57.             this.context = document;   
    58. 
  
  
  
  58.             selector = document.getElementsByTagName( selector );   
    59. 
  
  
  
  59.             // 如果第二个参数不存在或者是jQuery对象,那么用它或rootjQuery调用find查找目标节点(走Sizzle路线)   
    60. 
  
  
  
  60.         } else if ( !context || context.jquery ) {   
    61. 
  
  
  
  61.             return (context || rootjQuery).find( selector );   
    62. 
  
  
  
  62.             // HANDLE: $(expr, context)   
    63. 
  
  
  
  63.             // (which is just equivalent to: $(context).find(expr)   
    64. 
  
  
  
  64.         } else {   
    65. 
  
  
  
  65.             //如果第二个参数已指定为某元素节点,转为jQuery对象,走Sizzle路线   
    66. 
  
  
  
  66.             return jQuery( context ).find( selector );   
    67. 
  
  
  
  67.         }   
    68. 
  
  
  
  68.            // 处理函数参数，直接domReady   
    69. 
  
  
  
  69.     } else if ( jQuery.isFunction( selector ) ) {   
    70. 
  
  
  
  70.         return rootjQuery.ready( selector );   
    71. 
  
  
  
  71.     }   
    72. 
  
  
  
  72.     //处理jQuery对象参数，简单地将其两个属性赋给新实例   
    73. 
  
  
  
  73.     if (selector.selector !== undefined) {   
    74. 
  
  
  
  74.         this.selector = selector.selector;   
    75. 
  
  
  
  75.         this.context = selector.context;   
    76. 
  
  
  
  76.     }   
    77. 
  
  
  
  77. 
  
  
  
  78. //这里又做了些许修改,缘于makeArray可以接受第二个参数(可以是数组或类数组,这时相当合并操作)   
    79. 
  
  
  
  79.     return jQuery.isArray( selector ) ?   
    80. 
  
  
  
  80.         this.setArray( selector ) ://内部用push方法,迅速将一个普通对象变成类数组对象   
    81. 
  
  
  
  81.         jQuery.makeArray( selector, this );   
    82. 
  
  
  
  82. }, 
    83.

接着是广受欢迎的2010-02-13发布的1.42版

 
 
 
    
  
  
  
  1. init: function( selector, context ) {   
    2. 
  
  
  
  2.     var match, elem, ret, doc;  
    3. 
  
  
  
  3.     // 处理空白字符串,null,undefined参数   
    4. 
  
  
  
  4.     if ( !selector ) {   
    5. 
  
  
  
  5.         return this;   
    6. 
  
  
  
  6.     }   
    7. 
  
  
  
  7.     // 处理节点参数   
    8. 
  
  
  
  8.     if ( selector.nodeType ) {   
    9. 
  
  
  
  9.         this.context = this[0] = selector;   
    10. 
  
  
  
  10.         this.length = 1;   
    11. 
  
  
  
  11.         return this;   
    12. 
  
  
  
  12.     }      
    13. 
  
  
  
  13.     // 处理body参数(新增)   
    14. 
  
  
  
  14.     if ( selector === "body" && !context ) {   
    15. 
  
  
  
  15.         this.context = document;   
    16. 
  
  
  
  16.         this[0] = document.body;   
    17. 
  
  
  
  17.         this.selector = "body";   
    18. 
  
  
  
  18.         this.length = 1;   
    19. 
  
  
  
  19.         return this;   
    20. 
  
  
  
  20.     }   
    21. 
  
  
  
  21.     // 处理字符串参数,分七种情形：   
    22. 
  
  
  
  22.     //①单个标签,带对象属性包           --->   jQuery.merge   
    23. 
  
  
  
  23.     //②单个标签,不带对象属性包         --->   attr + jQuery.merge   
    24. 
  
  
  
  24.     //③复杂的HTML片断                 --->   buildFragment + jQuery.merge   
    25. 
  
  
  
  25.     //④ID选择器,与找到的元素的ID不同   --->   getElementById + Sizzle + pushStack   
    26. 
  
  
  
  26.     //⑤ID选择器,与找到的元素的ID相同   --->   getElementById + 简单属性添加   
    27. 
  
  
  
  27.     //⑥标签选择器                     --->   getElementsByTagName + jQuery.merge   
    28. 
  
  
  
  28.     //⑦其他CSS表达式                  --->   Sizzle + pushStack   
    29. 
  
  
  
  29.     if ( typeof selector === "string" ) {   
    30. 
  
  
  
  30.         match = quickExpr.exec( selector );   
    31. 
  
  
  
  31.         if ( match && (match[1] || !context) ) {   
    32. 
  
  
  
  32.             if ( match[1] ) {   
    33. 
  
  
  
  33.                 doc = (context ? context.ownerDocument || context : document);   
    34. 
  
  
  
  34.                 ret = rsingleTag.exec( selector );   
    35. 
  
  
  
  35.                 if ( ret ) {   
    36. 
  
  
  
  36.                   if ( jQuery.isPlainObject( context ) ) {   
    37. 
  
  
  
  37.                         selector = [ document.createElement( ret[1] ) ];   
    38. 
  
  
  
  38.                         jQuery.fn.attr.call( selector, context, true );   
    39. 
  
  
  
  39.                     } else {   
    40. 
  
  
  
  40.                         selector = [ doc.createElement( ret[1] ) ];   
    41. 
  
  
  
  41.                     }   
    42. 
  
  
  
  42.                 } else {   
    43. 
  
  
  
  43.                     ret = buildFragment( [ match[1] ], [ doc ] );   
    44. 
  
  
  
  44.                     selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes;   
    45. 
  
  
  
  45.                 }   
    46. 
  
  
  
  46.                 return jQuery.merge( this, selector );   
    47. 
  
  
  
  47.             } else {   
    48. 
  
  
  
  48.                 elem = document.getElementById( match[2] );   
    49. 
  
  
  
  49.                 if ( elem ) {   
    50. 
  
  
  
  50.                     if ( elem.id !== match[2] ) {   
    51. 
  
  
  
  51.                         return rootjQuery.find( selector );   
    52. 
  
  
  
  52.                     }   
    53. 
  
  
  
  53.                     this.length = 1;   
    54. 
  
  
  
  54.                     this[0] = elem;   
    55. 
  
  
  
  55.                 }   
    56. 
  
  
  
  56.                 this.context = document;   
    57. 
  
  
  
  57.                 this.selector = selector;   
    58. 
  
  
  
  58.                 return this;   
    59. 
  
  
  
  59.             }   
    60. 
  
  
  
  60.         } else if ( !context && /^\w+$/.test( selector ) ) {   
    61. 
  
  
  
  61.             this.selector = selector;   
    62. 
  
  
  
  62.             this.context = document;   
    63. 
  
  
  
  63.             selector = document.getElementsByTagName( selector );   
    64. 
  
  
  
  64.             return jQuery.merge( this, selector );   
    65. 
  
  
  
  65.         } else if ( !context || context.jquery ) {   
    66. 
  
  
  
  66.             return (context || rootjQuery).find( selector );   
    67. 
  
  
  
  67.         } else {   
    68. 
  
  
  
  68.            return jQuery( context ).find( selector );   
    69. 
  
  
  
  69.         }   
    70. 
  
  
  
  70.         // 处理函数参数，直接domReady   
    71. 
  
  
  
  71.     } else if ( jQuery.isFunction( selector ) ) {   
    72. 
  
  
  
  72.         return rootjQuery.ready( selector );   
    73. 
  
  
  
  73.     }   
    74. 
  
  
  
  74.     //处理jQuery对象参数   
    75. 
  
  
  
  75.     if (selector.selector !== undefined) {   
    76. 
  
  
  
  76.         this.selector = selector.selector;   
    77. 
  
  
  
  77.         this.context = selector.context;   
    78. 
  
  
  
  78.     }   
    79. 
  
  
  
  79.     //无论是数组还是类数组（如NodeList），统统使用jQuery.makeArray来为实例添加新的元素   
    80. 
  
  
  
  80.     return jQuery.makeArray( selector, this );   
    81. 
  
  
  
  81. },  
    82.

另附上makeArray方法与merge方法，merge方法好神奇啊

 
 
 
    
  
  
  
  1. makeArray: function( array, results ) {   
    2. 
  
  
  
  2.     var ret = results || [];    
    3. 
  
  
  
  3.     if ( array != null ) {   
    4. 
  
  
  
  4.         // The window, strings (and functions) also have 'length'   
    5. 
  
  
  
  5.         // The extra typeof function check is to prevent crashes   
    6. 
  
  
  
  6.         // in Safari 2 (See: #3039)   
    7. 
  
  
  
  7.         if ( array.length == null || typeof array === "string" || jQuery.isFunction(array) || (typeof array !== "function" && array.setInterval) ) {   
    8. 
  
  
  
  8.             push.call( ret, array );   
    9. 
  
  
  
  9.         } else {   
    10. 
  
  
  
  10.             jQuery.merge( ret, array );   
    11. 
  
  
  
  11.         }   
    12. 
  
  
  
  12.     }   
    13. 
  
  
  
  13.     return ret;   
    14. 
  
  
  
  14. },   
    15. 
  
  
  
  15. merge: function( first, second ) {   
    16. 
  
  
  
  16.     var i = first.length, j = 0;    
    17. 
  
  
  
  17.     if ( typeof second.length === "number" ) {   
    18. 
  
  
  
  18.         for ( var l = second.length; j < l; j++ ) {   
    19. 
  
  
  
  19.             first[ i++ ] = second[ j ];   
    20. 
  
  
  
  20.         }   
    21. 
  
  
  
  21.     } else {   
    22. 
  
  
  
  22.         while ( second[j] !== undefined ) {   
    23. 
  
  
  
  23.             first[ i++ ] = second[ j++ ];   
    24. 
  
  
  
  24.         }   
    25. 
  
  
  
  25.     }   
    26. 
  
  
  
  26.     first.length = i;   
    27. 
  
  
  
  27.     return first;   
    28. 
  
  
  
  28. }, 
    29.

2011-01-23发布的1.5版，其init方法与1.42的变化不大：只有两处做了改动：

 
 
 
    
  
  
  
  1. //1.42   
    2. 
  
  
  
  2. -  ret = buildFragment( [ match[1] ], [ doc ] );   
    3. 
  
  
  
  3. -  selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes;   
    4. 
  
  
  
  4. //1.5   
    5. 
  
  
  
  5. + ret = jQuery.buildFragment( [ match[1] ], [ doc ] );   
    6. 
  
  
  
  6. + selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes;   
    7. 
  
  
  
  7. //1.42   
    8. 
  
  
  
  8. - return jQuery( context ).find( selector );   
    9. 
  
  
  
  9. //1.5   
    10. 
  
  
  
  10. + return this.constructor( context ).find( selector );//目的就是为了不再生成新实例  
    11.

2011-05-02发布的jquery1.6，变化不大，只是对HTML片断进行了更严密的判定：

 
 
 
    
  
  
  
  1. // Are we dealing with HTML string or an ID?   
    2. 
  
  
  
  2.    if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {   
    3. 
  
  
  
  3.   // Assume that strings that start and end with <> are HTML and skip the regex check   
    4. 
  
  
  
  4.     match = [ null, selector, null ];   
    5. 
  
  
  
  5.    } else {   
    6. 
  
  
  
  6.     match = quickExpr.exec( selector );   
    7. 
  
  
  
  7.    }  
    8.

总体来说,jQuery的构造器已经做得非常之***,基本上达到“改无可改”的地步了。但是要保证其高效运作，我们还需要一点选择器的知识与了解buildFragment方法的运作，因为这两个实在太常用了，但也是最耗性能的。

本文名称：详解jQuery构造器的实现
网站URL：http://www.csdahua.cn/qtweb/news41/429541.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

微信公众号知识

分类信息网站

模板商城网站　　 　成都网站设计　　 　雅安服务器托管　　 　华泰海航　　 　重庆电信回兴机房　　 　众诚伟业　　 　成都网站设计　　 　网站优化公司　　 　简阳网站建设　　 　国泰民安消防　　 　软文推广　　 　成都做网站　　 　微信小程序　　 　东电技服　　 　成都IDC机房托管　　 　雪茄烟品牌　　 　高端网站设计推广　　 　成都花箱厂家　　 　达州网站建设　　 　百度推广公司