underscore.js依存ライブラリ関数分析一(遍歴)
8128 ワード
Underscoreの概要:
underscoreは非常に簡潔で実用的なjavascriptライブラリであり、jQueryパッケージのタイプと差は少ないが、underscoreはbackboneの依存ライブラリであり、backboneを実行するにはunderscoreを導入する必要がある.js.“_”先頭は、他のライブラリ関数名を区別するための依存ライブラリunderscoreの特徴です.“.” 以降は関数の名前です.
Underscore関数:
underscoreには60以上の関数がカプセル化されており、開発者が使用できるようになっています.次に、分類して分析します.
1.遍歴する
underscoreでは、eachとmapのループ操作が提供され、この2つには共通の特徴があり、一定の条件に基づいてセット内の各要素をループすることである.しかし、彼らの間の操作方法は違います.
each()関数:
呼び出しのフォーマット:
_.each(list,iterator,[context])
この関数式はiterator反復器が提供するフィルタ条件に基づいてlistリストの各要素を巡回します.
ソース:
関数の考え方:ホストがオリジナルのforEachメソッドをサポートしている場合、それは直接オリジナルを呼び出し、サポートしていない場合は遍歴する方法です(一般的にブラウザまたはnode.jsがオリジナルのforEachメソッドをサポートしています).
ここには珍しい判断方法がありますlength === +obj.length.
一般に、2つのパラメータ"=="は2つの等しいと判断しますが、ここでは「===」に等しいと判断します.まず、全等しいと言います.2つの同じ値をtrueとし、全等しいとするとfalseが返されます.全等しいと、ペアのオブジェクトタイプが変換されないためです.後に「+」という記号があり、+記号の後の操作を数値タイプに変換します.資料を調べてみると、objパラメータタイプが文字列であればlength属性、functionまたは配列であればlength属性、Objectオブジェクトであればlength属性が得られないという書き方を著者がなぜ使っているのかを分析した.非配列、非関数、非文字列の場合、for inとデータをループします.
を使用します.eachが作成した小さな例は以下の通りです.
注意:上記のコード機能は、コンソールに偶数を出力した結果(2,4)です.iterator反復器はカスタム関数です.each()関数は戻り値がありません.
map()関数:
呼び出しのフォーマット:
_.map(list,iterator,[context])
この関数の機能はiterator反復器の関数に基づいてlistリストの各要素を遍歴し、リスト要素の遍歴が完了すると関数は配列オブジェクトを返します.
まずソースコードを見てください.
注意:map/collect関数とeachの違いは、map/collectが反復ごとに戻り値を格納し、新しい配列として返すことです.
インスタンスコードは次のとおりです.
注意:火狐運転後の結果は[undefined,2,undefined,4,undefined]
この結果から,条件に合致しない配列要素に対しては「undefined」となり,利用可能な配列を抽出するには遍歴操作が必要であることが分かった.コードは以下の通りである.
注火狐の運転結果は[2,4]
underscoreの遍歴操作はこれで終わり、次は情熱的に前進し続けています.の
underscoreは非常に簡潔で実用的なjavascriptライブラリであり、jQueryパッケージのタイプと差は少ないが、underscoreはbackboneの依存ライブラリであり、backboneを実行するにはunderscoreを導入する必要がある.js.“_”先頭は、他のライブラリ関数名を区別するための依存ライブラリunderscoreの特徴です.“.” 以降は関数の名前です.
Underscore関数:
underscoreには60以上の関数がカプセル化されており、開発者が使用できるようになっています.次に、分類して分析します.
1.遍歴する
underscoreでは、eachとmapのループ操作が提供され、この2つには共通の特徴があり、一定の条件に基づいてセット内の各要素をループすることである.しかし、彼らの間の操作方法は違います.
each()関数:
呼び出しのフォーマット:
_.each(list,iterator,[context])
この関数式はiterator反復器が提供するフィルタ条件に基づいてlistリストの各要素を巡回します.
ソース:
var each = _.each = _.forEach = function(obj, iterator, context) {
if (obj == null) return;
if (nativeForEach && obj.forEach === nativeForEach) {
// , JavaScript 1.6 forEach
obj.forEach(iterator, context);
} else if (obj.length === +obj.length) {
// [ ]
for (var i = 0, length = obj.length; i < length; i++) {
if (iterator.call(context, obj[i], i, obj) === breaker) return;
}
} else {
// { }
var keys = _.keys(obj);
for (var i = 0, length = keys.length; i < length; i++) {
if (iterator.call(context, obj[keys[i]], keys[i], obj) === breaker) return;
}
}
};関数の考え方:ホストがオリジナルのforEachメソッドをサポートしている場合、それは直接オリジナルを呼び出し、サポートしていない場合は遍歴する方法です(一般的にブラウザまたはnode.jsがオリジナルのforEachメソッドをサポートしています).
ここには珍しい判断方法がありますlength === +obj.length.
一般に、2つのパラメータ"=="は2つの等しいと判断しますが、ここでは「===」に等しいと判断します.まず、全等しいと言います.2つの同じ値をtrueとし、全等しいとするとfalseが返されます.全等しいと、ペアのオブジェクトタイプが変換されないためです.後に「+」という記号があり、+記号の後の操作を数値タイプに変換します.資料を調べてみると、objパラメータタイプが文字列であればlength属性、functionまたは配列であればlength属性、Objectオブジェクトであればlength属性が得られないという書き方を著者がなぜ使っているのかを分析した.非配列、非関数、非文字列の場合、for inとデータをループします.
を使用します.eachが作成した小さな例は以下の通りです.
/**
* Created by on 14-10-4.
*/
$(function(){
var list = [1,2,3,4,5];
_.each(list,function(n){
if(!(n % 2)){
console.log(n);
}
});
});注意:上記のコード機能は、コンソールに偶数を出力した結果(2,4)です.iterator反復器はカスタム関数です.each()関数は戻り値がありません.
map()関数:
呼び出しのフォーマット:
_.map(list,iterator,[context])
この関数の機能はiterator反復器の関数に基づいてlistリストの各要素を遍歴し、リスト要素の遍歴が完了すると関数は配列オブジェクトを返します.
まずソースコードを見てください.
_.map = _.collect = function(obj, iterator, context) {
//
var results = [];
if (obj == null) return results;
// map
if (nativeMap && obj.map === nativeMap) return obj.map(iterator, context);
//
each(obj, function(value, index, list) {
// results
results.push(iterator.call(context, value, index, list));
});
//
return results;
};注意:map/collect関数とeachの違いは、map/collectが反復ごとに戻り値を格納し、新しい配列として返すことです.
インスタンスコードは次のとおりです.
/**
* Created by on 14-10-4.
*/
$(function(){
var list = [1,2,3,4,5];
var results;
results = _.map(list,function(n){
if(!(n % 2)){
return n;
}
})
console.log(results);
});注意:火狐運転後の結果は[undefined,2,undefined,4,undefined]
この結果から,条件に合致しない配列要素に対しては「undefined」となり,利用可能な配列を抽出するには遍歴操作が必要であることが分かった.コードは以下の通りである.
$(function(){
var list = [1,2,3,4,5];
var results;
var _list = [];
results = _.map(list,function(n){
if(!(n % 2)){
return n;
}
})
for(var i = 0; i< results.length; i++){
if(results[i] != undefined){
_list.push(results[i]);
}
}
console.log(_list);
});注火狐の運転結果は[2,4]
underscoreの遍歴操作はこれで終わり、次は情熱的に前進し続けています.の