15

coding

编写可维护性代码

可维护的代码遵循原则:

  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;
}

参考文档

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

以乐之名
3.9k 声望5.4k 粉丝

不疯魔不成活。