5-jQuery基本構造解析工場関数の実現擬似配列入口関数パラメータ解析/総括ツール法の抽出プラグイン機構

jQuery基本構造解析

構造:閉パッケージ(インスタント関数)-関数は自分に属さない変数を持つ

一般関数も閉包理解

関数のアクセス規則-内層は外層の役割ドメイン

にアクセスできる.

jQueryはなぜ閉パッケージ構造を使用するのか

閉パケットは閉空間であり、外層は内層データにアクセスできず、フレームワークのコード

を保護することができる.

はすべてのコードをカプセル化し、2つのグローバル変数

のみを提供する.

他のフレームワークとの衝突を回避する

パラメータwindow

パフォーマンスの向上(コードの検索チェーンの短縮)

なぜパラメータもwindow-便利なコード圧縮(パラメータ置換a,b,cなど)と混同

形参照undefined-互換性の問題を解決

便利コード圧縮

undefinedはIEブラウザで異なる表現形式を持っている.

正常の場合、console.log(undefined = 5555;) //undefined

IE 9-の前にundefinedを変更することができます

window.undefined = window.undefined // window undefined ( ) window

ファクトリ関数の実装

は、フレームワークの外部でこのフレームワークをどのように使用すべきか、このフレームワークの機能をどのように取得すべきかを考える.

外部アクセス閉パッケージのデータ:

は閉パケットにおいて関数を返し、この戻り関数において閉パケット中のデータ

に間接的にアクセスする.

閉パケット内のプライベートデータ(外部に提供されるインタフェース)をグローバルオブジェクトwindow

にバインドする.

は、外部インタフェース

を提供する.

ダミー配列

擬似配列の特徴

自体がオブジェクトである配列ではない

.

key 0から順次インクリメント-別のkeyが存在することを許可することができる(ただし、処理時に無視される)

.

はlength属性を有し、keyの値

を記録する.

は、length-1属性(length-1ペアキー値ペア)

を持つ必要がある.

このオブジェクトはwindowではありません(window.lengthに記録されたiframeラベルの個数)

あるオブジェクトがwindowであるか否かを判断する:obj==window.window

擬似配列種−エントリ関数を擬似配列として処理する方法

システムに付属する擬似配列

[].push.apply(obj, )

を用いる.

カスタム擬似配列

カスタムダミー配列はIE 9以下(IE 9-)でエラーが発生し、[].push.apply(obj, )で

を直接変換することはできません.

擬似配列-->先に配列に変換-->[].push,apply(obj, );

obj-arr.push(obj[i])

を巡る

var arr2 = [].slice.apply(obj); arr2-push

エントリ関数パラメータ解析

パラメータが偽物と判断した場合

は、空のjQueryインスタンスオブジェクト

を返す

パラメータは文字列です(セレクタ)

は、セレクタに従ってページ内の指定するすべてのラベルを取得し、インスタンスオブジェクトに保存して

に戻る.

パラメータは文字列(ラベル)

パラメータのすべてのレベル1のラベルをインスタンスオブジェクトに保存して返し、keyは0から1回増加し、これらのラベルはkeyに対応するvalue値として保存された

である.

パラメータは配列です

配列中のすべての要素を順次取り出し、jQインスタンスオブジェクトとして保存するキー値対戻り(keyは0からインクリメントし、配列中の要素は対応するvalue値とする)

.

パラメータは擬似配列です(構造は配列に似ています)

擬似配列中のすべてのvalue値を順次取り出し、jQインスタンスオブジェクトのキー値対戻り(keyは0からインクリメントし、valueは対応するkeyのvalue値とする)

を保存する.

パラメータはオブジェクトです

は、パラメータ(オブジェクト)を全体としてkeyが0に対応するvalue値として保存し、jQインスタンスオブジェクト

を返す.

パラメータはDOMタグ(オブジェクト)

は、パラメータ(DOMオブジェクト)を全体としてkeyが0に対応するvalue値として保存し、jQインスタンスオブジェクト

に戻る.

パラメータはゼロ以外の数値です

は、keyが0に対応するvalue値にパラメータ(数値)を全体として保存し、jQインスタンスオブジェクト

を返す.

ブール型の値:同8.

関数==リスニングページのロードDOM

document.addEventListener( , )

はIE 9-と互換性がなく、

とエラーが発生します.

パラメータ1:DOMContentLoaded DOMロード完了

を示す

document.attachEvent()互換IE 9以下のブラウザを使用

パラメータ

リスニングするステータス(固定:onreadystatechange)

イベント発生後のコールバック関数

エントリ関数パラメータ解析-まとめ

条件は偽と判断する:空のjQインスタンスオブジェクト

を返す.

文字列(セレクタ|ラベル)

配列または擬似配列:

オブジェクト|DOMノード|true|数値(0以外):受信パラメータをkeyが0に対応するvalue値として保存し、

を返します.

関数(処理対象)

initメソッド内部の実現ロジックを考える

はパラメータに対してタイプ判定を行い、判定タイプの結果に基づいて

をそれぞれ処理する.

ツールメソッドの抽出

メソッド

ツールオブジェクト:複数のメソッドを1つのオブジェクトに配置する

コンストラクション関数に静的メソッド(ツールオブジェクトをコピーするメソッド-ツールオブジェクトを巡回してプロパティコピーを行う)

 var obj = {name : 'zs',age : 20,friends:['  ','  ']};
 var  obj1 = {};
 //   :obj1  obj   

 for(var key in obj){
     obj1[key] = obj[key];
 }

を追加する.

コンストラクタのプロトタイプオブジェクトにプロトタイプメソッド

を追加する

jQuery実装

jQ.each();コンストラクタ自体に追加する静的方法

jQ().each();コンストラクション関数に対応するプロトタイプオブジェクトに追加するプロトタイプメソッド

  XDYQuery.prototype.extend  = XDYQuery.extend = function (obj) {
      for(var i in obj)
      {
          this[i] = obj[i];
      }
  }
  //      -              
  XDYQuery.extend(  {  //...  }  );

.

get():指定したインデックスに対応するラベルを取得して返す

パラメータ:

パラメータが渡されていない場合:取得ページに指定されたすべてのラベルが配列に格納されます==toArrayメソッド

伝達パラメータ

パラメータは正数

である.

パラメータが負数-1の場合は、最後から1番目(指定ラベル.length+負のインデックスをすべて取得)

を取得します.


eq():指定されたインデックスに対応するラベルを取得し、jQオブジェクトにパッケージして返す

パラメータ:

パラメータなし(判断arguments.length == 0):空のjQオブジェクト(thisではない)

を返す.

伝達パラメータ

パラメータは正数=>$(get)

パラメータは負の

です.


each()実現構想

eachメソッドの使用

jQ.each(obj | arr,fn(key,value){.....})

jQ().each(fn(key,value){.....})

の役割:オブジェクト|配列|擬似配列を遍歴し、ループごとに現在のキー値対(インデックス/要素)をパラメータとして後のコールバック関数に渡し、コールバック関数のコード

を実行する.

jQueryにおけるeach()の実現構想

オブジェクト|配列|擬似配列を巡回

[1]オブジェクトを巡回==>for..in

[2]配列=>for|for.in(推奨しない:プロトタイプメンバーを含む)?|forEach

擬似配列==>for..in | for

コールバック関数

割り込みループ(ループ中にコールバック関数の戻り値が偽であるか否かを判定し、条件が真であればループを終了する)

.

コールバック関数のthisは、現在のループのvalue値(コールバック関数はcallメソッドを使用してthisがvalue値を指す)

を指す.


jQueryにおけるmap()実現構想

jQ.map(arr,fn(index,value))

作用:変数配列、コールバック関数で配列を処理(増幅|フィルタリング)し、コールバック関数の戻り値を収集して新しい配列

を構成する.

実現構想

空の配列

を初期化する

転送された配列を巡回し、コールバック関数を呼び出して巡回配列のインデックス/value値を取得し、pushは空の配列の

に達する.

return空配列

jQueryにおけるremove()実現構想

jQインスタンスオブジェクト

を巡回する.

ループごとに現在のラベルを

削除する.
プラグインメカニズム

jQueryフレームワークに基づいて、新しいjsファイルを提供します.このjsには

の機能が追加されています.

jsファイルの名前:jQuery-名前.js