讀書筆記(02) - 可維護(hù)性 - JavaScript高級程序設(shè)計(jì)

k00baa 發(fā)布于2019-08-23 13:51 / 2695人閱讀

摘要：解耦優(yōu)勢代碼復(fù)用，單元測試。常用比較誤區(qū)可同時(shí)判斷，可用來判斷對象屬性是否存在。使用作判斷無法進(jìn)行充分的類型檢查。文件中應(yīng)用常量參考文檔高級程序設(shè)計(jì)作者以樂之名本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。

編寫可維護(hù)性代碼

可維護(hù)的代碼遵循原則：

可理解性（方便他人理解）

直觀性（一眼明了）

可適應(yīng)性（數(shù)據(jù)變化無需重寫方法）

可擴(kuò)展性（應(yīng)對未來需求擴(kuò)展，要求較高）

可調(diào)試性（錯(cuò)誤處理方便定位）

命名方式

變量取名多為為名詞，方法取名多為為動詞

// 變量名
car, person;

// 方法名
getName, isEnable;

解耦

功能過于依賴，代碼耦合過緊，不利于維護(hù)。而通過解耦能讓我們更專一地處理特定功能業(yè)務(wù)的開發(fā)，也方便我們開發(fā)中調(diào)試，從復(fù)雜的耦合依賴中抽離出來。

解耦優(yōu)勢：代碼復(fù)用，單元測試。

解耦原則：

HTML/JavaScript解耦（結(jié)構(gòu)層/行為層的解耦）

CSS/JavaScript解耦（樣式層/行為層的解耦）

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

應(yīng)用邏輯/事件處理程序解耦合的原則：

勿將event對象傳給其他方法；只傳來自event對象中所> 需的數(shù)據(jù)
任何可以在應(yīng)用層面的動作都應(yīng)該可以在不執(zhí)行任何事> 件處理程序的情況下進(jìn)行；
任何事件處理程序都應(yīng)該處理事件，然后將處理轉(zhuǎn)交給應(yīng)用邏輯

// 一個(gè)事件解耦的例子
var pwdInput = document.getElementById("password");

// 回車事件
pwdInput.addEventListener("keyup", function(event){
    if (event.keyCode == 13) {
        validatePassword(event.target.value);
    }
})

// 失焦事件
pwdInput.addEventListener("blur", function(event) {
    validatePassword(event.target.value);
})

// 業(yè)務(wù)應(yīng)用多帶帶封裝到一個(gè)方法里面，多處復(fù)用/單元測試皆可
function validatePassword(pwd) {
    if (!pwd) {
        alert("密碼不能為空!");
    } 
}

對象所有權(quán)

JavaScript中是通過原型鏈來實(shí)現(xiàn)繼承，而原型繼承的一個(gè)特點(diǎn)就是原型上定義的屬性方法，可以被多個(gè)實(shí)例共享使用。

對象維護(hù)原則：

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

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

不要重定義已存在的方法

需要修改對象時(shí)：

創(chuàng)建包含所需功能的新對象，并用它與相關(guān)對象進(jìn)行交互

創(chuàng)建自定義類型，繼承需要進(jìn)行修改的類型，然后可以自定義類型添加額外功能

全局變量引申命名空間

var name = "KenTsang";
function sayName () {
    console.log(name);
}

var MyApp = {
    name: "KenTsang",
    sayName: function() {
        console.log(this.name);
    }
    skill: {
        html: 80,
        css: 80,
        js: 80
    }
}

MyApp.skill.js // 80

雖然減少程序員輸錯(cuò)代碼造成修改全局變量的幾率，但依舊可以修改到全局變量，而且增加了代碼量。

常用null比較誤區(qū)

TIPS: null可同時(shí)判斷null/undefined，可用來判斷對象屬性是否存在。

使用null作判斷無法進(jìn)行充分的類型檢查。

// 錯(cuò)誤用法
function sortArrays(values) {
    if (values != null) {
        // 非數(shù)組類型就會報(bào)錯(cuò)，因?yàn)閟ort方法只有Array才具備
        values.sort();
    }
} 

// 正確用法
if (values instanceof Array) {
    value.sort();
}

使用null比較的代碼，替換原則：

如果值應(yīng)為一個(gè)引用類型，使用instanceof操作符檢查其構(gòu)造函數(shù)
如果值應(yīng)為一個(gè)基本類型(值類型)，使用typeof檢查其類型
如果是希望對象包含某個(gè)特點(diǎn)的方法名，則使用typeof操作符確保指定名字的方法存在于對象上

// 值類型 (Number, String, Boolean)
typeof value == "string";

// 引用類型 (Array, Object, Function)
value instanceof Array;

// 對象方法 (Object.property)
typeof person.getName == "function"

常量應(yīng)用

var CONSTANS = {
    INVALID_VALUES_MSG: "Invalid value!",
    INVALID_VALUE_URL: "/erros/invalid.php"
}

CONSTANS.INVALID_VALUES_MSG // "Invalid value!"

常量應(yīng)用原則：

重復(fù)值——多處地方引用的值 (CSS類名/后端返回的狀態(tài)碼)。

用戶界面字符串——顯示給用戶的字符串 (國際化, 替換為對應(yīng)的語言包文件)

URLs——公共地方存放所有的URL (測試API的URL/上線API的URL)

任何可能會更改的值 (通常是環(huán)境/語言配置上的修改)

redux/vuex的actionType判斷的應(yīng)用，也是常量應(yīng)用常見的場景。好處就是引用時(shí)拼寫錯(cuò)誤會直接拋出變量引用錯(cuò)誤，而直接用字符串值判斷，則不會拋出錯(cuò)誤，不利于調(diào)試。

// redux-reducer.js文件中應(yīng)用常量
import {
    ADD_TODO_ITEM, 
    DELETE_TODO_ITEM
} from "./actionTypes"

const defaultState = {
    inputValue: "",
    list: []
};

export default (state = defaultState, action) => {
    let newState = JSON.parse(JSON.stringify(state));

    switch (action.type) {
        case DELETE_TODO_ITEM:
            newState.list.splice(action.value, 1);
        break;
        case ADD_TODO_ITEM:
            if (newState.inputValue.trim().length) {
                newState.list.push(newState.inputValue);
            }
            newState.inputValue = "";
        break;
    }

    return newState;
}

參考文檔

《JavaScript高級程序設(shè)計(jì)》

作者：以樂之名
本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。轉(zhuǎn)載請指明出處。

GPU云服務(wù)器云服務(wù)器高級程序設(shè)計(jì)-筆記讀書筆記編程思想讀書筆記大數(shù)據(jù)時(shí)代讀書筆記

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

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

發(fā)表評論

登陸后可評論

0條評論

k00baa

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow雙向lstm

閱讀 1190·2023-04-26 02:42
【快樂水題】495. 提莫攻擊

閱讀 1636·2021-11-12 10:36
shockhosting新加坡VPS簡單測評（1Gbps帶寬）

閱讀 1790·2021-10-25 09:47
#八月優(yōu)惠#Hostodo：1核/512M/16G NVMe/3T/1Gbps/美國多機(jī)房/年付$1

閱讀 1267·2021-08-18 10:22
css 背景和漸變

閱讀 1806·2019-08-30 15:52
CSS實(shí)現(xiàn)兩個(gè)球相交的粘粘效果

閱讀 1216·2019-08-30 10:54
重學(xué)前端學(xué)習(xí)筆記（八）--JavaScript中的原型和類

閱讀 2637·2019-08-29 18:46
利用 es6 new.target 來對模擬抽象類

閱讀 3501·2019-08-26 18:27

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

讀書筆記(02) - 可維護(hù)性 - JavaScript高級程序設(shè)計(jì)

相關(guān)文章

002-讀書筆記-JavaScript高級程序設(shè)計(jì) 在HTML中使用JavaScript

**001-讀書筆記-JavaScript高級程序設(shè)計(jì) JavaScript簡介**

讀書筆記(05) - 事件 - JavaScript高級程序設(shè)計(jì)

**《JavaScript高級程序設(shè)計(jì)》（第3版）讀書筆記第1~2章**

讀書筆記(01) - JSON - JavaScript高級程序設(shè)計(jì)

發(fā)表評論

0條評論

k00baa

男|高級講師

TA的文章

tensorflow雙向lstm

【快樂水題】495. 提莫攻擊

shockhosting新加坡VPS簡單測評（1Gbps帶寬）

#八月優(yōu)惠#Hostodo：1核/512M/16G NVMe/3T/1Gbps/美國多機(jī)房/年付$1

css 背景和漸變

CSS實(shí)現(xiàn)兩個(gè)球相交的粘粘效果

重學(xué)前端學(xué)習(xí)筆記（八）--JavaScript中的原型和類

利用 es6 new.target 來對模擬抽象類

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

讀書筆記(02) - 可維護(hù)性 - JavaScript高級程序設(shè)計(jì)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！