Underscore [1] : intersection 情境

2014-10-01

434
0
Javascript
2014-10-30

摘要:使用 Underscore intersection 情境

今天有個情境描述如下 :

TABLE 裡面有 3 筆基金 , 當基金標的含有特定標的時 , 需要出現某份報表 ,

如果今天我們單純的 HARD CODE 的話可能如下 :

$(document).ready(function(){
  
  var filterFund = ['HSBC'], //當投資標的有HSBC則要出現報表
      isRpt = false, //是否出現報表
      $tr = $("#tbl").find("tr");
  
  //找尋 table 所有基金欄位值是否有HSBC
  $tr.each(function (index, val) {
      var fund = $(this).find("td:eq(1)").text();
      if ($.inArray(fund, filterFund) > -1) {
          isRpt = true;
          return false;
      } 
    });
  
  if(isRpt){
    
    alert("Show Report");
  }
});

JsBIN

今天我們改成使用 UnderScore 來簡化上述的 Code :

$(document).ready(function(){
  
  var filterFund = ['HSBC'], //當投資標的有HSBC則要出現報表
      isRpt = false, //是否出現報表
      $tr = $("#tbl").find("tr");
  
    //取得 table 基金欄位所有的值
    var fundgroup = $tr.find( 'td:nth-child(2)' ).map(function () {
                    return $(this ).text();
    }).get();

  
   isRpt = _.intersection(fundgroup, filterFund).length > 0;
    
   if(isRpt){
     alert('Show Report');
   }
});

JsBin

在第一個例子中 , 我們必須迴圈整個 table 找尋是否有我們所需要得標的 ,

整個 each 迴圈中讓人乍看之下不知道這段是在做啥 ,

可是在第二個例子中 , intersection 的名稱讓人很清楚的明白這主要是取兩個集合的交集 ,

若今天交集的資料集在 0 筆以上的話則出現報表 , 因此清晰的函數命名以及動作的簡化

把原本複雜的描述清楚的表示了

Underscore

回首頁