Lazy.js初體驗

之前有發布過Linq To Javascript 小小使用心得,

日前透過朋友提及LazyJs在大量資料搜尋上,

效能使用上比underscore與LinqJS來得高出許多!

那在使用上會有很大差異嗎?

 

 

 

其實先到LazyJS的官網中查看,

第一幕看到的就是自家與他家的效能比較.

不過這不會本篇中的重點,網路上很多前輩已經分享測試效能的文章

藉此就拿之前發布過的Linq To Javascript 利用Linq.js以選取縣市下拉式清單為例

改寫為使用LazyJS嚕

在此先說明一下,如果對underscore熟的話,我相信對轉換至lazyJS是很快的,

因為每一個方法名稱幾乎是對應的如下圖

接下來就直接看CODE嚕,

在此如果小弟有甚麼解釋不清楚,或則是錯誤的地方也請各位前輩不吝指導

跟LinqJS那篇文章一樣的原始資料

 var jsonCity = {
            "results": {
                "table": [
                {
                    "city": {
                        "sortkey":1,
                        "id": "KeelungList",
                        "name": "基隆市"
                    }
                },
                {
                    "city": {
                        "sortkey": 2,
                        "id": "TaipeiCityList",
                        "name": "臺北市"
                    }
                },
                {
                    "city": {
                        "sortkey":3,
                        "id": "TaipeiList",
                        "name": "新北市"
                    }
                },
                {
                    "city": {
                        "sortkey": 4,
                        "id": "TaoyuanList",
                        "name": "桃園縣"
                    }
                },
                {
                    "city": {
                        "sortkey": 5,
                        "id": "HsinchuCityList",
                        "name": "新竹市"
                    }
                },
                {
                    "city": {
                        "sortkey": 6,
                        "id": "HsinchuList",
                        "name": "新竹縣"
                    }
                },
                {
                    "city": {
                        "sortkey": 7,
                        "id": "MiaoliList",
                        "name": "苗栗縣"
                    }
                },
                {
                    "city": {
                        "sortkey": 8,
                        "id": "TaichungList",
                        "name": "臺中市"
                    }
                },
                {
                    "city": {
                        "sortkey": 9,
                        "id": "ChanghuaList",
                        "name": "彰化縣"
                    }
                },
                {
                    "city": {
                        "sortkey": 10,
                        "id": "NantouList",
                        "name": "南投縣"
                    }
                },
                {
                    "city": {
                        "sortkey": 11,
                        "id": "YunlinList",
                        "name": "雲林縣"
                    }
                },
                {
                    "city": {
                        "sortkey": 12,
                        "id": "ChiayiCityList",
                        "name": "嘉義市"
                    }
                },
                {
                    "city": {
                        "sortkey": 13,
                        "id": "ChiayiList",
                        "name": "嘉義縣"
                    }
                },
                {
                    "city": {
                        "sortkey": 14,
                        "id": "YilanList",
                        "name": "宜蘭縣"
                    }
                },
                {
                    "city": {
                        "sortkey": 15,
                        "id": "HualienList",
                        "name": "花蓮縣"
                    }
                },
                {
                    "city": {
                        "sortkey": 16,
                        "id": "TaitungList",
                        "name": "臺東縣"
                    }
                },
                {
                    "city": {
                        "sortkey": 17,
                        "id": "TainanList",
                        "name": "臺南市"
                    }
                },
                {
                    "city": {
                        "sortkey": 18,
                        "id": "KaohsiungCityList",
                        "name": "高雄市"
                    }
                },
                {
                    "city": {
                        "sortkey": 19,
                        "id": "PingtungList",
                        "name": "屏東縣"
                    }
                },
                {
                    "city": {
                        "sortkey": 20,
                        "id": "MatsuList",
                        "name": "連江縣"
                    }
                },
                {
                    "city": {
                        "sortkey": 21,
                        "id": "KinmenList",
                        "name": "金門縣"
                    }
                },
                {
                    "city": {
                        "sortkey": 22,
                        "id": "PenghuList",
                        "name": "澎湖縣"
                    }
                }
                ]
            }
        };

透過LinqJs取得縣市資料

/*
        透過LinqJs 將JSON讀入
        並透過OrderByDescending使用sortkey排序
        select當中所回傳的欄位
        就像是SQL query的選取特定欄位一樣
        不需要的欄位不見得要取出
        */
        var QueryResult = Enumerable.From(jsonCity.results.table)
                          .OrderByDescending(function (x) {x.city.sortkey })
                          .Select(function (x) {
                              viewData = { Name: x.city.name, Id: x.city.id };
                              return viewData
                          });

透過LazyJs取得縣市資料

     //透過Lazy將資料傳入
     //使用sortBy並指定要排序的Key為sortkey,第二個參數true為降冪排序,false為升冪排序預設為false
     //使用pluck將集合內的值選擇要帶出那些欄位跟select的性質是一樣的
     //value()將值帶出
      var OptionHtmlStr =Lazy(jsonCity.results.table)
                        .sortBy(function(x){return x.city.sortkey ;},false)
                        .pluck(function(x){return {id:x.city.id,name:x.city.name};})
                        .value();

看一下的結果嚕

降冪排序

升冪排序

接下來就是如何透過where的方法過濾取得所帶入的值

LinqJs用法

       /*
        取得所選取的縣市ID
        放入QueryResult做為搜尋條件
        並轉為array

        */

     var Seleced = QueryResult
                 .Where(function (x) { return x.Id == "KinmenList" })
                 .ToArray();

透過LazyJs

    //透過Lazy將資料傳入
    //pluck帶出要過濾的欄位
    //使用Where方法將要搜尋的物件帶入
    //value()將值帶出
    var FindObj =Lazy(jsonCity.results.table)
                 .pluck(function(x){return {id:x.city.id,name:x.city.name};})
                 .where({id:"TaipeiList"})
                 .value();

看一下結果嚕

其實稍微與underscorejs跟linqjs操作上做比較的話,

真的underscorejs會比較無痛轉移(因為連方法名稱幾乎都一樣呀....),

但實際上也不是說熟linqjs就不好轉移至Lazyjs,

或許有些微的差異,

但實際上不會付出太多的學習成本,

就從上述範例應該就能看出端倪嚕.

以下為完整範例程式碼與線上範例

 

 

參考連結

Lazy.js API Docs - v0.4.2

Linq To Javascript 利用Linq.js以選取縣市下拉式清單為例