UI 層的鬆耦合

鬆耦合

當你可以作到修改一個組件而不須要更改其餘組件時，就作到了鬆耦合，鬆耦合對於代碼可維護性來講是相當重要的。

原則

• 不要使用 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 中抽離

<!-- 很差的寫法 -->
<button onclick="doSomething()" id="action">click me</button>

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

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

將 html 從 javascript 中抽離

註釋中包含模板文本

<ul id="mylist"><!--<li id="item%s"><a href="%s">%s</a></li>-->
    <li><a href="/item/1">First item</a></li>
    <li><a href="/item/2">Second item</a></li>
    <li><a href="/item/3">Third item</a></li>
</ul>

註釋也是 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 屬性的 <script> 元素。

瀏覽器會默認地將<script>元素中的內容識別爲 JavaScript 代碼， 但你能夠經過給 type 賦值爲瀏覽器不識別的類型，來告訴瀏覽器這不是一段 javascript 腳本。

<script type="text/x-my-template" id="list-item">
    <li><a href="%s">%s</a></li>
</script>

你能夠經過<script>標籤的 text 屬性來提取模板文本。
這樣 addItem() 函數就會變成這樣。

function addItem(url, text) {
    var mylist = document.getElementById("mylist"),
        script = document.getElementById("list-item"),
        templateText = script.test,
        result = sprintf(template, url, text),
        div = document.createElement("div");

    div.innerHTML = result.replace(/^\s*/, "");
    list.appendChild(div.firstChild);
}

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