国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

編寫可維護(hù)的前端代碼

HackerShell / 3189人閱讀

摘要：最近在看高級(jí)程序設(shè)計(jì)，看到可維護(hù)代碼的編寫，做一下筆記與總結(jié)，方便以后查看。

最近在看JavaScript高級(jí)程序設(shè)計(jì)，看到可維護(hù)代碼的編寫，做一下筆記與總結(jié)，方便以后查看。

1.代碼約定 1.1可讀性

代碼的格式化 使用若干個(gè)空格來進(jìn)行縮進(jìn)，因?yàn)橹票矸诓煌庉嬈鞣N的顯示效果不同

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

1.2 變量和函數(shù)命名

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

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

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

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

1.3 變量類型透明 
類型透明也就是在變量定義的時(shí)候可以知道變量的類型

主要有以下三種方式：

初始化變量

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

缺點(diǎn)：不能使用在函數(shù)聲明中的函數(shù)參數(shù)（現(xiàn)在通過ES6中的函數(shù)參數(shù)初始化解決）

使用匈牙利標(biāo)記法 o表示對(duì)象，s表示字符串...

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

缺點(diǎn)：代碼難以閱讀

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

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

缺點(diǎn)：不能使用js多行注釋

使用typeScript（終極）

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

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

通過Ajax請(qǐng)求獲取HTML

HTML中使用JavaScript

將js文件寫成獨(dú)立文件，script標(biāo)簽引入

2.2 解耦CSS/JavaScript

通過動(dòng)態(tài)修改樣式類，而不是修改特定樣式

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

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

// js
element.className = "edit";

2.3 解耦應(yīng)用邏輯/事件處理程序

有以下幾條原則：

勿將event對(duì)象傳給其他方法，只傳函數(shù)中需要的數(shù)據(jù)

任何可以在應(yīng)用層面動(dòng)作都應(yīng)該可以在不執(zhí)行任何事件處理程序的情況下進(jìn)行

任何事件處理程序都應(yīng)該處理事件，然后將處理轉(zhuǎn)交給應(yīng)用邏輯

// 不建議寫法
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";
        }
    }
}

// 建議寫法
// 好處：如果我點(diǎn)擊鼠標(biāo)也執(zhí)行相同邏輯，那么直接調(diào)用validateValue就可以了
// 應(yīng)用邏輯
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 尊重對(duì)象所有權(quán) 
簡單點(diǎn)說就是不是你自己的創(chuàng)建或者維護(hù)的某個(gè)對(duì)象，他的對(duì)象和方法，不能修改

具體說：

不要為實(shí)例或原型添加屬性或方法

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

3.2 避免全局變量

最多創(chuàng)建一個(gè)全局變量，其他對(duì)象或函數(shù)保存在其中，其中有個(gè)概念叫做命名空間

命名空間就是指用來放置頁面功能的對(duì)象
// 命名空間
let YAHOO = {};

YAHOO.util.Dom 
YAHOO.util.Event
....
3.3 避免與null進(jìn)行比較

判斷一個(gè)是否為null 如果直接比較是使用過度的，并且由于比較不充分可能導(dǎo)致錯(cuò)誤，
所以在判斷一個(gè)值的類型的時(shí)候要與期望的類型進(jìn)行比較，而非不被期望的那些

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

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

下面列舉一下判斷數(shù)據(jù)類型的方法

判斷基本類型，使用typeof

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

判斷是否為函數(shù)，也可以使用typeof

判斷是否為undefined,使用typeof,不要直接===判斷，如果函數(shù)沒有聲明，那么會(huì)報(bào)錯(cuò)

所有類型都可以使用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 使用常量

使用常量可以避免魔術(shù)字符串，也可以幫助構(gòu)建國際化

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

重復(fù)值 --- 任何多處使用到的值

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

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

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

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

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

相關(guān)文章

  • 編寫可維護(hù)的前端代碼

    摘要：最近在看高級(jí)程序設(shè)計(jì)，看到可維護(hù)代碼的編寫，做一下筆記與總結(jié)，方便以后查看。 最近在看JavaScript高級(jí)程序設(shè)計(jì)，看到可維護(hù)代碼的編寫，做一下筆記與總結(jié)，方便以后查看。 1.代碼約定 1.1可讀性 代碼的格式化 使用若干個(gè)空格來進(jìn)行縮進(jìn)，因?yàn)橹票矸诓煌庉嬈鞣N的顯示效果不同 注釋函數(shù)和方法 注明參數(shù)，返回值，前提假設(shè).... 大段代碼 復(fù)雜的算法 說明算法邏輯，方便別人查...

    CoreDump 評(píng)論0 收藏0

  • 編碼之道（一）：程序員的“圣經(jīng)“

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

    Elle 評(píng)論0 收藏0

  • 學(xué)習(xí)前端我推薦這5本書

    摘要：不管你是想涉獵前端抑或進(jìn)行系統(tǒng)性的學(xué)習(xí)，我都推薦大家閱讀前端的相關(guān)書籍。那么對(duì)于想入門或者扎實(shí)前端基礎(chǔ)的童鞋來說我們應(yīng)該挑選哪幾把適合我們的書籍呢下面我就推薦本帶我踏入前端并產(chǎn)生較大幫助的圖書供大家參考。 前言 作為一名前端開發(fā)人員，如果你告訴我你沒有看過任何關(guān)于前端的書籍，那么我完全可以認(rèn)為你不是一名合格的前端開發(fā)工程師。為什么我要以看書來衡量合格前端的標(biāo)準(zhǔn)？因?yàn)榍岸俗鳛橐粋€(gè)特殊的極...

    zorpan 評(píng)論0 收藏0

  • HTML-CSS-JS

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

    mikasa 評(píng)論0 收藏0

  • HTML-CSS-JS

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

    李世贊 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

HackerShell

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<