jQueryのソース分析(B)の入口モジュール

本質的オブジェクト上のjQueryのは、JavaScriptのオブジェクトが返されて、入口モジュールは、対応するノードへの参照を保存することができ、他のモジュールの動作のため

次のように私たちは、jQueryオブジェクトを作成するときに、さまざまなjQueryのセレクタを提供することができます:

  falseは、jQueryオブジェクトがnullを返します。

  DOMノードと、基準要素を含むjQueryのDOMオブジェクトを返します。

  本体と、文字列「本体」、jQueryオブジェクトは、基準体の要素を返します

  個々のラベルを、DOM要素を対応するラベルを作成するのdocument.createElementを呼び出し

  より複雑なHTMLコード;要素を作成jQuery.buildFragmentを呼び出します

  機能; $(ドキュメント).ready(関数)速記、DOMを実行する前にロードするまで、いくつかの献身的な続きます

例えば:

<!DOCTYPE HTML > 
< HTML LANG = "EN" > 
< > 
    < メタ文字コード= "UTF-8" > 
    < タイトル>ドキュメント</ タイトル> 
    < スクリプトSRC = "http://libs.baidu.com/jquery/1.7 .1 / jquery.min.js」> </ スクリプト> 
</ ヘッド> 
< ボディ> 
    < PのID = "P" > 123 </ P > 
    <))
        はconsole.log($(P))
        はconsole.log($(' ボディ' ))
        はconsole.log($(' <P> 123 </ P> ' ))
        $(関数(){にconsole.log (' ドムがロード' )}) 
     </ スクリプト> 
</ ボディ> 
</ HTML >

次のように出力されます。

5つの上部出力、最初の空のjQueryオブジェクト、第2の目的は、Pを含有する対応する5つの出力情報は、jQueryの要素であるjQueryオブジェクト参照ノードを含む第3の本体、第四の作成のjQuery DOMは$(関数(){})オブジェクトの例に対応する、jQueryオブジェクト、第五の直接出力情報に取り付けられていません

 

 ソースコード解析


 砂漠のQQ:22969969によって作家

 入口モジュールの機能のjQuery jQuery.fn.initの内部資料分析にあり、関数は異なるパラメータによって異なる実装であろう次のように行います。

  INIT:関数(セレクタ、コンテキスト、rootjQuery){            // コンテキストタイプ及びパラメータ選択を解析する責任、および対応する論理実行
    VaRの一致を、ELEM、RET、DOC; 

    // ハンドル$( "")、$(NULL)、 $または(未定義)
    IF(セレクタ!){                                                         // セレクタは「」、NULL、未定義の偽等falseに変換することができているjQueryの上記第一例に相当する
      戻り これを; 
    } 

    // (ハンドル$をDOMElementsで)の
    IF(selector.nodeType){                                                 // セレクタのnodeTypeは、例えば、DOM要素セレクタと考えられる属性を有する:$(のdocument.getElementById( 'D')) 、jQueryの上の第2の例に対応します
      この .context = この [0] = セレクタ;
       この .LENGTH = 1。;
       戻る この; 
    } 

    // 、Elementは一度のみEXISTS体のITを最適化見つける
    IF(セレクタ=== "身体" && &&コンテキストdocument.body!) {                // 引数が文字列選択「体」であり、コンテキストが空である、などの場合:$(「ボディ」)、上記第三の例のjQueryに対応
      この .context = ドキュメント;
       この [0] = document.bodyと、
       この .selector = セレクタ;
       この .LENGTH = 1。;
       返し 、これを
    }

    // HTML文字列をハンドル
    のIFtypeof演算セレクタ=== "文字列"){                                    // パラメータセレクタは文字列です
      // WEは、HTMLやIDの文字列を扱っている?
      IF(selector.charAt(0)===「< "&& selector.charAt(selector.length - 。1)==="> "&& selector.length> = 3){        // もしパラメータ選択が" < "初めに、するために、"終了>」、および3以上の長さ
        / / 開始および終了<>とHTMLであり、スキップ文字列はREGEXを確認したと    
        の一致=を[ ヌル、セレクター、ヌル ];                                                                                     //この文字列は、HTMLフラグメントはquickExpr定期点検を省略するものとします。これが唯一必ずしもそれが真に有効なHTMLコードであることを意味しないものとする

      } { 
        一致が quickExpr.exec(セレクタ)=;                                                                                // そうでない場合quickExprは、パラメータ選択コードはもう少し複雑であるかどうかを検出するために使用されるが、
      } 

      // 確認しますマッチA、それは#IDのために指定されていない状況ではなかった
      IF(試合&&(マッチ|| [1]!コンテキスト)){ 

        // HANDLE:$(HTML) - > $(アレイ)
        IF(マッチ[1。]){ 
          コンテキスト =コンテキストのinstanceof jQueryのコンテキスト[0?]:文脈; 
          DOC =(|| context.ownerDocumentコンテキスト?コンテキスト:文書)。

          // 単一の文字列が渡されると、それは、単一のタグの場合は
          // だけのcreateElementを行い、残りのスキップ 
          RET = rsingleTag.exec(セレクタ)。

          もし(RET){                                                       // 如果参数セレクタ是单独标签比如$( '<P> </ P>'); 
            もし(jQuery.isPlainObject(コンテキスト)){ 
              セレクタ = [のdocument.createElement(RET [1 ])]。
              jQuery.fn.attr.call(セレクタ、コンテキスト、)。

            } { 
              セレクタ = [doc.createElement(RET [1 ])]。
            }

          } { 
            RET = jQuery.buildFragment([マッチ[1 ]、[DOC])。
            セレクタ =(?ret.cacheable jQuery.clone(ret.fragment):ret.fragment).childNodes。
          } 

          戻り jQuery.merge(この、セレクタ)。

        // HANDLE:$( "#ID") 
        }  {                                                             // 参数セレクタ是"#ID"格式、如:$( '#のP1') 
          ELEM =のdocument.getElementById(マッチ[2 ])。

          // ブラックベリー4.6リターンをキャッチするためにはparentNodeをチェック
          //文書#6963でなくなったノード
          場合(ELEM && elem.parentNode){
             // IEとOpera戻りアイテムケースを処理
            // 代わりIDの名前で
            あれば(elem.id!==一致[2 ]) {
               戻りrootjQuery.find(セレクタ)。
            } 

            // そうでない場合、我々はjQueryオブジェクトに直接元素を注入
            この .LENGTH = 1 この [0] = ELEM。
          } 

           .context = ドキュメント。
          この .selector = セレクタ。
          リターン この; 
        } 

      // HANDLE:$(exprの、$(...)) 
      } 他に あれば(文脈||!{context.jquery)
         リターン(コンテキスト|| rootjQuery).find(セレクタ); 

      // HANDLE:$(exprは、コンテキスト)
      // にちょうど相当する($(コンテキスト).find(expr)は 
      } {
         戻り 、この.constructor(コンテキスト).find(セレクタ); 
      } 

    // HANDLE:$ (関数)
    // 準備文書のショートカット 
    } そう であれば(jQuery.isFunction(セレクタ)){                           // パラメータは、関数セレクターであれば、ここから我々は$(機能)を見ることができる、readyイベントを結合すると考えられている$(ドキュメント).ready(関数)速記で、ここでは上記第五jQueryのインスタンスに対応する
      戻るrootjQueryを。 READY(セレクタ); 
    } 

    IF(selector.selectorが==!不定){
       この .selector = selector.selector;
       この .context = selector.context; 
    } 

    戻り jQuery.makeArray(セレクタ、これを); 
  }

基準の対応するDOMノードへのアクセスにかかるのjQueryの例、およびそれが底部または機能モジュールで動作することができます。

 

おすすめ

転載: www.cnblogs.com/greatdesert/p/11399137.html