读书笔记(02) - 可维护性 - JavaScript高级程序设计

编写可维护性代码

可维护的代码遵循原则：

1. 可理解性 （方便他人理解）
2. 直观性 （一眼明了）
3. 可适应性 （数据变化无需重写方法）
4. 可扩展性 （应对未来需求扩展，要求较高）
5. 可调试性 （错误处理方便定位）

命名方式

变量取名多为为名词，方法取名多为为动词

// 变量名
car, person;

// 方法名
getName, isEnable;

解耦

功能过于依赖，代码耦合过紧，不利于维护。而通过解耦能让我们更专一地处理特定功能业务的开发，也方便我们开发中调试，从复杂的耦合依赖中抽离出来。

解耦优势：代码复用，单元测试。

解耦原则：

1. HTML/JavaScript解耦（结构层/行为层的解耦）
2. CSS/JavaScript解耦 （样式层/行为层的解耦）
3. 应用逻辑/事件处理程序解耦

应用逻辑/事件处理程序解耦合的原则：

1. 勿将event对象传给其他方法；只传来自event对象中所> 需的数据
2. 任何可以在应用层面的动作都应该可以在不执行任何事> 件处理程序的情况下进行；
3. 任何事件处理程序都应该处理事件，然后将处理转交给应用逻辑

// 一个事件解耦的例子
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);
})

// 业务应用单独封装到一个方法里面，多处复用/单元测试皆可
function validatePassword(pwd) {
    if (!pwd) {
        alert('密码不能为空!');
    } 
}

对象所有权

JavaScript中是通过原型链来实现继承，而原型继承的一个特点就是原型上定义的属性方法，可以被多个实例共享使用。

对象维护原则：

1. 不要为实例或原型添加属性
2. 不要为实例或原型添加方法
3. 不要重定义已存在的方法

需要修改对象时：

1. 创建包含所需功能的新对象，并用它与相关对象进行交互
2. 创建自定义类型，继承需要进行修改的类型，然后可以自定义类型添加额外功能

全局变量引申命名空间

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

虽然减少程序员输错代码造成修改全局变量的机率，但依旧可以修改到全局变量，而且增加了代码量。

常用null比较误区

TIPS: null可同时判断null/undefined，可用来判断对象属性是否存在。

使用null作判断无法进行充分的类型检查。

// 错误用法
function sortArrays(values) {
    if (values != null) {
        // 非数组类型就会报错，因为sort方法只有Array才具备
        values.sort();
    }
} 

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

使用null比较的代码，替换原则：

1. 如果值应为一个引用类型，使用instanceof操作符检查其构造函数
2. 如果值应为一个基本类型(值类型)，使用typeof检查其类型
3. 如果是希望对象包含某个特点的方法名，则使用typeof操作符确保指定名字的方法存在于对象上

// 值类型 (Number, String, Boolean)
typeof value == 'string';

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

// 对象方法 (Object.property)
typeof person.getName == 'function'

常量应用

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

CONSTANS.INVALID_VALUES_MSG // "Invalid value!"

常量应用原则：

1. 重复值——多处地方引用的值 (CSS类名/后端返回的状态码)。
2. 用户界面字符串——显示给用户的字符串 (国际化, 替换为对应的语言包文件)
3. URLs——公共地方存放所有的URL (测试API的URL/上线API的URL)
4. 任何可能会更改的值 (通常是环境/语言配置上的修改)

redux/vuex的actionType判断的应用，也是常量应用常见的场景。好处就是引用时拼写错误会直接抛出变量引用错误，而直接用字符串值判断，则不会抛出错误，不利于调试。

// redux-reducer.js文件中应用常量
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高级程序设计》

作者：以乐之名
本文原创，有不当的地方欢迎指出。转载请指明出处。