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

khs1994 發(fā)布于2019-08-22 13:58 / 2846人閱讀

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

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

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

原作者:方應杭

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

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

下面是我總結(jié)的一份思維導圖,方便形成對文章內(nèi)容結(jié)構(gòu)的一個大致的印象。

首先是關于代碼優(yōu)化的幾條原則:

易讀性優(yōu)先

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

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

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

一、如何命名代碼

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

包括兩大點:

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

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

1.注意詞性

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

 name: "lvziwei",
 age : "18"

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

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

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

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

(4) 函數(shù)中,如果是回調(diào)函數(shù)。用「介詞」開頭，或用「動詞的現(xiàn)在完成時態(tài)」

「介詞」開頭

    beforeUpdate()
    afterUpdate()

「動詞的現(xiàn)在完成時態(tài)」, 典型的是Vue的生命周期鉤子函數(shù)。

     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對象
    
    // 前綴優(yōu)化: 可通過變量名稱,一眼看出他們一個是DOM,一個是JQ對象
    
    var dom = document.querySelector("#dom1")
    var $dom = $("#dom2")

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

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

JQ中的text()

$dom.text()
$dom.text("內(nèi)容1")

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

(1) 風格一致

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

     beforeUpdate()
     afterUpdate()

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

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

函數(shù)名稱正確的描述函數(shù)體內(nèi)容,函數(shù)內(nèi)容要體現(xiàn)函數(shù)名稱

(3) 時間一致

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

二、如何組織代碼

好了,現(xiàn)在我們的變量名稱已經(jīng)易讀,容易理解了,之后干嘛?

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

1.用函數(shù)組織你的代碼

步驟：

將一坨代碼放到一個函數(shù)里

將代碼依賴的外部變量作為參數(shù)

將代碼的輸出作為函數(shù)的返回值

給函數(shù)取一個合適的名字

調(diào)用這個函數(shù)并傳入?yún)?shù)

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

2.用對象組織你的代碼

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

3.一些固定套路

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

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

三、如何寫一手爛代碼

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

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

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/92690.html

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

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

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

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

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

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

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

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

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