編寫可維護的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 變數。(詳細可參見阮一峰老師的這篇文章)
將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著 一書中總結寫出。