Web Page裡的三個維度


看完這段介紹”什麼是Front-end Engineer及其重要性”的影片後,裡面有講到一些Web Page設計上的重點,在此記錄一下以免忘記。


Nate Koechley: "Professional Frontend Engineering" @ Yahoo! Video

一般的Web Page都會包含HTML, CSS, JavaScript三個部份。彼此之間有些角色定位模糊的地方,究竟該怎麼切分工呢? 請看以下定義:

HTML – what

定義頁面的內容(Content)。Developer應該要避免使用過多的div或span,取而代之的,應該使用更有意義的tag去包裝。而一個好的設計,應該儘量避免在HTML裡寫JavaScript或CSS style的code,降低藕合度,可以增加程式的可維護性(maintainability)。

不好的寫法範例:
<a href=”test.html” onclick=”javascript:onClick(this);”>

上面這段code可以改用JavaScript動態綁定element event handler來達成

CSS – how

決定頁面文容該如何呈現(Appearance)。在不同Browser的呈現結果可能會相差很多,因此,Developer一定要在欲支援的Browser平台上實際測試過。通常IE系列的Browser會跟其它(Firefox, Chrome, Safari, Opera…etc.)差很多… :evil:

JavaScript – why

定義頁面的行為(Behavior)。例用動態綁定event去處理各種element UI行為,並且使用物件導向的設計,使程式碼更好維護與修改。儘量避免在JavaScript code裡去寫HTML或CSS Style的code,降低藕合度,可以增加程式的可維護性(maintainability)。有關物件導向的JavaScript設計,可以參考這幾篇:
http://msdn.microsoft.com/zh-tw/magazine/cc163419.aspx
http://fstoke.me/blog/?page_id=1610

Tags: , , , ,

Leave a Reply