擴(kuò)展微信小程序框架功能：函數(shù)功能增強(qiáng)Underscore.js 、Lodash
|
Underscore.js 和 Lodash 是最常用的JavaScript庫(kù)。 Underscore.js 它提供了一整套函數(shù)式編程的實(shí)用功能提供了100多個(gè)函數(shù)，包括常用的：map、filter、invoke — 當(dāng)然還有更多專業(yè)的輔助函數(shù)，如：函數(shù)綁定、JavaScript 模板功能、創(chuàng)建快速索引、強(qiáng)類型相等測(cè)試等等。 lodash 一開(kāi)始是 Underscore.js 庫(kù)的一個(gè) fork，因?yàn)楹推渌?Underscore.js的)貢獻(xiàn)者意見(jiàn)相左。John-David Dalton的最初目標(biāo)，是提供更多“一致的跨瀏覽器行為……，并改善性能”。之后，該項(xiàng)目在現(xiàn)有成功的基礎(chǔ)之上取得了更大的成果。 Underscore.jsUnderscore.js是一個(gè) JavaScript 工具庫(kù)，提供了類似 Prototype 功能的編程支持，但沒(méi)有對(duì) JavaScript 內(nèi)置的對(duì)象進(jìn)行擴(kuò)展。。Underscore.js定義了一個(gè)下劃線（_）對(duì)象，函數(shù)庫(kù)的所有方法都屬于這個(gè)對(duì)象。這些方法大致上可以分成：集合（collection）、數(shù)組（array）、函數(shù)（function）、對(duì)象（object）和工具（utility）五大類。 Underscore.js使用以一個(gè)對(duì)象為例：
var obj = {name: 'dog', age: '3', color: 'white'};
獲取對(duì)象的所有屬性名 console.log(_.keys(obj)); // 輸出：["name", "age", "color"] 獲取對(duì)象的所有屬性值 console.log(_.values(obj)); // 輸出：["dog", 3, "white"] 把一個(gè)對(duì)象轉(zhuǎn)換成一個(gè) [key, value] 形式的數(shù)組 console.log(_.pairs(obj)); // 輸出：[["name", "dog"], ["age", 3], ["color", "white"]] 返回一個(gè)對(duì)象的副本, 并且里面鍵和值是對(duì)調(diào)的（要使之有效, 必須確保object里所有的值都是唯一的且可以序列號(hào)成字符串.）
console.log(_.invert(obj)); // 輸出：Object {3: "age", dog: "name", white: "color"}
復(fù)制 source 對(duì)象的所有屬性到 destination 對(duì)象上, 然后返回 destination 對(duì)象上
console.log(_.extend({weight: 10}, obj)); // 輸出：Object {name: "dog", age: 3, color: "white", weight: 10}
返回一個(gè)對(duì)象的副本, 過(guò)濾掉除了 keys 以外的所有屬性(一個(gè)或多個(gè))
console.log(_.pick(obj, 'name', 'color')); // 輸出：Object {name: "dog", color: "white"}
返回一個(gè)對(duì)象的副本, 過(guò)濾掉了黑名單里的 keys （keys可以是單個(gè)key也可以是包含多個(gè)key的數(shù)組）
console.log(_.omit(obj, 'color')); // 輸出：Object {name: "dog", age: 3}
LodashLodash是一個(gè)具有一致接口、模塊化、高性能等特性的 JavaScript 工具庫(kù)。它內(nèi)部封裝了諸多對(duì)字符串、數(shù)組、對(duì)象等常見(jiàn)數(shù)據(jù)類型的處理函數(shù)，其中部分是目前 ECMAScript 尚未制定的規(guī)范，但同時(shí)被業(yè)界所認(rèn)可的輔助函數(shù)。 與Underscore一樣，lodash的名字也是源于所有函數(shù)前面的那個(gè)字符。就像jQuery在全部函數(shù)前加全局的$一樣，lodash使用全局的_來(lái)提供對(duì)工具的快速訪問(wèn)。例如，要對(duì)數(shù)組的所有元素執(zhí)行某個(gè)行為：
_.each([1, 2], function(n) { console.log(n); });
Lodash 提供的函數(shù)主要分為以下幾類：
lodash的一大亮點(diǎn)在于其模塊化：開(kāi)發(fā)者可以按需加載，而非引用整個(gè)庫(kù)。每一個(gè)模塊都暴露在npm中，所以開(kāi)發(fā)者可以獨(dú)立地引用它們： npm install lodash.map
var map = require('lodash.map');
Lodash使用以一個(gè)對(duì)象數(shù)組為例
var employees = [
{ 'name': 'zhangsan', 'age': 30, salary: 5000 },
{ 'name': 'lisi', 'age': 36, salary: 4000 },
{ 'name': 'wangwu', 'age': 32, salary: 6000 }
];
獲取所有員工姓名，并以”，“分割
var names = _.chain(employees)
.map(function (employee) { return employee.name;
})
.join(",")
.value(); console.log(names); // 輸出：zhangsan,lisi,wangwu
以上代碼，首先將employees對(duì)象包裝成為lodash對(duì)象，再map獲取所有用戶的名稱，并最后利用join將用戶名稱以”，“連接在一起。 獲取最年輕的員工
var o1 = _.chain(employees)
.sortBy("age")
.map(function (employee) { return employee;
})
.first()
.value(); console.log(o1); // 輸出：Object {name: "zhangsan", age: 30, salary: 5000}
獲取工資最多的員工
var o2 = _.chain(employees)
.orderBy("salary", "desc")
.map(function (employee) { return employee;
})
.first()
.value(); console.log(o2); // 輸出：Object {name: "wangwu", age: 32, salary: 6000}
獲取年齡等于36的員工
var o3 = _.chain(employees)
.filter(function (employee) { return employee.age = 36;
})
.map(function (employee) { return employee;
})
.first()
.value(); console.log(o3); // 輸出：Object {name: "lisi", age: 36, salary: 4000}
數(shù)組到Map的轉(zhuǎn)換
var hashmap = _.fromPairs(employees.map(function(employee) { return [employee.name, employee];
})); var o4 = hashmap ["wangwu"]; console.log(o4); // 輸出：Object {name: "wangwu", age: 36, salary: 6000}
其他 |
