提高代碼可讀性,掌握這些就夠了

khs1994 發布于2019-08-22 13:58 / 2851人閱讀

摘要：提高代碼可讀性掌握這些就夠了今天看到一篇關于代碼優化的文章寫得十分實用在學習總結后梳理出思維結構圖將收貨的分享一下原作者方應杭原文地址注意這篇文章所指的代碼優化特指的是代碼可讀性方面的一些寫法優化而不是指的性能優化。

提高代碼可讀性,掌握這些就夠了

今天看到一篇關于代碼優化的文章,寫得十分實用,在學習總結后,梳理出思維結構圖,將收貨的分享一下

原作者:方應杭

原文地址:https://zhuanlan.zhihu.com/p/...

注意:這篇文章所指的代碼優化,特指的是代碼可讀性方面的一些寫法優化,而不是指的性能優化。

下面是我總結的一份思維導圖,方便形成對文章內容結構的一個大致的印象。

首先是關于代碼優化的幾條原則:

易讀性優先

如果不是性能瓶頸問題,不要只是為了性能優化而改寫代碼

沒有銀彈。無論怎么寫,代碼的復雜性不會消失。

關于第三條,作者也解釋了,如果你這個功能邏輯一句話能說清,那你肯定不應該寫上百行那么復雜,如果10分鐘也講不清楚的功能,代碼也一定會體現出功能的復雜。

一、如何命名代碼

這里講的是程序員的三大難題之一,變量命名。

包括兩大點:

要注意詞性,包括6小點。

注意一致性(風格統一),包括4小點。

1.注意詞性

(1) 普通變量的命名,一般就用「名詞」

 name: "lvziwei",
 age : "18"

(2) 布爾類型變量的命名,用「isX」或者「hasX」或者「canX」

    isVip:  true              表示是VIP
    hasValue: true            表示有值
    canSpeak: true            表示可以說話

(3) 函數是一個動作,當然用「動詞」

     run(){}, // 不及物動詞
     drinkWater(){}, // 及物動詞

(4) 函數中,如果是回調函數。用「介詞」開頭，或用「動詞的現在完成時態」

「介詞」開頭

    beforeUpdate()
    afterUpdate()

「動詞的現在完成時態」, 典型的是Vue的生命周期鉤子函數。

     var component = {
          beforeCreate(){},
          created(){},
          beforeMount(){},
          mounted(){},
          beforeUpdate(){},
          updated(){},
          activated(){},
          deactivated(){},
          beforeDestroy(){},
          destroyed(){},
          errorCaptured(){}
      }

這兩種寫法都很容易讀,但是注意你最好只選擇一種風格寫法并保持,這也是下面將要提到的一致性。

(5) 特別的 : 一些容易混淆的變量,可以添加前綴來讓他們更容易讀

    var dom1 = document.querySelector("#dom1")
    var dom2 = $("#dom2")
    
    // 這樣的代碼不容易讀,因為dom1 dom2直覺上感覺是一類的,但是一個是dom對象,一個是JQ對象
    
    // 前綴優化: 可通過變量名稱,一眼看出他們一個是DOM,一個是JQ對象
    
    var dom = document.querySelector("#dom1")
    var $dom = $("#dom2")

(6) 特別的 : 屬性訪問器函數,可以用名詞

這是一種約定成俗的命名方式吧,按說函數都用動詞,但是你看到一個框架里的函數API是用的名詞,那么這很可能按時這個函數是一個屬性訪問器。

JQ中的text()

$dom.text()
$dom.text("內容1")

2.注意一致性(風格統一)

(1) 風格一致

上面提到過,下面2種風格,最好只選擇其一。

     beforeUpdate()
     afterUpdate()

     beforeUpdate(){},
     updated(){},

(2) 函數名和函數體一致

函數名稱正確的描述函數體內容,函數內容要體現函數名稱

(3) 時間一致

隨著時間推移,業務的改變可能導致當初的變量名稱已經不再合適,這時候要及時修改,這也是最難做到的,因為牽一發而動全身。

二、如何組織代碼

好了,現在我們的變量名稱已經易讀,容易理解了,之后干嘛?

是不是就剩下將你的變量組織起來了? 下面主要從兩方面講了如何組織代碼

1.用函數組織你的代碼

步驟：

將一坨代碼放到一個函數里

將代碼依賴的外部變量作為參數

將代碼的輸出作為函數的返回值

給函數取一個合適的名字

調用這個函數并傳入參數

這個函數里的代碼如果超過 5 行，則依然有優化的空間，請回到第 1 步

2.用對象組織你的代碼

我們會用 this 來串聯這個對象和所有函數。
最終代碼：http://js.jirengu.com/mimazab...

3.一些固定套路

表驅動編程（《代碼大全》里說的）
所有一一對應的關系都可以用表來做

自說明代碼（以 API 參數為例）
把別人關心的東西放在顯眼的位置

三、如何寫一手爛代碼

角度清奇,原作者推薦了一篇教人如何寫出不可維護的代碼的文章 : https://coolshell.cn/articles...

GPU云服務器云服務器代碼可讀性提高代碼性能 js代碼提高安全性兒就夠

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92690.html

前端基礎進階（十三）：透徹掌握Promise的使用，讀這篇就夠了

摘要：在對象的構造函數中，將一個函數作為第一個參數。二對象中的方法，可以接收構造函數中處理的狀態變化，并分別對應執行。 showImg(https://segmentfault.com/img/remote/1460000008932857); Promise的重要性我認為我沒有必要多講，概括起來說就是必須得掌握，而且還要掌握透徹。這篇文章的開頭，主要跟大家分析一下，為什么會有Promise...

yy736044583 2019-08-21 18:31 評論0 收藏0
【轉】成為Java頂尖程序員，看這10本書就夠了

摘要：實戰高并發程序設計這本書是目前點評推薦比較多的書，其特色是案例小，好實踐代碼有場景，實用。想要學習多線程的朋友，這本書是我大力推薦的，我的個人博客里面二十多篇的多線程博文都是基于此書，并且在這本書的基礎上進行提煉和總結而寫出來的。學習的最好途徑就是看書，這是我自己學習并且小有了一定的積累之后的第一體會。個人認為看書有兩點好處：showImg(/img/bVr5S5);　　1.能出版出...

DTeam 2019-08-14 15:09 評論0 收藏0
JavaScript入門的5條建議

摘要：你是否已經初步掌握了和，但完全不知道從何入手如果是，那么這篇文章一定會對你有所幫助，這里總結了條建議，幫助初學者總結學習方法，提高學習效率。這樣的結果就是，個小時最多只利用了個小時。你是否已經初步掌握了html和css，但完全不知道從何入手JavaScript？如果是，那么這篇文章一定會對你有所幫助，這里總結了5條建議，幫助JavaScript初學者總結學習方法，提高學習效率。一、...

李昌杰 2019-08-20 17:46 評論0 收藏0
面試中關于Redis的問題看這篇就夠了

摘要：所以查閱官方文檔以及他人造好的輪子，總結了一些面試和學習中你必須掌握的問題。在微博應用中，可以將一個用戶所有的關注人存在一個集合中，將其所有粉絲存在一個集合。昨天寫了一篇自己搭建redis集群并在自己項目中使用的文章，今天早上看別人寫的面經發現redis在面試中還是比較常問的（筆主主Java方向）。所以查閱官方文檔以及他人造好的輪子，總結了一些redis面試和學習中你必須掌握的問題。...

yanbingyun1990 2019-08-15 15:34 評論0 收藏0