jQueryソース分析の$.grep()関数四問

4235 ワード

質問1:jQuery.grepソースは何ですか?
//grep  ,           fn     !
grep: function( elems, callback, invert ) {
var callbackInverse,
matches = [],
i = 0,
//      
length = elems.length,
//           ,true  false,false  true
//  invert false, !inverse true,         true     ,    callbackExpect   true
callbackExpect = !invert;
// Go through the array, only saving the items
// that pass the validator function
for ( ; i < length; i++ ) {
//  invert false,     ,    fn  true,       matches  
//                  
callbackInverse = !callback( elems[ i ], i );
if ( callbackInverse !== callbackExpect ) {
matches.push( elems[ i ] );
}
}
return matches;
}

質問2:jQuery.grep呼び出し方式はどれらがありますか?
winnow関数で
   if ( qualifier.nodeType ) {
		return jQuery.grep( elements, function( elem ) {//       ,            true        
			return ( elem === qualifier ) !== not;
		});

	}
winnow関数に呼び出しもあります
return jQuery.grep( elements, function( elem ) {
		return ( jQuery.inArray( elem, qualifier ) >= 0 ) !== not;<span style="font-family: Arial, Helvetica, sans-serif;">//       ,            true        </span>
	});

それともwinnowメソッドで
	return jQuery.grep( elements, function( elem, i ) {
			/* jshint -W018 */
			return !!qualifier.call( elem, i, elem ) !== not;<span style="font-family: Arial, Helvetica, sans-serif;">//       ,            true        </span>
		});

jQueryでbuildFragmentで呼び出す
       jQuery.grep( getAll( nodes, "input" ), fixDefaultChecked );
このメソッドは、すべてのinput要素のdefaultCheckedプロパティをcheckedと同じに設定するために使用されます.
// Used in buildFragment, fixes the defaultChecked property
var rcheckableType = (/^(?:checkbox|radio)$/i);
function fixDefaultChecked( elem ) {
	if ( rcheckableType.test( elem.type ) ) {
		elem.defaultChecked = elem.checked;//            ,           ,           !
	}
}
問題3:jQuery.grep法の役割は何ですか?
3番目のパラメータが入力されていない場合は、コールバック関数を呼び出した結果trueとなる要素を返したいことを示すので、jQuery.grepの役割はフィルタリングであり,特定の条件を満たす要素だけが結果配列に現れる!覚えておいてください:この関数の戻り値は配列ですよ.idとclassがfatherの要素であることを次の例で分析します.
 <div class="father" id="father" style="background-color:red;height:400px;background-color:#ccc;">  
</div>  
 <div class="father" style="background-color:red;height:400px;background-color:#ccc;">  
</div>  
JS部
     //          ,                 !
       var result=jQuery.grep($(".father"),function(elem,index)
	   {
	      return elem.id==="father";
		  //grep  false,true           ;map     return elem
		  // each  false,true        
	   });
        console.log(result);//  [div#father.father]
だからgrepは値の真偽を返すことによって戻る要素を決定して、すべての条件を満たす要素は1つのDOMの集合を構成します!
HTML部分は変わらず、JS部分を以下のように変更しました.
     //          ,                 !
       var result=jQuery.grep($(".father"),function(elem,index)
	   {
	      return elem.id==="father";
		  //grep  false,true           ;map     return elem
		  // each  false,true        
	   },true);
        console.log(result);//[div.father]
この場合、3番目のパラメータはtrueであるため、内部では逆になるため、falseの値を持つ要素が結果配列に現れることを望んでいることを示し、結果配列には2番目のdiv要素しか含まれていない.
ソースコードのコードは、次のように変更できます.
//          :
 callbackResult = callback( elems[ i ], i );//       
if ( callbackResult === callbackExpect ) {//               ,            
matches.push( elems[ i ] );
}

質問4:jQuery.grepのコンテキストとパラメータは何ですか?
解答:callまたはapplyが明確に呼び出されていないため、コンテキストは実行環境によって決定されます.1番目のパラメータは要素で、2番目のパラメータは下付き(jQuery.eachとインスタンスeachのみ、mapメソッドの1番目のパラメータは下付き、2番目のパラメータは要素!)
まとめ:
(1)$.eachメソッドは、すべての要素を遍歴してコールバック関数を実行することを強調します.return falseの場合、後の呼び出しを停止します.grepは1つの関数に従ってすべての要素をフィルタリングし、すべての要素に1つの関数を実行させて戻り値が所望の戻り値を満たすかどうかを見させ、満足すれば結果配列の中で、3番目のパラメータは逆を取るかどうかを表すので、grepはフィルタリングを強調する.mapは修正、すなわちすべての要素集合を修正することを強調する.(map強調修正、grep強調フィルタ、each強調遍歴)
(2)eachのコールバック関数が入力するパラメータは下付きと要素で、下付きは前の要素が後で、他のgrepあるいはmap方法が入力するパラメータは要素と下付きで、要素は前の下で後で(インスタンスmap、each方法を除く)!