開發 web 桌面類程式幾個必須關注的細節

胡尐睿丶發表於2013-09-17

  HoorayOS 寫了差不多快2年了,在我的堅持下也有一部分人打算著手自己也寫套類似的程式,我想我可以提供一點經驗。

  俗話說細節決定成敗,開發2年多來,我看過大大小小類似的程式不下20個,各有優點也各有缺點。或許是處女座的強迫症導致我不能容忍這些缺點在我的程式上出現,所以一直完善至今。

  以下是我初步整理的幾處容易被忽視的細節:

  一、當瀏覽器改變大小時,桌面圖示無法重新排序

  這個細節相對比較容易被注意,不細說。

  反面教材:http://www.cdesk.org/demo/demo.html

  二、當瀏覽器改變大小時,開啟的視窗無法重新定位

  這個問題會導致你的視窗可能在顯示區域之外,無法進行任何操作,雖然你可以將瀏覽器恢復原先大小,將視窗拖動到適合位置,再改變瀏覽器大小。

  反面教材:http://www.muzilei.com/demo/desktop3.0/index.html

  同樣問題還出現在掛件上,如 Q+web 就有這問題

  反面教材:http://web2.qq.com/webqq.html

  三、通過滑鼠劃取,可以選中文字

  如上圖,就是這種問題,簡單測試方法可以按下 CTRL + A。反面教材:http://www.cdesk.org/demo/demo.html

  四、當桌面圖示過多時,超出置頂顯示區域,被隱藏在外的圖示無法進行操作

  當你解決第一個問題的時候,立馬就會碰到這個極端的情況,你可以強制把瀏覽器縮小到一個極小的視窗測試。

  解決辦法就是增加一個滾動條,或者模擬一個滾動條。反面教材:http://www.a-jie.com/webdesk/default.stm

  五、無法通過點選視窗內部區域進行多個視窗間的置頂切換

  你可以在電腦上開2個視窗,比如2個資料夾,將其重疊,邊角有覆蓋即可,然後分別點選視窗內部(非標題部分),你會發現你點選哪個視窗,哪個視窗就會被置頂到最上面。

  而在 web 端實現這個問題需要一點技巧,因為大部分視窗裡都是放個了 iframe,而 iframe 又是無法獲取到點選事件的,解決辦法就是當視窗處於非置頂時,在iframe上覆蓋一個透明的遮罩層,然後給這個遮罩層繫結點選事件,用來處理置頂效果。

  反面教材:http://32100.net

  六、flash 應用遮罩層無法將其遮罩

  這個問題是隨著上一個問題出現的,如果 iframe 里載入的是一個 flash 程式,因為是第三方的網站,如果沒有做過處理,flash 可能會一直置頂,即使有遮罩層也無法將其覆蓋。

  對於這個問題,技術上無法判斷出 iframe 裡是有有 flash,所以只能人為操作。HoorayOS 的做法是在建立應用的時候需要選擇是否為 flash 應用這一選項,如果選是,則當視窗不處於置頂時,將 iframe 直接隱藏,或者直接移出瀏覽器外面,如設定 left:-9999px

  七、拖動物件時,沒有阻止預設動作,導致拖動出新視窗

  這問題一般容易出現上圖示拖動上,文字連結也會出現這問題。解決辦法很簡單,就是用 preventDefault() 方法。

  反面教材:http://www.a-jie.com/webdesk/default.stm (你可以按住開始按鈕,拖動一下然後放開左鍵)

  八、讓我想一想,就先到這吧

  


 

  本文僅做為技術交流,以上出現的反面教材連結,如有冒犯,還請見諒。

相關文章