編寫可維護的前端代碼

CoreDump 發布于2019-08-30 15:44 / 390人閱讀

摘要：最近在看高級程序設計，看到可維護代碼的編寫，做一下筆記與總結，方便以后查看。

最近在看JavaScript高級程序設計，看到可維護代碼的編寫，做一下筆記與總結，方便以后查看。

1.代碼約定 1.1可讀性

代碼的格式化 使用若干個空格來進行縮進，因為制表符在不同編輯器種的顯示效果不同

注釋
函數和方法注明參數，返回值，前提假設....
大段代碼
復雜的算法說明算法邏輯，方便別人查看，也方便自己查閱
Hack 說明瀏覽器的差異，防止別人修改時沒考慮到誤刪...

1.2 變量和函數命名

不要使用沒有意義或容易引起歧義的名字，如：foo，doSomething...

變量名盡量用名詞，如： car，person....

函數名用動詞開始，如：getName(); 返回值為boolean用 is 開頭

變量和函數使用可以說清楚方法作用和變量含義的名稱，不要擔心長度，后期可以壓縮

1.3 變量類型透明

類型透明也就是在變量定義的時候可以知道變量的類型

主要有以下三種方式：

初始化變量

var found = false; // boolean
var count = -1; // number

缺點：不能使用在函數聲明中的函數參數（現在通過ES6中的函數參數初始化解決）

使用匈牙利標記法 o表示對象，s表示字符串...

var bFound; // boolean
var iCount; // int

缺點：代碼難以閱讀

使用類型注釋 類型注釋放到變量名右邊，初始化前面

var found /*:Boolean*/ = false;
var count /*:int*/ = -1;

缺點：不能使用js多行注釋

使用typeScript（終極）

2.松散耦合 2.1 解耦HTML/JavaScript JavaScript中使用HTML

不要使用js插入HTML，可以通過在頁面中隱藏元素，當頁面渲染后，通過js顯示該元素，而不是生成

通過Ajax請求獲取HTML

HTML中使用JavaScript

將js文件寫成獨立文件，script標簽引入

2.2 解耦CSS/JavaScript

通過動態修改樣式類，而不是修改特定樣式

// 不建議寫法
element.style.color = "red";
element.style.backgroundColor = "blue";

// 建議寫法
// css
.dit{
    color: red;
    background-color: blue;
}

// js
element.className = "edit";

2.3 解耦應用邏輯/事件處理程序

有以下幾條原則：

勿將event對象傳給其他方法，只傳函數中需要的數據

任何可以在應用層面動作都應該可以在不執行任何事件處理程序的情況下進行

任何事件處理程序都應該處理事件，然后將處理轉交給應用邏輯

// 不建議寫法
function handleKeyPress(event){
    if(event.keyCode === 13){
        var target = event.target;
        var value = 5 * parseInt(target.value);
        if(value > 10){
            document.getElementById("id").style.display = "block";
        }
    }
}

// 建議寫法
// 好處：如果我點擊鼠標也執行相同邏輯，那么直接調用validateValue就可以了
// 應用邏輯
function validateValue(value){
    value = 5 * parseInt(value);
    
    if(value > 10){
        document.getElementById("id").style.display = "block";
    }
}

// 事件處理程序
function handleKeyPress(event){
    if(event.keyCode === 13){
        var target = event.target;
        validateValue(target.value);
    }
}

3.其他 3.1 尊重對象所有權

簡單點說就是不是你自己的創建或者維護的某個對象，他的對象和方法，不能修改

具體說：

不要為實例或原型添加屬性或方法

不要重新定義已存在的方法

3.2 避免全局變量

最多創建一個全局變量，其他對象或函數保存在其中，其中有個概念叫做命名空間

命名空間就是指用來放置頁面功能的對象

// 命名空間
let YAHOO = {};

YAHOO.util.Dom 
YAHOO.util.Event
....

3.3 避免與null進行比較

判斷一個是否為null 如果直接比較是使用過度的，并且由于比較不充分可能導致錯誤，
所以在判斷一個值的類型的時候要與期望的類型進行比較，而非不被期望的那些

// value 期望一個Array
if(value !== null){
    // do something....
}

// 建議
if(value instanceof Array){
    // do something....
}

下面列舉一下判斷數據類型的方法

判斷基本類型，使用typeof

判斷引用類型，可以使用instanceof

判斷是否為函數，也可以使用typeof

判斷是否為undefined,使用typeof,不要直接===判斷，如果函數沒有聲明，那么會報錯

所有類型都可以使用Object.prototype.toString.call

let ts = Object.prototype.toString;

ts.call([]) === "[Object Array]"; // true
ts.call(123) === "[Object Number]"; // true
ts.call({}) === "[Object Object]"; // true
....

3.4 使用常量

使用常量可以避免魔術字符串，也可以幫助構建國際化

建議使用常量的幾種情況：

重復值 --- 任何多處使用到的值

用戶界面字符串 --- 方便國際化

URLs --- 推薦用一個公共地方專門存放所有的URL

任意可能變更的值 --- 如果是以后可能變更的值，都應該提取出來作為一個常量

云服務器 GPU云服務器編寫可維護的javascript 編寫漂亮的代碼 java編寫可執行修改rds實例可維護時間

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

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

編寫可維護的前端代碼

摘要：最近在看高級程序設計，看到可維護代碼的編寫，做一下筆記與總結，方便以后查看。最近在看JavaScript高級程序設計，看到可維護代碼的編寫，做一下筆記與總結，方便以后查看。 1.代碼約定 1.1可讀性代碼的格式化使用若干個空格來進行縮進，因為制表符在不同編輯器種的顯示效果不同注釋函數和方法注明參數，返回值，前提假設.... 大段代碼復雜的算法說明算法邏輯，方便別人查...

HackerShell 2019-08-26 10:49 評論0 收藏0
編碼之道（一）：程序員的“圣經“

摘要：與此類似，理所當然的，我們程序員也會有自己的圣經。這便是程序員的圣經三個原則我認為做為一個程序員，最神圣的就是三個原則，它幾乎能完整無誤的定義做為一個程序員應該如何去編碼。 ...

Elle 2021-09-04 16:40 評論0 收藏0
學習前端我推薦這5本書

摘要：不管你是想涉獵前端抑或進行系統性的學習，我都推薦大家閱讀前端的相關書籍。那么對于想入門或者扎實前端基礎的童鞋來說我們應該挑選哪幾把適合我們的書籍呢下面我就推薦本帶我踏入前端并產生較大幫助的圖書供大家參考。前言作為一名前端開發人員，如果你告訴我你沒有看過任何關于前端的書籍，那么我完全可以認為你不是一名合格的前端開發工程師。為什么我要以看書來衡量合格前端的標準？因為前端作為一個特殊的極...

zorpan 2019-08-20 12:20 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

mikasa 2019-08-01 18:18 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

李世贊 2019-08-29 14:08 評論0 收藏0