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

编写可维护性代码

可维护的代码遵循原则：

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

命名方式

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

// 变量名

car, person;

// 方法名

getName, isEnable;

解耦

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

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

解耦原则：

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

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

勿将event对象传给其他方法；只传来自event对象中所> 需的数据

任何可以在应用层面的动作都应该可以在不执行任何事> 件处理程序的情况下进行；

任何事件处理程序都应该处理事件，然后将处理转交给应用逻辑

// 一个事件解耦的例子

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

对象维护原则：

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

需要修改对象时：

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

全局变量引申命名空间

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比较的代码，替换原则：

如果值应为一个引用类型，使用instanceof操作符检查其构造函数

如果值应为一个基本类型(值类型)，使用typeof检查其类型

如果是希望对象包含某个特点的方法名，则使用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!"

常量应用原则：

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

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高级程序设计》

作者：以乐之名

本文原创，有不当的地方欢迎指出。转载请指明出处。

秒客网