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