代码优化--松耦合（摘）

本文主要内容参考自：图书“编写可维护的JavaScript“  人民邮电出版社。

松耦合可以很大的提高代码的后期维护效率，拥有更好的性能，本文就是叙述了一下，如何编写可维护的代码，如何写出松耦合的代码。

一：松耦合

在Web开发中，用户界面主要由三个部分组成：HTML，CSS，JavaScript。

说到松耦合，就先说明一下紧耦合的概念：当两个组件中，你修改一个组件的逻辑，那么另外一个组件的逻辑也需要修改。这就说明：这两个组件的耦合性太高，设计模式的出现，就是为了解决紧耦合的问题。

当你能够做到修改一个组件，而不需要更改其他的组件时，你就做到了松耦合。当然在一起工作的组件是无法达到”无耦合“的。

二：最基本的松耦合方法

1：将JavaScript从CSS中抽离

在CSS中添加js代码的情况已经很少见了，但是为了解决一些低版本浏览器，能实现相同的功能，依然会有这种用法出现，最常见的就是：如果使用position：fixed的属性，fixed属性在低版本的ie中，是没有的，所以这个时候，就需要模拟这个属性的实现，就会在CSS中使用js代码。

.box{
     position:absolute;
     top:expresion(//some js code);
}

浏览器会以高频率重复计算CSS表达式，严重的影响代码的性能。所以，为了维护方便，不到万不得已，不要把js加入到CS中。

2：将CSS从JavaScript中抽离

有时，保持CSS和JS之间的清晰还是很重要的，比如用DOM元素的style属性改变CSS就是一个很差的选择。

ele.style.color = "red";
ele.style.backgroundColor = "#aaa";
ele.style.display = "none";

这样的写法，首先一点就是，之后的维护工作，变得复杂，虽然这种方式改变的CSS都会被添加到html标签上，但是如果有问题，需要修改，就不得不去庞大的js代码中，寻找这部分是在哪里更改的，同时一点更重要的：上面的三行代码，前两行导致了浏览器的重绘，第三行导致了浏览器的重排，这无疑是加大了浏览器的负担。

这个时候，我们或许会想到利用cssText这个属性

ele.style.cssText = "color:red;background-color:#aaa;display:none;";

虽然这种写法，依然没有把CSS从JS中抽离，这个方法比上面方法好的地方在于，不论是重绘或者重排，它只出现了一次。这种写法可以出现的地方只有一处最合适：一个出现位置会变化的定位元素，同时这个时候，因为定位元素不再属于普通流元素，所以这个时候不管怎么操作，都不会出现浏览器的重绘和重排的。

通过JS改变元素的样式的最优方式就是通过className，因为这个时候，所有的CSS元素都是存在于CSS文件中，也意味着CSS从JS中抽离了出来。

这种方法的实现也比较多，不同的框架有不同的方法，这里就不在举例。

3：将JavaScript从HTML中抽离

       事件绑定的三种方法：

            1：直接在元素上面绑定
            2：直接对象的绑定
            3：dom方法绑定

        其中，第一种方法，是最差的，它使得HTML和JS紧耦合，对之后的维护，增加了难度。

        后两种方法，有较好的松耦合性。

        并且，最好将所有的JavaScript代码都放入外置的文件中，以确保在HTML代码中不会有内联的JavaScript代码。

4：将HTML从JavaScript中抽离

        这个方面呢，就是在说，尽量不要在JS中给innerHTML赋值，这样会增加之后调试的难度，对于如何将HTML从JS中抽离，书中给了三种方案：

        1：从服务器加载:：利用ajax异步请求，其实就是把问题抛给写服务器代码的同事？这个方法也太治标了吧。

        2：简单客户端模板：就是把一些结构相似的模块，用一个函数封装起来，把这个模块中，不同的部分，以形参的形式添加进去，进而实现代码的重复利用，之后若是要修改结构，也方便维护。

        3：复杂客户端模板：这个就是利用一些模板了，比如PHP中比较知名的smarty模板，可以循环的加载html的。