web開發中UI層的鬆散耦合

這次帶給大家web開發中UI層的鬆散耦合，web開發中UI層松耦合使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

在Web開發中，UI是由三個彼此隔離又互動的層定義的。

HTML用來定義頁面的資料和語意

CSS用來為頁面新增樣式，建立視覺特徵

JS用來為頁面新增行為，使其更具互動性

關於松耦合，容我廢話幾句。當你能夠做到修改一個元件而不需要更改其他的元件時，你就做到了鬆散耦合。對於多人大型系統來說，有很多人參與維護程式碼，鬆散耦合對於程式碼可維護性至關重要。你絕對希望開發人員在修改某部分程式碼時不會破壞其他人的程式碼。當一個大系統的每個組件的內容有了限制，就做到了松耦合。本質上講，每個組件都需要保持足夠瘦身來確保鬆耦合。組件知道的越少，就越有利於形成整個系統。

有一點要注意：在一起工作的元件無法達到「無耦合」（no coupling）。在所有系統中，組件之間總是要共享一些資訊來完成各自的工作。這很好理解，我們的目標是確保對一個組件的修改不會經常性地影響其他部分。

如果一個 Web UI是鬆散耦合的，則很容易偵錯。和文字或結構相關的問題，透過尋找HTML即可定位。當發生了樣式相關的問題，你知道問題出現在CSS。最後，對於那些行為相關的問題，你直接去JS找到問題所在，這種能力是Web介面的可維護性的核心部分。

WebPage時代，我們推崇將HTML/CSS/JS三層分離，例如禁止使用DOM的內聯屬性來綁定監聽器，onclick#=handler>test< /button>這麼寫會被噴的。但是，在WebApp時代下，以React為代表性的MVVM和MVC框架（嚴格來說，React只是個專注於View層的一個框架），它們都推崇你把HTML、CSS和JS寫一塊，經常就可以看到內聯綁定事件監聽器的程式碼。

你不禁在想，難道我們在走倒退路？

歷史有時候會打轉，咋一看以為是回去了。其實是螺旋轉了一圈，站在了一個新的起點。 ——玉伯《Web 研發模式演變》

傳統WebPage時代，組件化支持程度不高，語言層面和框架層面上都是如此，想想沒有原生不支持模組的JS（ES6之前的時代）和jQuery，所以為了避免增加維護成本，推崇三層分離的最佳實踐。隨著ES6與前端MV*框架的崛起，整個的前端開發模式都改變了。你會發現前端不只是寫頁面了，寫的更多的是WebApp，應用程式的規模和複雜程度與WebPage時代不可同日而語。

React就是其中極為典型的代表，它提出用JSX來寫HTML，直接是將頁面結構和頁面邏輯寫在了一塊。這若放在WebPage時代，相信直接被當作反模式的典型教材；但在WebApp時代卻被大多數人接受並使用。包括React團隊提出的CSS in JS，更是想透過把CSS寫在JS中，使得前端開發完全由JS主導，組件化做的更加徹底（CSS in JS我沒有做更深的調查和理解，沒有實際大型專案的實務經驗，所以現在我還是保持觀望態度，繼續沿用之前的SASS和LESS來做CSS開發）。

儘管兩個Web時代的開發模式發生了巨大變化，關於三層的鬆散耦合設計，還是有一些通用原則你需要遵守：

將JS從CSS中抽離。早期的IE8和更早版本的瀏覽器中允許在CSS中寫JS（不寫例子，這是反模式，記不住更好），這會帶來性能底下的問題，更可怕的是後期難以維護。不過我相信在座各位估計都接觸不到這類代碼了，也好。

將CSS從JS抽離。不是說不能再JS中修改CSS，是不允許你直接去改樣式，而是透過修改類別來間接的修改樣式。請參閱如下範例：

// 不好的写法element.style.color = 'red';
element.style.left = '10px';
element.style.top = '100px';
element.style.visibility = 'visible';// 好的写法.reveal {  color: red;
  left: 10px;
  top: 100px;
  visibility: visible;
}
element.classList.add('.reveal');

由於CSS的className可以成為CSS和JS之間通訊的橋樑。在頁面的生命週期中, JS可以隨意新增和刪除元素的className。而className所定義的樣式則在CSS程式碼之中。任何時刻,CSS中的樣式都是可以修改的而不必更新JS。 JS不應直接操作樣式，以便保持和CSS的鬆散耦合。

有一個使用style屬性的情況是可以接受的：當你需要給頁面中的元素會作定位，使其相對於另一個元素或整個頁面重新定位。這種計算是無法在CSS中完成的，因此這時是可以使用style.top、style.left、style.bottom和style.rght來正確定位元素的。在CSS中定義這個元素的預設屬性，而在 Javascript中修改這些預設值。

鑑於現在前端已經將HTML和JS寫在一塊的現狀，我就不談原書中如何將兩者分開的實踐了。但是，我說了這麼多廢話，請記住一點：「可預見性」(Predictability)會帶來更快的遇試和開發，並確信（而非猜測）從何入手調試bug，這會讓問題解決得更快、程式碼整體品質更高。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何利用JS做出引用傳遞與值傳遞

#如何做出node.js介面

#

以上是web開發中UI層的鬆散耦合的詳細內容。更多資訊請關注PHP中文網其他相關文章！