偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

如何寫出小而清晰的函數(shù)？（JS 版）

作者：伯樂在線
開發(fā) 前端
本文以 JavaScript 為例，介紹了該如何優(yōu)化函數(shù)，使函數(shù)清晰易讀，且更加高效穩(wěn)定。軟件的復雜度一直在持續(xù)增長。代碼質(zhì)量對于保證應用的可靠性、易擴展性非常重要。

本文以 JavaScript 為例，介紹了該如何優(yōu)化函數(shù)，使函數(shù)清晰易讀，且更加高效穩(wěn)定。

軟件的復雜度一直在持續(xù)增長。代碼質(zhì)量對于保證應用的可靠性、易擴展性非常重要。

然而，幾乎每一個開發(fā)者，包括我自己，在職業(yè)生涯中都見過低質(zhì)量的代碼。這東西就是個坑。低質(zhì)量代碼具備以下***殺傷力的特點：

  • 函數(shù)超級長，而且塞滿了各種亂七八糟的功能。
  • 函數(shù)通常有一些副作用，不僅難以理解，甚至根本沒法調(diào)試。
  • 含糊的函數(shù)、變量命名。
  • 脆弱的代碼：一個小的變更，就有可能出乎意料的破壞其他應用組件。
  • 代碼覆蓋率缺失。

它們聽起來基本都是：“我根本沒法理解這段代碼是如何工作的”，“這段代碼就是一堆亂麻”，“要修改這一段代碼實在太難了” 等等。

我就曾遇到過這樣的情況，我的一個同事由于無法繼續(xù)將一個基于Ruby 的 REST API 做下去，繼而離職。這個項目是他從之前的開發(fā)團隊接手的。

修復現(xiàn)有的 bug ，然后引入了新的 bug，添加新的特性，就增加了一連串新 bug，如此循環(huán)(所謂的脆弱代碼)。客戶不希望以更好的設(shè)計重構(gòu)整個應用，開發(fā)人員也做出明智的選擇——維持現(xiàn)狀。

[[199642]] 

好吧，這種事兒經(jīng)常發(fā)生，而且挺糟糕的。那我們能做點什么呢?

首先，需要謹記于心：只是讓應用運轉(zhuǎn)起來，和盡心保證代碼質(zhì)量是兩個完全不同的事。一方面，你需要實現(xiàn)產(chǎn)品需求。但是另一方面，你應該花點時間，確保函數(shù)功能簡單、使用易讀的變量和函數(shù)命名，避免函數(shù)的副作用等等。

函數(shù)(包括對象方法)是讓應用運轉(zhuǎn)起來的齒輪。首先你應當將注意力集中在他們的結(jié)構(gòu)和整體布局上。這篇文章包括了一些非常好的示例，展示如何編寫清晰、易于理解和測試的函數(shù)。

1. 函數(shù)應當很小，非常小

避免使用包含大量的功能的大函數(shù)，應當將其功能分割為若干較小的函數(shù)。大的黑盒函數(shù)難于理解、修改，特別是很難測試。

假設(shè)這樣一個場景，需要實現(xiàn)一個函數(shù)，用于計算 array、map 或 普通 JavaScript 對象的權(quán)重?？倷?quán)重可通過計算各成員權(quán)重獲得：

  • null 或者 未定義變量計 1 點。
  • 基本類型計 2 點。
  • 對象或函數(shù)計 4 點。

例如，數(shù)組 [null, ‘Hello World’, {}] 的權(quán)重這樣計算：1(null) + 2(string 是基本類型) + 4(對象) = 7。

Step 0: 最初的大函數(shù)

我們從最糟的實例開始。所有的邏輯都被編碼在函數(shù) getCollectionWeight() 中:

  1. function getCollectionWeight(collection) {   
  2.  
  3.   let collectionValues; 
  4.  
  5.   if (collection instanceof Array) { 
  6.  
  7.     collectionValues = collection; 
  8.  
  9.   } else if (collection instanceof Map) { 
  10.  
  11.     collectionValues = [...collection.values()]; 
  12.  
  13.   } else { 
  14.  
  15.     collectionValues = Object.keys(collection).map(function (key) { 
  16.  
  17.       return collection[key]; 
  18.  
  19.     }); 
  20.  
  21.   } 
  22.  
  23.   return collectionValues.reduce(function(sum, item) { 
  24.  
  25.     if (item == null) { 
  26.  
  27.       return sum + 1; 
  28.  
  29.     } 
  30.  
  31.     if (typeof item === 'object' || typeof item === 'function') { 
  32.  
  33.       return sum + 4; 
  34.  
  35.     } 
  36.  
  37.     return sum + 2; 
  38.  
  39.   }, 0); 
  40.  
  41. } 
  42.  
  43. let myArray = [null, { }, 15];   
  44.  
  45. let myMap = new Map([ ['functionKey', function() {}] ]);   
  46.  
  47. let myObject = { 'stringKey': 'Hello world' };   
  48.  
  49. getCollectionWeight(myArray);  // => 7 (1 + 4 + 2)   
  50.  
  51. getCollectionWeight(myMap);    // => 4   
  52.  
  53. getCollectionWeight(myObject); // => 2  

問題顯而易見，getCollectionWeight() 函數(shù)超級長，而且看起來像一個裝滿“意外”的黑盒子。可能你也發(fā)現(xiàn)了，***眼根本就搞不明白它要干什么。再試想一下，應用里有大把這樣的函數(shù)。

在工作中遇到這樣的代碼，就是在浪費你的時間和精力。反之，高質(zhì)量的代碼不會令人不適。高質(zhì)量代碼中，那些精巧、自文檔極好的函數(shù)非常易于閱讀和理解。

[[199643]] 

Step 1：根據(jù)類型計算權(quán)重，拋棄那些“迷之數(shù)字”。

現(xiàn)在，我們的目標是：把這個巨型函數(shù)，拆分為較小的、獨立的、可重用的一組函數(shù)。***步，將根據(jù)類型計算權(quán)重的代碼提取出來。這個新的函數(shù)命名為 getWeight()。

我們再看看這幾個“迷之數(shù)字”: 1, 2, 4。在不知道整個故事背景的前提下，僅靠這幾個數(shù)字提供不了任何有用的信息。幸好 ES2015 允許定義靜態(tài)只讀引用，那你就能簡單的創(chuàng)造幾個常量，用有意義的名稱，替換掉那幾個“迷之數(shù)字”。(我特別喜歡“迷之數(shù)字”這個說法：D)

我們來新建一個較小的函數(shù) getWeightByType()，并用它來改進 getCollectionWeight()：

  1. // Code extracted into getWeightByType() 
  2.  
  3. function getWeightByType(value) {   
  4.  
  5.   const WEIGHT_NULL_UNDEFINED  = 1; 
  6.  
  7.   const WEIGHT_PRIMITIVE       = 2; 
  8.  
  9.   const WEIGHT_OBJECT_FUNCTION = 4; 
  10.  
  11.   if (value == null) { 
  12.  
  13.     return WEIGHT_NULL_UNDEFINED; 
  14.  
  15.   } 
  16.  
  17.   if (typeof value === 'object' || typeof value === 'function') { 
  18.  
  19.     return WEIGHT_OBJECT_FUNCTION; 
  20.  
  21.   } 
  22.  
  23.   return WEIGHT_PRIMITIVE; 
  24.  
  25. } 
  26.  
  27. function getCollectionWeight(collection) {   
  28.  
  29.   let collectionValues; 
  30.  
  31.   if (collection instanceof Array) { 
  32.  
  33.     collectionValues = collection; 
  34.  
  35.   } else if (collection instanceof Map) { 
  36.  
  37.     collectionValues = [...collection.values()]; 
  38.  
  39.   } else { 
  40.  
  41.     collectionValues = Object.keys(collection).map(function (key) { 
  42.  
  43.       return collection[key]; 
  44.  
  45.     }); 
  46.  
  47.   } 
  48.  
  49.   return collectionValues.reduce(function(sum, item) { 
  50.  
  51.     return sum + getWeightByType(item); 
  52.  
  53.   }, 0); 
  54.  
  55. } 
  56.  
  57. let myArray = [null, { }, 15];   
  58.  
  59. let myMap = new Map([ ['functionKey', function() {}] ]);   
  60.  
  61. let myObject = { 'stringKey': 'Hello world' };   
  62.  
  63. getCollectionWeight(myArray);  // => 7 (1 + 4 + 2)   
  64.  
  65. getCollectionWeight(myMap);    // => 4   
  66.  
  67. getCollectionWeight(myObject); // => 2  

看起來好多了，對吧? getWeightByType() 函數(shù)是一個獨立的組件，僅僅用于決定各類型的權(quán)重值。而且它是可復用的，你可以在其他任何函數(shù)中使用它。

getCollectionWeight() 稍微瘦了點身。

WEIGHT_NULL_UNDEFINED, WEIGHT_PRIMITIVE 還有 WEIGHT_OBJECT_FUNCTION 都是具備自文檔能力的常量，通過它們的名字就可以看出各類型的權(quán)重。你就不需要猜測 1、2、4 這些數(shù)字的意義。

Step 2: 繼續(xù)切分，使之具備擴展性

然而，這個升級版依然有不足的地方。假如你打算對一個 Set，甚至其他用戶自定義集合來實現(xiàn)權(quán)值計算。getCollectionWeight() 會快速膨脹，因為它包含了一組獲得權(quán)值的具體邏輯。

讓我們將獲得 maps 權(quán)重的代碼提取到 getMapValues()，將獲得基本 JavaScript 對象權(quán)值的代碼則放到 getPlainObjectValues() 中?？纯锤倪M后的版本吧。

  1. function getWeightByType(value) {   
  2.  
  3.   const WEIGHT_NULL_UNDEFINED = 1; 
  4.  
  5.   const WEIGHT_PRIMITIVE = 2; 
  6.  
  7.   const WEIGHT_OBJECT_FUNCTION = 4; 
  8.  
  9.   if (value == null) { 
  10.  
  11.     return WEIGHT_NULL_UNDEFINED; 
  12.  
  13.   } 
  14.  
  15.   if (typeof value === 'object' || typeof value === 'function') { 
  16.  
  17.     return WEIGHT_OBJECT_FUNCTION; 
  18.  
  19.   } 
  20.  
  21.   return WEIGHT_PRIMITIVE; 
  22.  
  23. } 
  24.  
  25. // Code extracted into getMapValues() 
  26.  
  27. function getMapValues(map) {   
  28.  
  29.   return [...map.values()]; 
  30.  
  31. } 
  32.  
  33. // Code extracted into getPlainObjectValues() 
  34.  
  35. function getPlainObjectValues(object) {   
  36.  
  37.   return Object.keys(object).map(function (key) { 
  38.  
  39.     return object[key]; 
  40.  
  41.   }); 
  42.  
  43. } 
  44.  
  45. function getCollectionWeight(collection) {   
  46.  
  47.   let collectionValues; 
  48.  
  49.   if (collection instanceof Array) { 
  50.  
  51.     collectionValues = collection; 
  52.  
  53.   } else if (collection instanceof Map) { 
  54.  
  55.     collectionValues = getMapValues(collection); 
  56.  
  57.   } else { 
  58.  
  59.     collectionValues = getPlainObjectValues(collection); 
  60.  
  61.   } 
  62.  
  63.   return collectionValues.reduce(function(sum, item) { 
  64.  
  65.     return sum + getWeightByType(item); 
  66.  
  67.   }, 0); 
  68.  
  69. } 
  70.  
  71. let myArray = [null, { }, 15];   
  72.  
  73. let myMap = new Map([ ['functionKey', function() {}] ]);   
  74.  
  75. let myObject = { 'stringKey': 'Hello world' };   
  76.  
  77. getCollectionWeight(myArray);  // => 7 (1 + 4 + 2)   
  78.  
  79. getCollectionWeight(myMap);    // => 4   
  80.  
  81. getCollectionWeight(myObject); // => 2  

現(xiàn)在再來看 getCollectionWeight() 函數(shù)，你會發(fā)現(xiàn)已經(jīng)比較容易明白它的機理，看起來就像一段有趣的故事。

每一個函數(shù)的簡單明了。你不需要花費時間去挖掘代碼，理解代碼的工作。這就是清新版代碼該有的樣子。

Step 3: 優(yōu)化永無止境

就算到了現(xiàn)在這種程度，依然有很大優(yōu)化的空間!

你可以創(chuàng)建一個獨立的函數(shù) getCollectionValues()，使用 if/else 語句區(qū)分集合中的類型：

  1. function getCollectionValues(collection) {   
  2.  
  3.   if (collection instanceof Array) { 
  4.  
  5.     return collection; 
  6.  
  7.   } 
  8.  
  9.   if (collection instanceof Map) { 
  10.  
  11.     return getMapValues(collection); 
  12.  
  13.   } 
  14.  
  15.   return getPlainObjectValues(collection); 
  16.  
  17. } 

那么， getCollectionWeight() 應該會變得異常純粹，因為它唯一的工作：用 getCollectionValues() 獲得集合中的值，然后依次調(diào)用求和累加器。

你也可以創(chuàng)建一個獨立的累加器函數(shù)：

  1. function reduceWeightSum(sum, item) { 
  2.  
  3.   return sum + getWeightByType(item); 
  4.  
  5. }  

理想情況下 getCollectionWeight() 函數(shù)中不應該定義函數(shù)。

***，最初的巨型函數(shù)，已經(jīng)被轉(zhuǎn)換為如下一組小函數(shù)：

除了這些代碼質(zhì)量上的優(yōu)化之外，你也得到不少其他的好處：

  • 通過代碼自文檔，getCollectionWeight() 函數(shù)的可讀性得到很大提升。
  • getCollectionWeight() 函數(shù)的長度大幅減少。
  • 如果你打算計算其他類型的權(quán)重值，getCollectionWeight() 的代碼不會再劇烈膨脹了。
  • 這些拆分出來的函數(shù)都是低耦合、高可復用的組件，你的同事可能希望將他們導入其他項目中，而你可以輕而易舉的實現(xiàn)這個要求。
  • 當函數(shù)偶發(fā)錯誤的時候，調(diào)用棧會更加詳細，因為棧中包含函數(shù)的名稱，甚至你可以立馬發(fā)現(xiàn)出錯的函數(shù)。
  • 這些小函數(shù)更簡單、易測試，可以達到很高的代碼覆蓋率。與其窮盡各種場景來測試一個大函數(shù)，你可以進行結(jié)構(gòu)化測試，分別測試每一個小函數(shù)。
  • 你可以參照 CommonJS 或 ES2015 模塊格式，將拆分出的函數(shù)創(chuàng)建為獨立的模塊。這將使得你的項目文件更輕、更結(jié)構(gòu)化。

這些建議可以幫助你，戰(zhàn)勝應用的復雜性。

 

原則上，你的函數(shù)不應當超過 20 行——越小越好。

現(xiàn)在，我覺得你可能會問我這樣的問題：“我可不想將每一行代碼都寫為函數(shù)。有沒有什么準則，告訴我何時應當停止拆分?”。這就是接下來的議題了。

2. 函數(shù)應當是簡單的

讓我們稍微放松一下，思考下應用的定義到底是什么?

每一個應用都需要實現(xiàn)一系列需求。開發(fā)人員的準則在于，將這些需求拆分為一些列較小的可執(zhí)行組件(命名空間、類、函數(shù)、代碼塊等)，分別完成指定的工作。

一個組件又由其他更小的組件構(gòu)成。如果你希望編寫一個組件，你只能從抽象層中低一級的組件中，選取需要的組件用于創(chuàng)建自己的組件。

換言之，你需要將一個函數(shù)分解為若干較小的步驟，并且保證這些步驟都在抽象上，處于同一級別，而且只向下抽象一級。這非常重要，因為這將使得函數(shù)變得簡單，做到“做且只做好一件事”。

為什么這是必要的?因為簡單的函數(shù)非常清晰。清晰就意味著易于理解和修改。

我們來舉個例子。假設(shè)你需要實現(xiàn)一個函數(shù)，使數(shù)組僅保留素數(shù)(2, 3, 5, 7, 11 等等)，移除非素數(shù)(1, 4, 6, 8 等等)。函數(shù)的調(diào)用方式如下：

  1. getOnlyPrime([2, 3, 4, 5, 6, 8, 11]); // => [2, 3, 5, 11] 

如何用低一級抽象的若干步驟實現(xiàn) getOnlyPrime() 函數(shù)呢?我們這樣做：

為了實現(xiàn) getOnlyPrime() 函數(shù), 我們用 isPrime() 函數(shù)來過濾數(shù)組中的數(shù)字。

非常簡單，只需要對數(shù)字數(shù)組執(zhí)行一個過濾函數(shù) isPrime() 即可。

你需要在當前抽象層實現(xiàn) isPrime() 的細節(jié)嗎?不，因為 getOnlyPrime() 函數(shù)會在不同的抽象層實現(xiàn)一些列步驟。否則，getOnlyPrime() 會包含過多的功能。

在頭腦中謹記簡單函數(shù)的理念，我們來實現(xiàn) getOnlyPrime() 函數(shù)的函數(shù)體：

  1. function getOnlyPrime(numbers) { 
  2.  
  3.   return numbers.filter(isPrime); 
  4.  
  5. } 
  6.  
  7. getOnlyPrime([2, 3, 4, 5, 6, 8, 11]); // => [2, 3, 5, 11]  

如你所見， getOnlyPrime() 非常簡單，它僅僅包含低一級抽象層的步驟：數(shù)組的 .filter() 方法和 isPrime() 函數(shù)。

現(xiàn)在該進入下一級抽象。

數(shù)組的 .filter() 方法由 JavaScript 引擎提供，我們直接使用即可。當然，標準已經(jīng)準確描述了它的行為。

現(xiàn)在你可以深入如何實現(xiàn) isPrime() 的細節(jié)中了：

為了實現(xiàn) isPrime() 函數(shù)檢查一個數(shù)字 n 是否為素數(shù)，只需要檢查 2 到 Math.sqrt(n) 之間的所有整數(shù)是否均不能整除n。

有了這個算法(不算高效，但是為了簡單起見，就用這個吧)，我們來為 isPrime() 函數(shù)編碼：

  1. function isPrime(number) {   
  2.  
  3.   if (number === 3 || number === 2) { 
  4.  
  5.     return true; 
  6.  
  7.   } 
  8.  
  9.   if (number === 1) { 
  10.  
  11.     return false; 
  12.  
  13.   } 
  14.  
  15.   for (let divisor = 2; divisor <= Math.sqrt(number); divisor++) { 
  16.  
  17.     if (number % divisor === 0) { 
  18.  
  19.       return false; 
  20.  
  21.     } 
  22.  
  23.   } 
  24.  
  25.   return true; 
  26.  
  27. } 
  28.  
  29. function getOnlyPrime(numbers) {   
  30.  
  31.   return numbers.filter(isPrime); 
  32.  
  33. } 
  34.  
  35. getOnlyPrime([2, 3, 4, 5, 6, 8, 11]); // => [2, 3, 5, 11]  

getOnlyPrime() 很小也很清晰。它只從更低一級抽象中獲得必要的一組步驟。

只要你按照這些規(guī)則，將函數(shù)變的簡潔清晰，復雜函數(shù)的可讀性將得到很大提升。將代碼進行精確的抽象分級，可以避免出現(xiàn)大塊的、難以維護的代碼。

3. 使用簡練的函數(shù)名稱

函數(shù)名稱應該非常簡練：長短適中。理想情況下，名稱應當清楚的概括函數(shù)的功用，而不需要讀者深入了解函數(shù)的實現(xiàn)細節(jié)。

對于使用駱駝風格的函數(shù)名稱，以小寫字母開始： addItem()，saveToStore() 或者 getFirstName() 之類。

由于函數(shù)都是某種操作，因此名稱中至少應當包含一個動詞。例如 deletePage()，verifyCredentials()。需要 get 或 set 屬性的時候，請使用 標準的 set 和 get 前綴：getLastName() 或 setLastName()。

避免在生產(chǎn)代碼中出現(xiàn)有誤導性的名稱，例如 foo()，bar()，a()，fun() 等等。這樣的名稱沒有任何意義。

如果函數(shù)都短小清晰，命名簡練：代碼讀起來就會像詩一樣迷人。

4. 總結(jié)

當然了，這里假定的例子都非常簡單?，F(xiàn)實中的代碼更加復雜。你可能要抱怨，編寫清晰的函數(shù)，只在抽象上一級一級下降，實在太沒勁了。但是如果從項目一開始就開始你的實踐，就遠沒有想象中復雜。

如果應用中已經(jīng)存在一些功能繁雜的函數(shù)，希望對它們進行重構(gòu)，你可能會發(fā)現(xiàn)困難重重。而且在很多情況下，在合理的時間內(nèi)是不可能完成的。但千里之行始于足下：在力所能及的前提下，先拆分一部分出來。

當然，最正確的解決方案應該是，從項目一開始就以正確的方式實現(xiàn)應用。除了花一些時間在實現(xiàn)上，也應該花一些精力在組建合理的函數(shù)結(jié)構(gòu)上：如我們所建議的——讓它們保持短小、清晰。

成竹在胸，落筆有神.

[[199644]] 

ES2015 實現(xiàn)了一個非常棒的模塊系統(tǒng)，它明確建議，小函數(shù)是優(yōu)秀的工程實踐。

記住，干凈、組織良好的代碼通常需要投入大量時間。你會發(fā)現(xiàn)這做起來有難度。可能需要很多嘗試，可能會迭代、修改一個函數(shù)很多次。

然而，沒有什么比亂麻一樣的代碼更讓人痛心的了，那么這一切都是值得的! 

責任編輯：龐桂玉 來源： 前端大全
前端JavaScript 函數(shù)
相關(guān)推薦

2020-05-08 14:45:00

JS代碼變量

2020-05-14 09:15:52

設(shè)計模式SOLID 原則JS

2020-07-15 08:17:16

代碼

2020-05-11 15:23:58

CQRS代碼命令

2013-06-07 14:00:23

代碼維護

2021-09-01 08:55:20

JavaScript代碼開發(fā)

2016-11-25 13:50:15

React組件SFC

2017-03-15 13:41:16

數(shù)據(jù)庫SQL調(diào)試

2021-11-30 10:20:24

JavaScript代碼前端

2021-04-29 21:54:44

Python代碼語言

2022-02-08 19:33:13

技巧代碼格式

2021-01-04 07:57:07

C++工具代碼

2022-02-17 10:05:21

CSS代碼前端

2020-12-19 10:45:08

Python代碼開發(fā)

2019-09-20 15:47:24

代碼JavaScript副作用

2022-03-11 12:14:43

CSS代碼前端

2020-05-19 15:00:26

Bug代碼語言

2016-12-21 11:55:55

兼容性頁面

2022-10-24 08:10:21

SQL代碼業(yè)務

2015-09-28 10:49:59

代碼程序員
點贊
收藏

51CTO技術(shù)棧公眾號