如何編寫可維護的優雅代碼

時間 2021-04-27

標籤 javascript css html vue java 編程數組網絡 app 框架欄目 JavaScript 简体版

原文原文鏈接

程序是寫給人讀的，只是偶爾讓計算機執行一下。就執行而言，計算機只關心對錯，可是就團隊協做而言，風格一致且優雅的代碼，會讓人看上去賞心悅目（聲淚俱下）。所以，肯定編碼風格，就尤其重要javascript

本文就javascript而言，對於使用vue等框架，使用Eslint或者團隊已經強制推行本身的風格，僅供參考css

縮進

4個空格（製表符）html

通常編輯器按下tab時，默認是4個空格。所以，小編推薦4個空格，至少看上去是最舒服的vue

推薦指數： ??java

語句結尾

以；（分號）結尾編程

有賴於分析器的分號自動插入機制，js代碼省略分號也是能夠正常工做的。就JSLint和JSHint而言，省略空格，都會有警號。還有更麻煩的是，若是js是下面這5個字符之一，js就不會對上一行自動添加分號（ [ / + -數組

x = y
(function () {

})()

便會等價於網絡

x = y(function () {
})()app

推薦指數： ????框架

空行

在編碼規範中，空行是最容易忽視的一方面。並且，就編程人員而言，仁者見仁，智者見智。下面，小編就簡單闡述一下本身的看法。

何時要有空行？

方法和方法之間

function getName () {
    // 代碼塊
}   

function getAge () {
    // 代碼塊
}

推薦指數： ??

變量和函數之間要空行

var name = null

function getName () {
    
}

推薦指數： ????

在多行與上一行註釋前

/*
    取得屬性值name
*/
var name = null

/*
    取得屬性值age
*/
var age = null

推薦指數： ???

換行

當一行長度受到單行最大字符限制，或者一行過長影響代碼閱讀時，須要咱們手動拆成多行。此時，咱們須要在運算符換行，運算符寫在上一行的末尾。

賦值

給變量賦值時，第二行應該與第一行賦值運算符後的變量對齊

var result = name + age + gender + 
             msg + like;

推薦指數： ??

運算

運算符後進行換行，下一行會增長1～2個縮進。小編一般使用1個縮進

if (year == '2019' && month == '8' &&
  day == '23') {
      // 代碼塊
 }

推薦指數： ??

變量和函數

只要寫代碼，就在聲明變量和函數，或者走在聲明變量和函數的路上。所以，變量和和函數聲明的可讀性就相當重要。

變量

聲明變量的長度要儘量短，並抓住要點，且儘量的體現數據類型。對於數組，通常採用 +s 的複數形式

/*
    好的作法
*/
var count = 1;
var name = 'jack'
var status = false 
var names = ['jack', 'john', 'dave']

/*
    很差的作法
    變量聲明向函數，容易產生誤解
*/
var getCount = 10
var getName = 'jack'
var isUse = false

推薦指數： ???

函數

對於函數來講，第一個單詞最好是動詞，如get, set, has, is, toggle, can, delete, update, insert, add等，推薦使用駝峯明明法。函數的長度必定要見明知意，哪怕長度稍微長一點，都是值得的

/*
    好的作法
*/
function getName () {
    return name
}

function checkPermissionsBySession () {

}

推薦指數： ????

大括號

起首的大括號要跟在關鍵字的後面。由於Javascript會自動添加句末的分號，致使一些難以察覺的錯誤。爲了不這一類錯誤，須要寫成下面這樣

/*
    好的作法
*/
return {
    name: 'jack'
}  

/*
    很差的走法
    解析器會解析 return ; 
    後面的代碼就不會執行
*/
return 
{
    name: 'jack'
}

推薦指數： ????

圓括號

通常來講：全部語法元素與左括號之間，都有一個空格。下面這兩種狀況除外

調用函數的時候，語法元素和作括號之間，沒有空格
函數名與參數序列之間，沒有空格

/*
    好的寫法
*/
if (a === b) {}    

for (let i=0; i<10; i++) {}

return (a + b)

function getName(arr) {

}
getName()

推薦指數： ???

null和undefined

null

使用null的最好方式方式是看做一個佔位符。而不是用null來檢測是否傳參，或者檢測是否變量初始化

/*
    好的作法
*/
var name = null

function getName () {
    if (!condition) {
        return null
    }
}

/*
    很差的作法
*/
var name;
if (name != null) {

}

function getName(arg1, arg2) {
    if (arg3 != null) {

    }
}

推薦指數： ??

undefined

沒有被初始化的變量都有一個初始值，即undefined

var age;
console.log(typeof age) // undefined

推薦指數： ??

'=='和'===', '!='和'!=='

js具備強制類型轉換的機制，強制類型轉換會驅使某些變量自動轉換成其餘不一樣類型。可能會形成意想不到的結果。雖然使用相等，在開發過程當中可能會加快開發速度，可是一旦出現問題，排查起來花費的時間會多得多。所以，小編強烈建議使用全等和不全等

/*
  很差的作法
*/
console.log(1 == true) // true
console.log(0 == '')   // true

推薦指數： ???

全局變量

確保你的函數不會對全局變量有依賴，這將加強您對代碼的可測試性。尤爲是團隊開發，儘量的避免全局變量

使用命名空間即只定義一個變量空間（如JQuery -> $）。可是當你引用多個js文件時，恰巧這些文件都同時自定義了相同的變量符號。你就悲劇了。
使用匿名函數

(function(){
  
})();

可能會形成內存消耗多大，甚至內存泄漏等狀況

所以，儘量的不要使用全局變量，若是不得不使用，請使用所有的大寫字母進行命名。如：

MAX_SIZE // 推薦

推薦指數： ????

鬆耦合

將js和css進行抽離

鬆耦合：當你可以修改一個組件而不須要更改其餘的組件。鬆耦合對於代碼維護性相當重要，由於你絕對不但願開發人員在修改代碼時，破壞或者改動其餘的代碼

/*
  好的作法
*/
var el = document.getElementById('div1');
el.classList.add('blue')
document.body.appendChild(el)
    
/*
  很差的作法。沒有將css和js進行解藕
*/
var el = document.getElementById('div2');
el.style.width = '200px';
el.style.height = '200px'
el.style.background = 'blue';
document.body.appendChild(el)

推薦指數： ???

將html和js進行抽離

/*
  很差的作法。沒有實現html和js解藕
*/
var ul = document.createElement('ul');
ul.innerHTML = `
    <li>li</li>
    <li>li</li>
    <li>li</li>
`
document.body.appendChild(ul)

推薦指數： ???