JavaScript松散耦合

只要应用的某个部分过分依赖与另一部分，代码就是耦合过紧，难于维护。紧密耦合的代码难于维护并且需要经常重写。

因为Web应用所涉及的技术，有多种情况会使它变的耦合过紧。必须小心这些情况，并尽可能维护耦合弱的功能。

1. 解耦HTML/JavaScript

在Web上，HTML和JavaScript各自代表了解决方案中的不同层次：HTML表示数据，JavaScript是行为。有很多种方法可以将它们连接起来，但有的方法会使得它们耦合过紧。比如直接写在HTML中的JavaScript，使用内联代码的<script>元素或是使用HTML属性来声明事件处理程序，都是过于紧密的耦合。我们应该采用添加外部文件引用和使用DOM附加的方式来包含JavaScript。

HTML和JavaScript的紧密耦合也可以在相反的方向上成立：JavaScript包含HTML。这通常会出现在需要用innerHTML插入一段HTML文本。你可以在页面中先隐藏这段待添加的HTML，必要时只需激活它就可以了。这样JavaScript中就不必嵌入HTML了。

将HTML和JavaScript解耦可以节省调试过程中花费的时间，更加容易确定错误的来源，也减轻了维护的难度：更改行为只需在JavaScript文件中进行，而更改标记只需在HTML中进行。

2. 解耦CSS/JavaScript

另一个Web层则是CSS,它主要负责页面的显示。JavaScript和CSS也是非常紧密相关的：他们都是HTML之上的层次，因此常常一起使用。但是，和HTML与JavaScript的情况一样，CSS和JavaScript 也可能会过于紧密地耦合在一起。最常见的紧密耦合的例子是使用JavaScript来更改某些样式，如下所示：

s.style.color = "red";

s.style.background = "white";

由于CSS负责页面的显示，当显示出现任何问题时都应该只是查看css文件来解决。然而，当使用了 JavaScript来更改某些样式的时候，比如颜色，就出现广第二个可能需要修改和必须检查的地方。结果是JavaScript也在某种程度负责了页面的显示，并与CSS紧密耦合了。如过未来需要更改样式表， CSS和JavaScript文件可能都需要修改。这就绐开发人员造成了维护上的噩梦。所以在这两个层次之间必须有清晰的划分。

现代Web应用常常要使用JavaScript来修改样式，所以虽然不可能完全将CSS和JavaScript解耦， 何是还是能让耦合更松散的。这是通过动态修改样式类而非特定样式来实现的，如下例所示：

s.className = "MainColor";

好的层次是非常重要的。显示问题的唯一来源应该是CSS，行为问题的唯一来源应该是JavaScript。在层次之间保持耦合可以让你的整个应用更加易于维护。

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

如果把事件处理和应用逻辑写在一个函数中，会让调试变得困难，并难以维护。较好的办法是将应用逻辑和事件处理程序分开，这样两者分别各自处理相关的信息。采用事件处理程序提取信息，然后调用应用逻辑的方式。