编写可维护的javascript（五）：UI层的松耦合

松耦合
当你能做到修改一个组件而不需要修改其他的组件时，你就做到了松耦合。

将Javascript从CSS中抽离
在IE8和更早的版本，存在CSS表达式。CSS表达式允许你讲Javascript直接插入到CSS中，这样可以在CSS代码中直接执行运算或其他操作。如：

    .box {
        width: expression(document.body.offsetWidth + 'px');
    }

CSS表达式包裹在一个特殊的expression() 函数中，可以给它传递任意Javascript代码。但这对于代码维护来说是一场噩梦。IE9不再支持CSS表达式。
2017年3月，微软宣布 Edge 浏览器将支持 CSS 变量。（详细可参见阮一峰老师的这篇文章）
http://www.ruanyifeng.com/blog/2017/05/css-variables.html

将CSS从Javascript中抽离
CSS和Javascript之间清晰的分离是很有挑战的，这两门语言相互协作的很不错，所以经常讲样式数据和Javascript混写在一起。比如：

    // bad
    element.style.color = "red";
    element.style.left = '10px';

将CSS从Javascript中抽离意味着所有的样式信息应该保持在CSS中。当需要通过JavaScript来修改元素样式的时候，最佳方法是操作CSS的className，比如：

    .reveal{
        color: red;
        left: 10px;
        top: 100px;
        visibility: visible;
    }
    // good(js原生方法)
    element.className += "reveal";

CSS的className可以成为CSS和JavaScript之间通信的桥梁。任何时刻CSS的样式都是可以修改的，而不必更新Javascript。Javascript不应当直接操作样式，以便保持和CSS的松耦合。当然有一种使用style属性的情形是可以接受：当你给页面的元素作定位的时候，并且通过计算（计算无法再CSS中完成），此时可以使用style.top等等。
将Javascript从HTML中抽离

    // bad
    <button onclick="doSomething()" id="action-btn">Click me</button>

    // good
    function doSomething() {
        // 代码
    }
    var btn = document.getElementById('action-btn');
    btn.addEventListener("click",doSomething, false);

下面写法的优势在于，函数doSomething() 的定义和事件处理程序的绑定都是在一个文件中完成的。如果函数名称需要修改，只需要修改一个文件。
在HTML中嵌入Javascript的另一种方法就是使用script标签，标签内包含内联的脚本代码，如下：

    <!-- bad -->
    <script>
        doSomething();
    </script>

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

文章内容从《编写可维护的Javascript》[美] Nicholas C. Zakas著 一书中总结写出。