摘要:談到函數式編程時,我們常提到機制方法,而不是核心原則。函數式編程不是關于和這些概念的,雖然它們確實很有用。從根本上來說,函數式編程就是關于如使用通用的可復用函數進行組合編程。我們一起用一些函數式編程的辦法重構這個函數吧。
原文作者:@VictorSavkin
原文地址:https://vsavkin.com/functiona...
中文翻譯:文藺
譯文地址:http://www.wemlion.com/2016/f...
本文由@文藺 翻譯,轉載請保留此聲明。著作權屬于原作者,請勿用作商業用途。
談到函數式編程時,我們常提到機制、方法,而不是核心原則。函數式編程不是關于 Monad、Monoid 和 Zipper 這些概念的,雖然它們確實很有用。從根本上來說,函數式編程就是關于如使用通用的可復用函數進行組合編程。本文是我在重構 TypeScript 代碼時使用函數式的一些思考的結果。
首先,我們需要用到以下幾項技術:
盡可能使用函數代替簡單值
數據轉換過程管道化
提取通用函數
來,開始吧!
假設我們有兩個類,Employee 和 Department。Employee 有 name 和 salary 屬性,Department 只是 Employee 的簡單集合。
class Employee { constructor(public name: string, public salary: number) {} } class Department { constructor(public employees: Employee[]) {} works(employee: Employee): boolean { return this.employees.indexOf(employee) > -1; } }
我們要重構的是 averageSalary 函數。
function averageSalary(employees: Employee[], minSalary: number, department?: Department): number { let total = 0; let count = 0; employees.forEach((e) => { if(minSalary <= e.salary && (department === undefined || department.works(e))){ total += e.salary; count += 1; } }); return total === 0 ? 0 : total / count; }
averageSalary 函數接收 employee 數組、最低薪資 minSalary 以及可選的 department 作為參數。如果傳了 department 參數,函數會計算該部門中所有員工的平均薪資;若不傳,則對全部員工進行計算。
該函數的使用方式如下:
describe("average salary", () => { const empls = [ new Employee("Jim", 100), new Employee("John", 200), new Employee("Liz", 120), new Employee("Penny", 30) ]; const sales = new Department([empls[0], empls[1]]); it("calculates the average salary", () => { expect(averageSalary(empls, 50, sales)).toEqual(150); expect(averageSalary(empls, 50)).toEqual(140); }); });
需求雖簡單粗暴,可就算不提代碼難以拓展,其混亂是顯而易見的。若新增條件,函數簽名及接口就不得不發生變動,if 語句也會也越來越臃腫可怕。
我們一起用一些函數式編程的辦法重構這個函數吧。
使用函數代替簡單值使用函數代替簡單值看起來似乎不太直觀,但這卻是整理歸納代碼的強大辦法。在我們的例子中,這樣做,意味著要將 minSalary 和 department 參數替換成兩個條件檢驗的函數。
type Predicate = (e: Employee) => boolean; function averageSalary(employees: Employee[], salaryCondition: Predicate, departmentCondition?: Predicate): number { let total = 0; let count = 0; employees.forEach((e) => { if(salaryCondition(e) && (departmentCondition === undefined || departmentCondition(e))){ total += e.salary; count += 1; } }); return total === 0 ? 0 : total / count; } // ... expect(averageSalary(empls, (e) => e.salary > 50, (e) => sales.works(e))).toEqual(150);
我們所做的就是將 salary、department 兩個條件接口統一起來。而此前這兩個條件是寫死的,現在它們被明確定義了,并且遵循一致的接口。這次整合允許我們將所有條件作為數組傳遞。
function averageSalary(employees: Employee[], conditions: Predicate[]): number { let total = 0; let count = 0; employees.forEach((e) => { if(conditions.every(c => c(e))){ total += e.salary; count += 1; } }); return (count === 0) ? 0 : total / count; } //... expect(averageSalary(empls, [(e) => e.salary > 50, (e) => sales.works(e)])).toEqual(150);
條件數組只不過是組合的條件,可以用一個簡單的組合器將它們放到一起,這樣看起來更加明晰。
function and(predicates: Predicate[]): Predicate { return (e) => predicates.every(p => p(e)); } function averageSalary(employees: Employee[], conditions: Predicate[]): number { let total = 0; let count = 0; employees.forEach((e) => { if(and(conditions)(e)){ total += e.salary; count += 1; } }); return (count == 0) ? 0 : total / count; }
值得注意的是,“and” 組合器是通用的,可以復用并且還可能拓展為庫。
提起結果
現在,averageSalary 函數已健壯得多了。我們可以加入新條件,無需破壞函數接口或改變函數實現。
數據轉換過程管道化函數式編程的另外一個很有用的實踐是將所有數據轉換過程變成管道。在本例中,就是將 filter 過程提取到循環外面。
function averageSalary(employees: Employee[], conditions: Predicate[]): number { const filtered = employees.filter(and(conditions)); let total = 0 let count = 0 filtered.forEach((e) => { total += e.salary; count += 1; }); return (count == 0) ? 0 : total / count; }
這樣一來計數的 count 就沒什么用了。
function averageSalary(employees: Employee[], conditions: Predicate[]): number{ const filtered = employees.filter(and(conditions)); let total = 0 filtered.forEach((e) => { total += e.salary; }); return (filtered.length == 0) ? 0 : total / filtered.length; }
接下來,如在疊加之前將 salary 摘取出來,求和過程就變成簡單的 reduce 了。
function averageSalary(employees: Employee[], conditions: Predicate[]): number { const filtered = employees.filter(and(conditions)); const salaries = filtered.map(e => e.salary); const total = salaries.reduce((a,b) => a + b, 0); return (salaries.length == 0) ? 0 : total / salaries.length; }提取通用函數
接著我們發現,最后兩行代碼和當前域完全沒什么關系。其中不包含任何與員工、部門相關的信息。僅僅只是一個計算平均數的函數。所以也將其提取出來。
function average(nums: number[]): number { const total = nums.reduce((a,b) => a + b, 0); return (nums.length == 0) ? 0 : total / nums.length; } function averageSalary(employees: Employee[], conditions: Predicate[]): number { const filtered = employees.filter(and(conditions)); const salaries = filtered.map(e => e.salary); return average(salaries); }
又一次,提取出的函數是完全通用的。
最后,將所有 salary 部分提出來之后,我們得到終極方案。
function employeeSalaries(employees: Employee[], conditions: Predicate[]): number[] { const filtered = employees.filter(and(conditions)); return filtered.map(e => e.salary); } function averageSalary(employees: Employee[], conditions: Predicate[]): number { return average(employeeSalaries(employees, conditions)); }
對比原始方案和終極方案,我敢說,毫無疑問,后者更棒。首先,它更通用(我們可以不破壞函數接口的情況下添加新類型的判斷條件)。其次,我們從可變狀態(mutable state)和 if 語句中解脫出來,這使代碼更容易閱讀、理解。
何時收手函數式風格的編程中,我們會編寫許多小型函數,它們接收一個集合,返回新的集合。這些函數能夠以不同方式組合、復用 —— 棒極了。不過,這種風格的一個缺點是代碼可能會變得過度抽象,導致難以讀懂,那些函數組合在一起到底要干嘛?
我喜歡使用樂高來類比:樂高積木能夠以不同形式放在一起 —— 它們是可組合的。但注意,并不是所有積木都是一小塊。所以,在使用本文所述技巧進行代碼重構時,千萬別妄圖將一切都變成接收數組、返回數組的函數。誠然,這樣一些函數組合使用極度容易,可它們也會顯著降低我們對程序的理解能力。
小結本文展示了如何使用函數式思維重構 TypeScript 代碼。我所遵循的是以下幾點規則:
盡可能使用函數代替簡單值
數據轉換過程管道化
提取通用函數
了解更多強烈推薦以下兩本書:
“JavaScript Allonge” by Reginald Braithwaite
“Functional JavaScript” by Michael Fogus
關注 @victorsavkin 獲得更多關于 Angular 和 TypeScript 的知識。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80536.html
摘要:感謝來自團隊的發起的,以及核心團隊成員和的改進和審查。在中,我們已經發布了一個與環境無關的版本,可以在瀏覽器或純引擎中使用。同樣,我們建議你查看完整的發布說明從而了解其他的改進,包括,,,等。 原文:Vue 2.5 released 譯者:neal1991 welcome to star my articles-translator , providing you advanced ...
摘要:在這篇文章中,我將告訴你如何用編寫自定義指令。中的自定義指令讓我們來創建一個只為任何的塊,小部件或者人名在右邊添加標題,子標題和文本的指令。另外,設置了指令的使用級別給元素和屬性,分別使用和表示。 原文鏈接 : How to write custom AngularJS Directive using TypeScript?原文作者 : Siddharth Pandey譯者 : 李林璞...
摘要:致力于為應用提供一個類型安全表達力強可組合的狀態管理方案。是一組的命名空間。是內置組件的鏡像,但允許組件的額外接受類型的數據。這次內容更新,是由組件處理的。這些小的組件不必知道所有的應用狀態數據。這是因為大部分對的研究來自于。 Focal Focal 致力于為 React 應用提供一個類型安全、表達力強、可組合的狀態管理方案。 用一個不可變的 (immutable) 、響應式的 (o...
摘要:原文是一門編譯到的強類型靜態類型語言它的功能受到的激發并且使用編寫其目標是編譯到同時保持清潔跟可讀而且根據作者所說具備跟其他編譯到的語言相互操作的能力繼承了當中一些突出的功能其中有類型推斷允許在任何可能的地方減少類型聲明的書寫一種類型構 原文: http://www.infoq.com/news/2014/09/purescript-haskell-javascript PureS...
摘要:在這篇文章里,我將介紹如何使用去編寫的。一個新的子將被創建并作為變量注入到的構造函數當中。當使用一個構造函數就可以很好地解決問題,因為函數提升起到了很重要的作用。自定義接口類型接著就可以在構造器使用參數獲得強類型和智能支持了。 原文鏈接 : How to write AngularJS controller using TypeScript?原文作者 : Siddharth Pande...
閱讀 2628·2021-11-23 09:51
閱讀 2418·2021-09-30 09:48
閱讀 2044·2021-09-22 15:24
閱讀 1009·2021-09-06 15:02
閱讀 3303·2021-08-17 10:14
閱讀 1934·2021-07-30 18:50
閱讀 1980·2019-08-30 15:53
閱讀 3168·2019-08-29 18:43