[轉貼] 活用HTML Custom Attributes

2012031211:58

出處:http://www.dotblogs.com.tw/code6421/archive/2009/08/14/10050.aspx

/黃忠成
 
 
 
   近年來,在協助多家企業進行ASP.NET專案期間,我撰寫ASP.NET應用程式的風格有了相當大的轉變,以往,我總是以元件為出發點,
提供客戶簡單、易用的元件來解決他們的問題,效果雖然不錯,但對於技術能力較為不足的程式設計師來說,使用元件固然不成問題,
但了解元件的內部、進而掌握她們就有些困難了。
   因此,我開始使用一種由來已久的技術,那就是HTML Custom Attributes
 
 
什麼是HTML Custom Attributes
 
  如你所知,在HTML規格中,每個Element都擁有一些Attributes,例如下方的文字輸入框:
 
<inputname="TextBox1" type="text" id="TextBox1" />
 
其中的typeidname就是AttributesHTML解譯器透過解譯這些Attributes,來決定該如何呈現這個HTML Element。很幸運的,
這些Attributes並非固定不變,設計師們可以透過自定Attributes,將一些資訊一併放到HTML Element中,爾後透過Java Script來取得這些值,
進行相對的處理,下面就是這樣一個例子。
 
HTML
<inputname="TextBox1" type="text" id="TextBox1" msg="test" onblur="Test(this)" />
.js
function Test(sender)
{
   alert(sender.getAttribute('msg'));
}
  
   那這有什麼用呢?不就是將一個特定資訊綁在一個HTML Element上而已嗎?是的,乍看之下的確如此,但是若善用此手法,
我們可以簡化網頁設計工作,將常用的功能撰寫成JavaScript Library,然後透過辨識Attribute的手法,自動的幫設計師完成該做的工作。
接下來我們就以驗證使用者輸入的編號是否重複為例,明確的指出HTML Custom Attributes如何簡化及讓我們的程式碼更加易於閱讀。
 
 
 
驗證編號
 
 
     驗證使用者輸入的編號是否重複,是多數網頁都需要的步驟,這常用於驗證帳號、驗證客戶編號等功能上。使用者所輸入的資料必須
送回伺服器端,然後由資料庫查詢輸入資料是否重複,在以往,我們多半會選擇以下幾種方法來實作;
 
  •  使用TextBoxTextChanged事件搭配AutoPostBack
  •  使用UpdatePanel搭配TextChanged事件及AutoPostBack
  •  使用AJAX Service Methods,於TextBoxonblur事件回呼伺服器端的Service Methods或是PageMethods
 
     這三種方法都可以達到預期的效果,第一種是最簡單、但也是最沒有效率的做法,因為TextChanged加上AutoPostBack後,
會引發網頁的刷新動作,在現在這個AJAX盛行的年代,我想已經不會有人再選用這種方法了。
 
     第二種稍微好些,不會引起明顯的網頁刷新動作,但我想你也明白,刷新動作依舊存在,只要有PostBack,就會有一定量的封包送往後端,
唯一不同的是使用者沒感覺到罷了,所以這種方式雖然比第一種好,但也沒好多少。
 
     第三種是目前最建議的做法,這種方式既不會像方法一般引發明顯的網頁刷新動作,也不會像方法二般送出不必要的網路封包,
缺點是寫起來不太容易,下面是這樣的例子。


......略

 
 
後記
 
     當然,這些例子仍有許多改善空間,本文的目的僅是告知各位讀者,HTML Custom Attrbiutes有許多可利用的空間,透過她們再搭配上掃描整個HTML Tree
可以讓設計師設幾個Attribute後,就達到意想不到的效果。唯一需注意的是,取Attribute名稱時要特別小心,別與原來的名稱相同,也得避免未來的HTML規格
與你的Attribute重複,當然!HTML已經停在5.0草案很久就是了。
 
 
範例下載