UI 层的松耦合

摘要：松耦合当你能够做到修改一个组件而不需要更改其他组件时，就做到了松耦合，松耦合对于代码可维护性来说是至关重要的。应该使用保持和的沟通。将从中抽离在和更早版本的浏览器中有一个特性，即表达式。如下不好的写法已经不再支持表达式了。

当你能够做到修改一个组件而不需要更改其他组件时，就做到了松耦合，松耦合对于代码可维护性来说是至关重要的。

不要使用 css 表达式。（这种方式应该已经废弃了）

javascript 和 css 之间只通过 className 进行通信。

不要使用 html 的 on 属性，如：onclick。
应该使用 id 保持 javascript 和 html 的沟通。

使用模板。

在 ie8 和更早版本的浏览器中有一个特性，即 css 表达式。如下：

/* 不好的写法 */
.box {
    width: expression(document.body.offsetWidth + "px");
}

ie9 已经不再支持 css 表达式了。
这种写法自2013年我开始接触 web 以来一直没有见过。

/* 不好的写法 */
element.style.color = "red";
element.style.left = "10"px;
element.style.visibility = "visible";


/* 好的写法
 * 在 css 中定义样式 ， 在 javascript 中 通过 className 通信
 */

// 在 css 中
.reveal {
    color: red;
    left: 10px;
    visibility: visible;
}

// 在 javascript 中
element.className += "reveal";    // 原生写法
$(element).addClass("reveal");    // 如果是 jQuery

click me

我们要避免使用 onclick 等 on 属性来绑定一个事件处理程序。
应该使用 id 保持 javascript 和 html 的沟通。

// 好的写法, 如使用 jQuery
$("#action").on("click",doSomething);

    
First item
    
Second item
    
Third item

注释也是 DOM 的一部分

function addItem(url, text) {
    var mylist = document.getElementById("mylist"),
        templateText = mylist.firstChild.nodeValue;
        result = sprintf(template, url, text);
    div.innerHTML = result;
    mylist.insertAdjacentHTML("beforeend", result);
}

// 用法
addItem("item/4", "Four item");