Web前端開發解耦1

標籤：ack   元素   之間   建設   css   html   例子   前端開發   對話方塊   

 

在網站建設的工作中，Web前端工程師佔據著非常重要的位置，好的前端工程師保證了良好的網站最佳化以及友好的使用者體驗。今天佚站互聯主要分享一下對於Web前端開發規範的一些見解。

學過物件導向編程的朋友應該都知道，好的代碼應當講究兩個標準：代碼結構間高彙總、低耦合的關係，關於彙總我們暫不展開，在這裡主要分享解耦在Web前端開發中的具體應用，希望對感興趣的朋友有所協助。

眾所周知，前端開發過程中不可避免地要接觸三樣代碼，它們分別是HTML、CSS、JavaScript（以下簡稱JS），在筆者的學習與開發過程中發現，很多人對於這三種代碼的使用並不特別規範，往往是想到什麼用什麼，不規範代碼帶來的後果就是對於團隊合作開發非常不友好，並且在後期的擴充維護中帶來很多不必要的麻煩。如何更規範地編寫相應代碼，做到邏輯、結構與表現形式之間的解耦，這是前端代碼師應該掌握的一項技能。

三樣代碼各司其職

按照自身分工來看，HTML代碼掌管前台整體的文檔結構與內容，以造樓為例，HTML就是整個頁面的鋼筋水泥，頁面上有幾個模組，每個模組布局如何，有什麼內容，都應該由HTML來主管，很久以前的Web開發主要使用Table進行布局，但是到了Web2.0之後，越來越多的人喜歡用DIV進行布局，不管使用哪種HTML元素，都沒有離開它的本質。所以，HTML應該是掌管頁面文檔結構與內容的一類代碼。

CSS的學名是“層疊樣式表”，顧名思義，它應該是主管樣式的，就如整個頁面哪裡應該是什麼顏色，放什麼背景，多大的字型等等，它不應該涉及到任何的邏輯與頁面結構內容。所以，CSS應該是掌管頁面樣式的一類代碼。

JS是非常靈活輕巧的物件導向指令碼語言，如果以樓房為例，它就好比是牆上的開關，按下它應該做什麼操作，是亮燈還是做其他事情，如果是亮燈那它亮的是哪盞燈。放在Web前端開發中來說，比如點擊某個按鈕應該觸發什麼事件，是彈出對話方塊還是提交表單，是變換樣式還是移動位置，這都是JS需要考慮的，與另外兩種代碼無關，換句話說，JS在Web前端開發中的角色就是掌管邏輯的。

綜上所述，在Web前端開發中，HTML是主管頁面文檔結構與內容的、CSS是主管頁面元素樣式表現的、JavaScript是主管互動邏輯的。

具體執行個體分析

在上面部分我們分析了這三類代碼在Web前端開發中所扮演的角色與所擔任的職責，那麼具體應該怎麼使用呢？ 

我們以最簡單的DIV變化為例，為了編寫方便，這裡引入jQuery。

案例說明：點擊一個黑底白字內容為“Demo”的DIV，將DIV變為紅底黑字，內容變為“Hello Benz”。 

 

沒有解耦的代碼編寫：

HTML代碼：

     <div id="demo">Demo</demo>

CSS代碼：     

     #demo {          width:200px;          height:50px;          color: white;          background: black;     }

jQuery代碼：

     $(document).ready(function() {           $("#demo").click(function() {               $(this).css({                    "color" : "black",                    "background" : "red"                })               .text("Hello Benz");          });     });

案例分析：

上面的例子非常簡單，這也是很多人喜歡用的編寫方式，因為方便快捷，但是卻並不太符合解耦思想。

問題主要的原因在於JS，很多人為了圖方便，把很多文檔結構內容以及CSS樣式都寫在了JS中，對於這種寫法，筆者認為欠妥，因為JS是主管邏輯的，不應該把文檔結構內容以及樣式表現這些職責都強加於它。

 

解耦的代碼編寫：

HTML代碼：

     <div id="demo" data-changed="Hello Benz">Demo</demo>

CSS代碼：

     #demo {          width:200px;          height:50px;          color: white;          background: black;     }

      #demo.changed {          color: black;          background: red;     }

jQuery代碼：

     $(document).ready(function() {          $("#demo").click(function() {               var dataChanged = $(this).attr("data-changed");               $(this).addClass("changed")                        .text(dataChanged);           });     });

案例分析：

在這個修改過的代碼中我們可以發現，三種代碼之間的關係非常清晰。 

1.HTML主管文檔結構（點擊DIV後變成的內容為“Hello Benz”），將文檔結構內容放在自訂屬性“data-changed”裡，方便JS擷取。

2.定義了新的樣式changed，在點擊DIV後DIV將會變化成怎樣都由CSS來決定。

3.JS只負責“點擊DIV後DIV的樣式變成changed，文檔結構內容變成data-changed”這兩個邏輯，至於變成怎樣，內容如何，JS一概不參與。

 

這樣解耦的好處在於，如果你想要對某個特定互動樣式或者內容進行修改，你不必在JS中苦苦尋找，只需要知道修改哪個樣式，修改哪個文檔結構內容，就能迅速完成。如果你想要修改這個互動的邏輯，你只需要對JS的邏輯進行修改，不會對文檔結構內容以及樣式有任何影響。

Web前端開發解耦1