灰色後門

相信很多Web開發者都會使用無作用連結做一些項目的設計 例如：<a href="javascript:void(0);" onclick="handler()" > Click me! </a> 設計的原因包含了 link element 的外觀較醒目、預設的mouseover行為的cursor就是pointer等等 你可以注意到其中的href屬性設定了 "javascript:void(0);" href 裡前綴為 javascript: 的內容會被做為 inline javascript call 執行 如此可以避免執行browser的 link element 的頁面跳轉預設行為 void(0); 則表示在JavaScript中什麼也不做 這樣就完成了一個無作用連結 既然 href 可以用來執行JavaScript，當然你也可以用  "javascript : functionA();" 的形式 讓 link element 在被點擊後執行 functionA 聽起來是很方便的做法，既然如此為什麼還會很常聽到不要這樣做的建議? 原因有2點 1是這一段 function 是用eval parse文字後才執行，效率會差一些 當然這個影響並不是那麼大，下一個原因才是重點，也是今天踩到的雷 2.在瀏覽器間的行為並不一致 當使用的function會回傳DOM object，IE會將頁面導到空白頁面並顯示[object HTMLElement]的訊息 而且直到最新的IE11的行為也是如此 這一點算是IE在行為的解讀比較奇怪，都已經是執行JavaScript了卻還保留原本的跳轉頁面行為 所以基於以上理由，少在 link element 的 href 屬性使用 inline JavaScript call 吧

最近處理表單輸入項時，實在厭倦了使用getElementById、getElementsByTagName等DOM方法取得元素 一般的輸入項(input、textArea)還算好處理 只是碰上了radio button或checkbox這類群組型的輸入項還是比較麻煩 後來想一想應該有更優雅的方式能處理取得表單輸入項的元素或值才對 所以就找到了用HTML Collection的解決法

其實寫這一篇主要是為了下一篇文章鋪梗 在DOM中取得的HTML element 集合有兩種型別 - HTMLCollection、NodeList 雖然不能使用陣列型別的method，但這兩種型別都可以用陣列索引的方式存取內容 那為什麼會有這兩種型別的實作呢?

last update:2015/02/10 前一陣子在忙的整合，只是因為很懶才現在寫出來 老實說也是近期我才知道NAS這東西究竟能做什麼 剛好有一家客戶是用Synology的產品跑Ragic 而QNAP也找上門來談合作 這樣就把台灣前兩大的NAS廠的東西都摸過啦(註：也是世界前兩大) 我個人認為NAS適用於完全都不懂的新手或玩Linux及程式很熟的IT使用者 新手就不用考慮有的沒的需求，看平台提供什麼樣的服務就使用那些服務 如果想藉NAS做到特定需求，得要有些能力才能夠建置完成 對於這兩家的NAS硬體部分沒有研究，這部分就不提 以目前接觸過這兩家的產品的軟體面來說，我覺得QNAP的方向是對的 而QPKG就是把各家程式包裝成QNAP自家格式的 App 讓使用者能夠輕易安裝 他們的介面對於一般使用者會是比較親切的作法

這篇來提一個設計上的易用性的小技巧，來自前幾天看到的討論 常見到一個需求是，你會想在選項裡增加提示字眼(例如：請選取選項)，但又不是真的想讓使用者選取它 這算是在小地方對使用者更貼心的技巧，那麼要如何達成呢? 先從傳統的透過HTML找看看有沒有方法可以達成，印象中optgroup這個tag似乎有可能? 選項1 code: <select name="demo">     <optgroup label='請輸入選項'>         <option value="1">選項1</option>     </optgroup> </select> 雖然的確有可以提示的部分，但是否符合需求就見仁見智了 第二種方式是透過selected屬性與disabled屬性並用 請輸入選項 選項1 code: <select name="demo">     <option selected disabled>請輸入選項</option>     <option value="1">選項1</option> </select> 選項的預設值透過selected屬性解決，而disabled屬性則會在進行選取時發揮作用 看起來是不錯的方法，只是我在後面有看到一個我更喜歡的方式 第三種方式是透過CSS輔助 請輸入選項 選項1 code: <select name="demo">     <option selected style="display: none;">請輸入選項</option>     <option value="1">選項1</option> </select> display: none;會在選取時發揮作用，讓選單裡乾脆不出現這個選項 目前就看到這幾種方式，設計時可以考慮使用來增加易用性

這本書寫的時間點比較早 而最近幾年的browser和網路建設更是日新月異 有些內容可能已經不大適用，不過裡面的多數準則依然可以遵守 一部分的內容在blog其它文章提過了，就不寫在這裡了 追求效率的重點之一便是提高檔案的下載、重繪(render)等處理的效率 很多技巧都是為了追求這個要點而發展出來的