编写可维护性代码
可维护的代码遵循原则：
可理解性（方便他人理解）
直观性（一眼明了）
可适应性（数据变化无需重写方法）
可扩展性（应对未来需求扩展，要求较高）
可调试性（错误处理方便定位）
命名方式
变量取名多为为名词，方法取名多为为动词
// 变量名
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 高级程序设计》
作者：以乐之名本文原创，有不当的地方欢迎指出。转载请指明出处。