如何寫出小而清晰的函數(shù)?(JS 版)
本文以 JavaScript 為例,介紹了該如何優(yōu)化函數(shù),使函數(shù)清晰易讀,且更加高效穩(wěn)定。
軟件的復(fù)雜度一直在持續(xù)增長。代碼質(zhì)量對(duì)于保證應(yīng)用的可靠性、易擴(kuò)展性非常重要。
然而,幾乎每一個(gè)開發(fā)者,包括我自己,在職業(yè)生涯中都見過低質(zhì)量的代碼。這東西就是個(gè)坑。低質(zhì)量代碼具備以下***殺傷力的特點(diǎn):
- 函數(shù)超級(jí)長,而且塞滿了各種亂七八糟的功能。
- 函數(shù)通常有一些副作用,不僅難以理解,甚至根本沒法調(diào)試。
- 含糊的函數(shù)、變量命名。
- 脆弱的代碼:一個(gè)小的變更,就有可能出乎意料的破壞其他應(yīng)用組件。
- 代碼覆蓋率缺失。
它們聽起來基本都是:“我根本沒法理解這段代碼是如何工作的”,“這段代碼就是一堆亂麻”,“要修改這一段代碼實(shí)在太難了” 等等。
我就曾遇到過這樣的情況,我的一個(gè)同事由于無法繼續(xù)將一個(gè)基于Ruby 的 REST API 做下去,繼而離職。這個(gè)項(xiàng)目是他從之前的開發(fā)團(tuán)隊(duì)接手的。
修復(fù)現(xiàn)有的 bug ,然后引入了新的 bug,添加新的特性,就增加了一連串新 bug,如此循環(huán)(所謂的脆弱代碼)。客戶不希望以更好的設(shè)計(jì)重構(gòu)整個(gè)應(yīng)用,開發(fā)人員也做出明智的選擇——維持現(xiàn)狀。
好吧,這種事兒經(jīng)常發(fā)生,而且挺糟糕的。那我們能做點(diǎn)什么呢?
首先,需要謹(jǐn)記于心:只是讓應(yīng)用運(yùn)轉(zhuǎn)起來,和盡心保證代碼質(zhì)量是兩個(gè)完全不同的事。一方面,你需要實(shí)現(xiàn)產(chǎn)品需求。但是另一方面,你應(yīng)該花點(diǎn)時(shí)間,確保函數(shù)功能簡單、使用易讀的變量和函數(shù)命名,避免函數(shù)的副作用等等。
函數(shù)(包括對(duì)象方法)是讓應(yīng)用運(yùn)轉(zhuǎn)起來的齒輪。首先你應(yīng)當(dāng)將注意力集中在他們的結(jié)構(gòu)和整體布局上。這篇文章包括了一些非常好的示例,展示如何編寫清晰、易于理解和測試的函數(shù)。
1. 函數(shù)應(yīng)當(dāng)很小,非常小
避免使用包含大量的功能的大函數(shù),應(yīng)當(dāng)將其功能分割為若干較小的函數(shù)。大的黑盒函數(shù)難于理解、修改,特別是很難測試。
假設(shè)這樣一個(gè)場景,需要實(shí)現(xiàn)一個(gè)函數(shù),用于計(jì)算 array、map 或 普通 JavaScript 對(duì)象的權(quán)重??倷?quán)重可通過計(jì)算各成員權(quán)重獲得:
- null 或者 未定義變量計(jì) 1 點(diǎn)。
- 基本類型計(jì) 2 點(diǎn)。
- 對(duì)象或函數(shù)計(jì) 4 點(diǎn)。
例如,數(shù)組 [null, ‘Hello World’, {}] 的權(quán)重這樣計(jì)算:1(null) + 2(string 是基本類型) + 4(對(duì)象) = 7。
Step 0: 最初的大函數(shù)
我們從最糟的實(shí)例開始。所有的邏輯都被編碼在函數(shù) getCollectionWeight() 中:
- function getCollectionWeight(collection) {
- let collectionValues;
- if (collection instanceof Array) {
- collectionValues = collection;
- } else if (collection instanceof Map) {
- collectionValues = [...collection.values()];
- } else {
- collectionValues = Object.keys(collection).map(function (key) {
- return collection[key];
- });
- }
- return collectionValues.reduce(function(sum, item) {
- if (item == null) {
- return sum + 1;
- }
- if (typeof item === 'object' || typeof item === 'function') {
- return sum + 4;
- }
- return sum + 2;
- }, 0);
- }
- let myArray = [null, { }, 15];
- let myMap = new Map([ ['functionKey', function() {}] ]);
- let myObject = { 'stringKey': 'Hello world' };
- getCollectionWeight(myArray); // => 7 (1 + 4 + 2)
- getCollectionWeight(myMap); // => 4
- getCollectionWeight(myObject); // => 2
問題顯而易見,getCollectionWeight() 函數(shù)超級(jí)長,而且看起來像一個(gè)裝滿“意外”的黑盒子??赡苣阋舶l(fā)現(xiàn)了,***眼根本就搞不明白它要干什么。再試想一下,應(yīng)用里有大把這樣的函數(shù)。
在工作中遇到這樣的代碼,就是在浪費(fèi)你的時(shí)間和精力。反之,高質(zhì)量的代碼不會(huì)令人不適。高質(zhì)量代碼中,那些精巧、自文檔極好的函數(shù)非常易于閱讀和理解。
Step 1:根據(jù)類型計(jì)算權(quán)重,拋棄那些“迷之?dāng)?shù)字”。
現(xiàn)在,我們的目標(biāo)是:把這個(gè)巨型函數(shù),拆分為較小的、獨(dú)立的、可重用的一組函數(shù)。***步,將根據(jù)類型計(jì)算權(quán)重的代碼提取出來。這個(gè)新的函數(shù)命名為 getWeight()。
我們?cè)倏纯催@幾個(gè)“迷之?dāng)?shù)字”: 1, 2, 4。在不知道整個(gè)故事背景的前提下,僅靠這幾個(gè)數(shù)字提供不了任何有用的信息。幸好 ES2015 允許定義靜態(tài)只讀引用,那你就能簡單的創(chuàng)造幾個(gè)常量,用有意義的名稱,替換掉那幾個(gè)“迷之?dāng)?shù)字”。(我特別喜歡“迷之?dāng)?shù)字”這個(gè)說法:D)
我們來新建一個(gè)較小的函數(shù) getWeightByType(),并用它來改進(jìn) getCollectionWeight():
- // Code extracted into getWeightByType()
- function getWeightByType(value) {
- const WEIGHT_NULL_UNDEFINED = 1;
- const WEIGHT_PRIMITIVE = 2;
- const WEIGHT_OBJECT_FUNCTION = 4;
- if (value == null) {
- return WEIGHT_NULL_UNDEFINED;
- }
- if (typeof value === 'object' || typeof value === 'function') {
- return WEIGHT_OBJECT_FUNCTION;
- }
- return WEIGHT_PRIMITIVE;
- }
- function getCollectionWeight(collection) {
- let collectionValues;
- if (collection instanceof Array) {
- collectionValues = collection;
- } else if (collection instanceof Map) {
- collectionValues = [...collection.values()];
- } else {
- collectionValues = Object.keys(collection).map(function (key) {
- return collection[key];
- });
- }
- return collectionValues.reduce(function(sum, item) {
- return sum + getWeightByType(item);
- }, 0);
- }
- let myArray = [null, { }, 15];
- let myMap = new Map([ ['functionKey', function() {}] ]);
- let myObject = { 'stringKey': 'Hello world' };
- getCollectionWeight(myArray); // => 7 (1 + 4 + 2)
- getCollectionWeight(myMap); // => 4
- getCollectionWeight(myObject); // => 2
看起來好多了,對(duì)吧? getWeightByType() 函數(shù)是一個(gè)獨(dú)立的組件,僅僅用于決定各類型的權(quán)重值。而且它是可復(fù)用的,你可以在其他任何函數(shù)中使用它。
getCollectionWeight() 稍微瘦了點(diǎn)身。
WEIGHT_NULL_UNDEFINED, WEIGHT_PRIMITIVE 還有 WEIGHT_OBJECT_FUNCTION 都是具備自文檔能力的常量,通過它們的名字就可以看出各類型的權(quán)重。你就不需要猜測 1、2、4 這些數(shù)字的意義。
Step 2: 繼續(xù)切分,使之具備擴(kuò)展性
然而,這個(gè)升級(jí)版依然有不足的地方。假如你打算對(duì)一個(gè) Set,甚至其他用戶自定義集合來實(shí)現(xiàn)權(quán)值計(jì)算。getCollectionWeight() 會(huì)快速膨脹,因?yàn)樗艘唤M獲得權(quán)值的具體邏輯。
讓我們將獲得 maps 權(quán)重的代碼提取到 getMapValues(),將獲得基本 JavaScript 對(duì)象權(quán)值的代碼則放到 getPlainObjectValues() 中??纯锤倪M(jìn)后的版本吧。
- function getWeightByType(value) {
- const WEIGHT_NULL_UNDEFINED = 1;
- const WEIGHT_PRIMITIVE = 2;
- const WEIGHT_OBJECT_FUNCTION = 4;
- if (value == null) {
- return WEIGHT_NULL_UNDEFINED;
- }
- if (typeof value === 'object' || typeof value === 'function') {
- return WEIGHT_OBJECT_FUNCTION;
- }
- return WEIGHT_PRIMITIVE;
- }
- // Code extracted into getMapValues()
- function getMapValues(map) {
- return [...map.values()];
- }
- // Code extracted into getPlainObjectValues()
- function getPlainObjectValues(object) {
- return Object.keys(object).map(function (key) {
- return object[key];
- });
- }
- function getCollectionWeight(collection) {
- let collectionValues;
- if (collection instanceof Array) {
- collectionValues = collection;
- } else if (collection instanceof Map) {
- collectionValues = getMapValues(collection);
- } else {
- collectionValues = getPlainObjectValues(collection);
- }
- return collectionValues.reduce(function(sum, item) {
- return sum + getWeightByType(item);
- }, 0);
- }
- let myArray = [null, { }, 15];
- let myMap = new Map([ ['functionKey', function() {}] ]);
- let myObject = { 'stringKey': 'Hello world' };
- getCollectionWeight(myArray); // => 7 (1 + 4 + 2)
- getCollectionWeight(myMap); // => 4
- getCollectionWeight(myObject); // => 2
現(xiàn)在再來看 getCollectionWeight() 函數(shù),你會(huì)發(fā)現(xiàn)已經(jīng)比較容易明白它的機(jī)理,看起來就像一段有趣的故事。
每一個(gè)函數(shù)的簡單明了。你不需要花費(fèi)時(shí)間去挖掘代碼,理解代碼的工作。這就是清新版代碼該有的樣子。
Step 3: 優(yōu)化永無止境
就算到了現(xiàn)在這種程度,依然有很大優(yōu)化的空間!
你可以創(chuàng)建一個(gè)獨(dú)立的函數(shù) getCollectionValues(),使用 if/else 語句區(qū)分集合中的類型:
- function getCollectionValues(collection) {
- if (collection instanceof Array) {
- return collection;
- }
- if (collection instanceof Map) {
- return getMapValues(collection);
- }
- return getPlainObjectValues(collection);
- }
那么, getCollectionWeight() 應(yīng)該會(huì)變得異常純粹,因?yàn)樗ㄒ坏墓ぷ鳎河?getCollectionValues() 獲得集合中的值,然后依次調(diào)用求和累加器。
你也可以創(chuàng)建一個(gè)獨(dú)立的累加器函數(shù):
- function reduceWeightSum(sum, item) {
- return sum + getWeightByType(item);
- }
理想情況下 getCollectionWeight() 函數(shù)中不應(yīng)該定義函數(shù)。
***,最初的巨型函數(shù),已經(jīng)被轉(zhuǎn)換為如下一組小函數(shù):
除了這些代碼質(zhì)量上的優(yōu)化之外,你也得到不少其他的好處:
- 通過代碼自文檔,getCollectionWeight() 函數(shù)的可讀性得到很大提升。
- getCollectionWeight() 函數(shù)的長度大幅減少。
- 如果你打算計(jì)算其他類型的權(quán)重值,getCollectionWeight() 的代碼不會(huì)再劇烈膨脹了。
- 這些拆分出來的函數(shù)都是低耦合、高可復(fù)用的組件,你的同事可能希望將他們導(dǎo)入其他項(xiàng)目中,而你可以輕而易舉的實(shí)現(xiàn)這個(gè)要求。
- 當(dāng)函數(shù)偶發(fā)錯(cuò)誤的時(shí)候,調(diào)用棧會(huì)更加詳細(xì),因?yàn)闂V邪瘮?shù)的名稱,甚至你可以立馬發(fā)現(xiàn)出錯(cuò)的函數(shù)。
- 這些小函數(shù)更簡單、易測試,可以達(dá)到很高的代碼覆蓋率。與其窮盡各種場景來測試一個(gè)大函數(shù),你可以進(jìn)行結(jié)構(gòu)化測試,分別測試每一個(gè)小函數(shù)。
- 你可以參照 CommonJS 或 ES2015 模塊格式,將拆分出的函數(shù)創(chuàng)建為獨(dú)立的模塊。這將使得你的項(xiàng)目文件更輕、更結(jié)構(gòu)化。
這些建議可以幫助你,戰(zhàn)勝應(yīng)用的復(fù)雜性。
原則上,你的函數(shù)不應(yīng)當(dāng)超過 20 行——越小越好。
現(xiàn)在,我覺得你可能會(huì)問我這樣的問題:“我可不想將每一行代碼都寫為函數(shù)。有沒有什么準(zhǔn)則,告訴我何時(shí)應(yīng)當(dāng)停止拆分?”。這就是接下來的議題了。
2. 函數(shù)應(yīng)當(dāng)是簡單的
讓我們稍微放松一下,思考下應(yīng)用的定義到底是什么?
每一個(gè)應(yīng)用都需要實(shí)現(xiàn)一系列需求。開發(fā)人員的準(zhǔn)則在于,將這些需求拆分為一些列較小的可執(zhí)行組件(命名空間、類、函數(shù)、代碼塊等),分別完成指定的工作。
一個(gè)組件又由其他更小的組件構(gòu)成。如果你希望編寫一個(gè)組件,你只能從抽象層中低一級(jí)的組件中,選取需要的組件用于創(chuàng)建自己的組件。
換言之,你需要將一個(gè)函數(shù)分解為若干較小的步驟,并且保證這些步驟都在抽象上,處于同一級(jí)別,而且只向下抽象一級(jí)。這非常重要,因?yàn)檫@將使得函數(shù)變得簡單,做到“做且只做好一件事”。
為什么這是必要的?因?yàn)楹唵蔚暮瘮?shù)非常清晰。清晰就意味著易于理解和修改。
我們來舉個(gè)例子。假設(shè)你需要實(shí)現(xiàn)一個(gè)函數(shù),使數(shù)組僅保留素?cái)?shù)(2, 3, 5, 7, 11 等等),移除非素?cái)?shù)(1, 4, 6, 8 等等)。函數(shù)的調(diào)用方式如下:
- getOnlyPrime([2, 3, 4, 5, 6, 8, 11]); // => [2, 3, 5, 11]
如何用低一級(jí)抽象的若干步驟實(shí)現(xiàn) getOnlyPrime() 函數(shù)呢?我們這樣做:
為了實(shí)現(xiàn) getOnlyPrime() 函數(shù), 我們用 isPrime() 函數(shù)來過濾數(shù)組中的數(shù)字。
非常簡單,只需要對(duì)數(shù)字?jǐn)?shù)組執(zhí)行一個(gè)過濾函數(shù) isPrime() 即可。
你需要在當(dāng)前抽象層實(shí)現(xiàn) isPrime() 的細(xì)節(jié)嗎?不,因?yàn)?getOnlyPrime() 函數(shù)會(huì)在不同的抽象層實(shí)現(xiàn)一些列步驟。否則,getOnlyPrime() 會(huì)包含過多的功能。
在頭腦中謹(jǐn)記簡單函數(shù)的理念,我們來實(shí)現(xiàn) getOnlyPrime() 函數(shù)的函數(shù)體:
- function getOnlyPrime(numbers) {
- return numbers.filter(isPrime);
- }
- getOnlyPrime([2, 3, 4, 5, 6, 8, 11]); // => [2, 3, 5, 11]
如你所見, getOnlyPrime() 非常簡單,它僅僅包含低一級(jí)抽象層的步驟:數(shù)組的 .filter() 方法和 isPrime() 函數(shù)。
現(xiàn)在該進(jìn)入下一級(jí)抽象。
數(shù)組的 .filter() 方法由 JavaScript 引擎提供,我們直接使用即可。當(dāng)然,標(biāo)準(zhǔn)已經(jīng)準(zhǔn)確描述了它的行為。
現(xiàn)在你可以深入如何實(shí)現(xiàn) isPrime() 的細(xì)節(jié)中了:
為了實(shí)現(xiàn) isPrime() 函數(shù)檢查一個(gè)數(shù)字 n 是否為素?cái)?shù),只需要檢查 2 到 Math.sqrt(n) 之間的所有整數(shù)是否均不能整除n。
有了這個(gè)算法(不算高效,但是為了簡單起見,就用這個(gè)吧),我們來為 isPrime() 函數(shù)編碼:
- function isPrime(number) {
- if (number === 3 || number === 2) {
- return true;
- }
- if (number === 1) {
- return false;
- }
- for (let divisor = 2; divisor <= Math.sqrt(number); divisor++) {
- if (number % divisor === 0) {
- return false;
- }
- }
- return true;
- }
- function getOnlyPrime(numbers) {
- return numbers.filter(isPrime);
- }
- getOnlyPrime([2, 3, 4, 5, 6, 8, 11]); // => [2, 3, 5, 11]
getOnlyPrime() 很小也很清晰。它只從更低一級(jí)抽象中獲得必要的一組步驟。
只要你按照這些規(guī)則,將函數(shù)變的簡潔清晰,復(fù)雜函數(shù)的可讀性將得到很大提升。將代碼進(jìn)行精確的抽象分級(jí),可以避免出現(xiàn)大塊的、難以維護(hù)的代碼。
3. 使用簡練的函數(shù)名稱
函數(shù)名稱應(yīng)該非常簡練:長短適中。理想情況下,名稱應(yīng)當(dāng)清楚的概括函數(shù)的功用,而不需要讀者深入了解函數(shù)的實(shí)現(xiàn)細(xì)節(jié)。
對(duì)于使用駱駝風(fēng)格的函數(shù)名稱,以小寫字母開始: addItem(),saveToStore() 或者 getFirstName() 之類。
由于函數(shù)都是某種操作,因此名稱中至少應(yīng)當(dāng)包含一個(gè)動(dòng)詞。例如 deletePage(),verifyCredentials()。需要 get 或 set 屬性的時(shí)候,請(qǐng)使用 標(biāo)準(zhǔn)的 set 和 get 前綴:getLastName() 或 setLastName()。
避免在生產(chǎn)代碼中出現(xiàn)有誤導(dǎo)性的名稱,例如 foo(),bar(),a(),fun() 等等。這樣的名稱沒有任何意義。
如果函數(shù)都短小清晰,命名簡練:代碼讀起來就會(huì)像詩一樣迷人。
4. 總結(jié)
當(dāng)然了,這里假定的例子都非常簡單?,F(xiàn)實(shí)中的代碼更加復(fù)雜。你可能要抱怨,編寫清晰的函數(shù),只在抽象上一級(jí)一級(jí)下降,實(shí)在太沒勁了。但是如果從項(xiàng)目一開始就開始你的實(shí)踐,就遠(yuǎn)沒有想象中復(fù)雜。
如果應(yīng)用中已經(jīng)存在一些功能繁雜的函數(shù),希望對(duì)它們進(jìn)行重構(gòu),你可能會(huì)發(fā)現(xiàn)困難重重。而且在很多情況下,在合理的時(shí)間內(nèi)是不可能完成的。但千里之行始于足下:在力所能及的前提下,先拆分一部分出來。
當(dāng)然,最正確的解決方案應(yīng)該是,從項(xiàng)目一開始就以正確的方式實(shí)現(xiàn)應(yīng)用。除了花一些時(shí)間在實(shí)現(xiàn)上,也應(yīng)該花一些精力在組建合理的函數(shù)結(jié)構(gòu)上:如我們所建議的——讓它們保持短小、清晰。
成竹在胸,落筆有神.
ES2015 實(shí)現(xiàn)了一個(gè)非常棒的模塊系統(tǒng),它明確建議,小函數(shù)是優(yōu)秀的工程實(shí)踐。
記住,干凈、組織良好的代碼通常需要投入大量時(shí)間。你會(huì)發(fā)現(xiàn)這做起來有難度??赡苄枰芏鄧L試,可能會(huì)迭代、修改一個(gè)函數(shù)很多次。
然而,沒有什么比亂麻一樣的代碼更讓人痛心的了,那么這一切都是值得的!