国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

UI 層的松耦合

keithxiaoy / 1174人閱讀

摘要:松耦合當你能夠做到修改一個組件而不需要更改其他組件時,就做到了松耦合,松耦合對于代碼可維護性來說是至關重要的。應該使用保持和的溝通。將從中抽離在和更早版本的瀏覽器中有一個特性,即表達式。如下不好的寫法已經不再支持表達式了。

松耦合

當你能夠做到修改一個組件而不需要更改其他組件時,就做到了松耦合,松耦合對于代碼可維護性來說是至關重要的。

原則

不要使用 css 表達式。(這種方式應該已經廢棄了)

javascript 和 css 之間只通過 className 進行通信。

不要使用 html 的 on 屬性,如:onclick。
應該使用 id 保持 javascript 和 html 的溝通。

使用模板。

將 javascript 從 css 中抽離

在 ie8 和更早版本的瀏覽器中有一個特性,即 css 表達式。如下:

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

ie9 已經不再支持 css 表達式了。
這種寫法自2013年我開始接觸 web 以來一直沒有見過。

將 css 從 javascript 中抽離
/* 不好的寫法 */
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
將 javascript 從 html 中抽離


我們要避免使用 onclick 等 on 屬性來綁定一個事件處理程序。
應該使用 id 保持 javascript 和 html 的溝通。

// 好的寫法, 如使用 jQuery
$("#action").on("click",doSomething);
將 html 從 javascript 中抽離 注釋中包含模板文本

注釋也是 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");
使用一個帶有自定義 type 屬性的

你可以通過

閱讀需要支付1元查看
<