js最佳实践2----松散耦合

1.  解耦HTML/JAVASCRIPT

只要应用的某个部分过分依赖于另一部分，代码就是耦合过紧、难于维护。表现：修改一个对象的同时，需要修改另一个对象。

html和javascript各自代表了解决方案中的不同层次：HTML是数据，javascript是行为。

因为他们天生就需要交互，所以有多种不同的方法将这两个技术关联起来。

表现一、直接写在html中的javascript,使用包含内联代码的<script>元素或者使用Html属性来分配时间处理程序，都是过于机密的耦合。

如下：

理想情况是，HTML和JAVASCRIPT应该完全分离，应通过外部文件和使用DOM附加行为来包含javascript.

当两者耦合在一起时，出现javascript错误时就要先判断错误出现在Html部分还是javascript文件中。还会引入和代码是否可用的相关问题。

表现二、html和javascript的机密耦合也可以在相反的关系上成立，javascript包含了Html.这通常会出现在使用innerHtml来插入一段Html

文本到页面上的这种情况中。

当javascript用于插入数据时，尽量不要直接插入标记。一般可以在页面中直接包含并隐藏标记，然后等到整个页面渲染好之后，就可以用js显示

该标记，而非生成它。另一种方法是进行ajax请求并获取更多要显示的Html,这个方法可以让同样的渲染层来输出标记，而不是直接嵌在javascript中。

html和javascript解耦合可以在调试过程中节省时间，更佳容易确定错误的来源，也减轻维护的难度：更改行为只需要再js文件中进行，而更改

标记则只需要再渲染中进行。

2. 解耦CSS/JAVASCRIPT

另外一个web层则是css,它主要负责页面的显示。

最常见的紧密耦合例子是使用javascript来更改某些样式，如下所示；

//css对javascript的紧密耦合

element.style.color = "red";

element.style.backgroundColor="blue";

解耦合的原则：

虽然不可能完全将css和javascript解耦，但是还是能让耦合更松散的，这是通过动态海边样式类而非特定样式来实现的，如下面例子：

//css对javascript的松散耦合

element.className = "edit";

通过修改某个元素的css类，就可以让大部分样式信息严格保留在css中。

第二类紧密耦合仅会再Internet Explorer中出现（IE8不会出现），它可以在css中通过表达式嵌入javascript,例如：

/*javascript对css的紧密耦合*/

div{

width:expression(document.body.offsetwidth-10+"px");

}

好的层次划分是非常重要的。显示问题的唯一来源应该是css,行为问题的唯一来源应该是javascipt.在这些层次之间保持松散耦合可以让你的整个应用更加易于维护。

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

很少有能仔细得将应用漏极从事件处理程序中分离的。例如：

fuction handleKeyPress(event){

 if(event.keyCode==13）{

 var target = eventUtil.getTarget(event);

 var value = 5 * parseInt(target.value);

 if(value >10){

 document.getElementById("error-msg").style.display="block";

}

}

}

这段代码除了包含应用逻辑，还进行了事件的处理。

这种方式的问题有其双重性：首先，除了通过事件之外就再没有方法执行应用逻辑，让调试变得困难。如果没有发生预想的结果怎么办？

是不是表示事件处理程序没有被调用还会死指应用逻辑失败？

其次，如果一个后续的事件引发同样的应用逻辑，那就必须复制功能代码或将代码抽取到一个单独的函数中。无论如何，都要做比实际所需更多的改动。

   较好的方法是讲应用逻辑和时间处理程序分离，这两者分别处理各自的东西。一个事件处理程序应该从事件对象中提取相关信息，并将这些信息传送到处理

应用逻辑的某个方法中。例如前面的代码重写为：

function validateValue(value){

var value = 5 * parseInt(value);

 if(value >10){

 document.getElementById("error-msg").style.display="block";

}
}

fuction handleKeyPress(event){

 

 if(event.keyCode==13）{

var target = EventUtil.getTarget(event);
validateValue(target.value);
}
}

以下是要牢记的应用和业务逻辑之间松散耦合的几条原则：

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

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

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

牢记着几条可以在任何代码中都获得极大的可维护性的改进，并且为进一步的测试和开发制造了

很多可能。