编写可维护的JavaScript-随笔（三）

UI层的松耦合

本章提出了一个概念就是耦合

假设修改一个组件的时候需要修改很多其他的组件的话则表示组件之间存在紧耦合

如果修改一个组件而不需要修改其他组件的时候就做到了松耦合

页面是由HTML、CSS、javascript三部分组成，首先要实现三者之间的松耦合

1、 将JavaScript从css中抽离

　　在最开始的时候css中可以插入，当JavaScript报错的时候不好判断是js出现错误还是css中的js出现错误，不过IE9之后就不支持css表达式了

2、 将css从JavaScript中抽离

　　在js中经常会进行样式的操作，例如

Element.style.color=’red’

　　当此类代码增多以后出现样式问题的时候不好判断是css中的样式出现问题还是js中的样式操作出现问题

　　比较好的方法是进行类名操作，通过添加类名的方法来实现js和css的松耦合，

　　当然元素相对于另外的元素或整个页面重新定位等在css中没法操作的可以在js中完成

3、 将JavaScript从html中抽离

<button onclick=”dosomething()”>submit</button>

　　这种写法是两个UI层（HTML和js）的深耦合

　　存在的问题：1、点击按钮的时候函数必须存在，当点击的时候如果js文件没有加载完成就会报错。2、维护的时候要同时修改HTML和js代码，这就是典型的深耦合的代码

　　Js要使用外联的形式引入，因为js出现问题的时候第一想法是找js文件或者需要确定是在js文件还是html文件

4、 将HTML从JavaScript中抽离

　　当需要调试文本或者结构性的问题时，更希望从HTML开始，如果HTML深埋在js代码中就不好精确定位到问题所在的位置，

　　在js中使用HTML的情形往往是给innerHTML属性赋值，如果必须通过js向页面中插入或修改标签可以使用以下方法降低耦合

　　将模板放置在远程服务器，通过ajax请求来获取外部标签