JavaScript Note.

記錄一下，剛剛 Study Code 的小小筆記

這是一段 NodeJS 的程式碼

var cheerio = require('cheerio'); //  DOM Parse

var $ = cheerio.load('<ul id="fruits"><li id="A" class="apple">Apple</li><li id="O" class="orange">Orange</li><li id="P" class="pear">Pear</li></ul>');

console.log($('li').filter('.orange').attr('id'));

console.log('\n\n========================\n\n');

//  以上的執行程式，也等於以下程式
//  差在於一個(上方)傳入的是 String , 下方傳入的是 function

var rs = $('li').filter(function(i, el) {
    console.log('check el : ' + i);
    // this === el
    return $(this).attr('class') === 'orange';
}).attr('class');

console.log("other rs :" + rs);

//  傳入 filter(func) 參數的 function , 判斷條件後，回傳 true / false 
//  如果為 true , 則會回傳該 el 

console.log('\n\n========================\n\n');

//  將以上程式再做一些調整

var rs1 = $('li').filter(function(i, el) {
    console.log('check el : ' + i);
    // this === el
    // return $(this).attr('class') === 'orange';
    return true;  //  都回傳 true
}).text; //  取得該 el 的文字

console.log("other rs1 :" + rs1);
//  結果會是三個 el 的 txt 如下：
//  AppleOrangePeer

好奇的追了一下，cheerio 這個 Package 的 Code
以下程式碼截取於下方網址
https://github.com/MatthewMueller/cheerio/blob/master/lib/api/traversing.js

var filter = exports.filter = function(match) {
  var make = _.bind(this.make, this);
  var filterFn;

  if (_.isString(match)) {
    filterFn = function(el) {
      return select(match, el)[0] === el;
    };
  } else if (_.isFunction(match)) {
    filterFn = function(el, i) {
      return match.call(make(el), i, el);
    };
  } else if (match.cheerio) {
    filterFn = match.is.bind(match);
  } else {
    filterFn = function(el) {
      return match === el;
    };
  }

  return make(_.filter(this, filterFn));
};

原來，是用 isString , isFunction 來判斷
並使用 call 呼進行叫呼

意外 google 到一些 bind 方法說明
http://msdn.microsoft.com/zh-tw/library/ie/ff841995(v=vs.94).aspx
範例如下：

// Define the original function.
var checkNumericRange = function (value) {
    if (typeof value !== 'number')
        return false;
    else
        return value >= this.minimum && value <= this.maximum;
}

// The range object will become the this value in the callback function.
var range = { minimum: 10, maximum: 20 };

// Bind the checkNumericRange function.
var boundCheckNumericRange = checkNumericRange.bind(range);

// Use the new function to check whether 12 is in the numeric range.
var result = boundCheckNumericRange (12);
document.write(result);

// Output: true

MSDN這個站，滿多JavaScript的說明，不錯(推)