书写可维护的javascript

内容介绍

编写可维护的代码很重要，因为大部分开发人员都花费大量时间维护他人代码。

1.什么是可维护的代码？

一般来说可维护的代码都有以下一些特征：

• 可理解性---------其他人可以接手代码并理解它的意图和一般途径，而无需原开发人员的完整解释
• 直观性---------代码中的东西一看就能理解明白，不管其操作过程多么复杂
• 可适应性 ---------代码以一种数据上的变化不要求完全重写的方法撰写
• 可扩展性----------在代码架构上已考虑到在未来允许对核心功能进行扩展
• 可调试性---------在有地方出错时，代码可以给予你足够的信息来尽可能直接地确定问题所在

2.怎么书写可维护的代码

书写出维护的代码最重要的就是要有一套严格的代码约定，为什么你去git上找来的项目，你能看得懂，而自己写的代码过几天就看不懂了(说的是我自己- -!)。

• 要让代码可维护，首先它必须可读。

1.可读性的大部分内容都是和代码缩进相关，当所有代码都用同一种缩进方式时，整个项目都会更加利于阅读。(这点现在编辑器下个插件就可以实现了)。

2.注释：这个非常重要。在大多数编程语言中，对每个方法的注释都视为一个可行的实践。因为javascript可以在代码的任何地方创建函数，所以这点常常被忘记。在每个函数和方法都应该包含一个注释，描述其目的和用于完成任务所可能使用的算法。因为存在浏览器差异，JavaScript代码一般会包含一些hack，不要假设其他人在看你代码的时候能够理解，请写上你的注释。

• 变量和函数命名是要合法并且要尽量符合其本意。
• 松散耦合

1.解耦HTML/Javascript

1.  
   <!-- 使用了<script>的紧密耦合的HTML/Javascript -->
2.  
   <script type='text/javascript'>
3.  
   document.write('hello word!')
4.  
   </script>
5.  
    
6.  
   <!-- 使用事件处理程序属性值的紧密耦合的HTML/Javascript -->
7.  
   <input type='button' onclick='dosomething()' />

虽然这些从技术上来说都是正确的，但是实践中，它们将表示数据的HTML和定义行为的Javascript紧密耦合在一起。理想情况下，html和javascript应该完全分离

2.解耦CSS/JavaScript

1.  
   // css对javascript的紧密耦合
2.  
   element.style.color ='red'
3.  
    
4.  
   // css对javascript的松散耦合
5.  
   .red{ color: red}
6.  
   element.className ='red'
7.  
    

通过修改css类，就可以让大部分样式信息严格保留在css中。javascript可以更改样式类，但并不会直接影响到元素的样式，这样做的话当出现问题时，可以追溯到css而非javascript.

3.解耦应用逻辑/事件处理程序

1.  
   function handleKeyPress(event){
2.  
   event = EventUtil.getEvent(event);
3.  
   if(event.keyCode == 13){
4.  
   var target = EventUtil.getTarget(event);
5.  
   var value = 5 * parseInt(target.value)
6.  
   if(value > 10){
7.  
   document.getElementById('error-msg').style.display='block'
8.  
   }
9.  
   }
10.  
    }

这个事件处理程序既包含了应用逻辑，还进行了事件的处理。这种方式的代码会让调试变的很难。

1.  
   function vaildataValue(value){
2.  
   value = 5 * parseInt(value);
3.  
   if(value > 10){
4.  
   document.getElementById('error-mag').style.display = 'block';
5.  
   }
6.  
   }
7.  
    
8.  
   function handleKeyPress(event){
9.  
   event = EventUtil.getEvent(event);
10.  
    if(event.keyCode == 13){
11.  
    var target = EventUtil.getTarget(event);
12.  
    vaildataValue(target.value);
13.  
    }
14.  
    }

将应用逻辑从事件处理程序中分离出来，就能更准确的定位问题，使代码更容易阅读。以下是应用和业务逻辑之间松散耦合的几条原则：

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

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

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