2008-08-20

Ajax 模組架構的應用

Ajax 模組架構的應用
一樣的就之前所提到的問題(Ajax 開發所產生的問題),這是另一種以模組架構為基礎的方法,模組開發的好處我就不多作說明了,主要的行為模式是:
  1. 在請求 Page 時就先將 Module Include,讓頁面再第一次讀取時就可以完整呈現。
  2. 在頁面需要執行局部置換時,再利用 Ajax 向 Module 請求局部內容。

這樣做既不會失去模組開發的優點,也不會有 Ajax 造成的過長等待,讓 Ajax 主要應用在局部置換及 UI 處理。
2008-08-19

利用屏壁來延長頁面的呈現時間

就之前提到的問題(Ajax 開發所產生的問題),這很可能連帶出現以下問題:
  1. 瀏覽者再頁面尚未完整呈現時誤觸連結,造成錯誤操作。
  2. 功能的初始未完成,瀏覽者再使用上出現無法動作的錯愕情形。


這些問題可以用一個有效的方法去延長瀏覽者的等待時間,在一開始的頁面裡預設疊上一個遮蓋整個頁面的等待圖示,在 JavaScript 處理完後再移出屏壁,一個很好的範例就是 Gmail,再一個主要的頁面呈現前,置入一個等待圖示去避免一些可能的不當操作。

順帶一提,Gmail 利用 ifreme 去做出局部置換的效果,這樣做的好處是,瀏覽器會自動去紀錄上下頁,在 Ajax 的應用上瀏覽紀錄這件事是必須額外處理的。
2008-08-18

利用 Ajax 減少 Server 運算量

在 Ajax 還沒有出現時 JavaScript 本身就可以執行許多計算方面的程式了,像之前的文章『HTML 比較(diff)』、『數獨(sudoku)解題』、『線性代數-計算機』等都是利用 JavaScript 去達成的計算程式,象 Yahoo 也有在 Login 時利用 JavaScript 做 md5 的計算,其實瀏覽器還是可以做一些有規模的運算。

利用 Ajax 減少 Server 運算量

主要是將運算資料取回,計算結果明細後,再跟 Server 取得剩餘的詳細資料,這個架構可以讓 Server 原本的運算量轉由瀏覽器執行,是一個以空間換時間的作法,當然有一好沒兩好,沒錯這樣的方法明顯會發生之前所說的問題(Ajax 開發所產生的問題),是否要用這個方法就看各位的考量了。

其中特別要注意的一些事項:
  1. 再資訊必須是即時性,且運算量大於一定時間以上時,考慮這種架構才會有意義,要不然只會浪費頻寬。
  2. 資料安全性問題,必須定義哪些瀏覽者可以取得計算資料,要不然會造成嚴重的漏洞。
  3. 資料量的大小,太大的資料可能會造成瀏覽器整個當掉,再規劃時要特別注意最大上限,至於詳細的範圍要依瀏覽者的設備而定。
2008-08-16

利用 Plugin 的架構做模組應用


這是我很久之前在開發所有的類別架構,主要是以 MoreModile 類別為主作延伸應用,這個繼承方式並不是一個很好架構,因為 Base 的 MoreModile 常常會有異動的可能,而且子類別也不是完全以父類別為基礎,有時候只需要部份的成員函數,這樣的架構在之前的開發上變得綁手綁腳,怕改錯一個東西造成其他的類別也受到牽連。


後來想到這樣的開發架構,由一個主要的 DataLoad 類別負責整體的處理,再選擇需要 Plugin 那些 Module,這個方法讓架構變得更有彈性,且整體的牽連性也不至於像之前那麼嚴重,而且還有預留一個 Plugin 的虛擬類別,提供額外的修改空間,再實行的過程中也明顯的加快日後的開發速度。


這是目前的類別架構圖,每一個新類別都可以選擇所需的 Module,或者實作一個特定需求的虛擬類別,讓基礎類別有更多的應用,且實作上也具有很高的彈性。
這樣的架構並不是一個標準的類別繼承架構,正常來說應該利用成員物件的方式去執行 Plugin 這樣的架構,但可惡的是 JavaScript 有一個麻煩的事件問題,物件再做事件整合上其實並不是那麼快樂,常常會因為參數的傳遞及 this 的處理造成不少困境,所以使用標準架構只會讓開發更複雜。
2008-08-15

CSS 與 HTML 規劃心得檢討

由於所開發的系統愈來愈大,免不了開始出現一些排版上的問題,對於目前的狀況做了一些整理:
每加入一個新功能就建立一個新樣式,造成過多獨立應用的樣式。
再新功能規劃時,可多考慮使用舊有的樣式。
HTML 在的設計上過於精簡缺乏彈性及流通性。
在結構上的規劃時多考慮多變應用以增加日後應用上的彈性。
類似的樣式過多沒有統一的規劃。
再設計多預想未來的應用,增加樣式重複利用的可能性。
過度使用已 Tag 為主的選擇器,造成過度的樣式覆寫。
在較複雜的樣式區塊中,先做分割規劃出許多小區塊,簡化樣式選擇器的深度。
ID 與 Class 命名沒有規範清楚,造成樣式與功能上的混淆。
排版與樣式沒有分離,造成管理不易。
對於排版的寬度定義不明確,造成異常 overflow 跑版。

主要的問題還是出在一致性的樣式共用與命名規則的問題上,在開發的過程中沒有謹慎規劃,對於未來可能的應用也許要考慮進去,避免重複定義相似的樣式。
2008-08-14

Ajax 開發所產生的問題

wacanai 的開發中發現了一個問題,就是在頁面載入後又開始執行多個 Ajax 請求,這會發生什麼現象呢?頁面一開始會空空的,然後資訊開始慢慢的呈現出來,這樣的現象會造成兩種問題:
  1. Server 在同一時間會有來自單一位址的大量請求
  2. 使用者的等待時間變長

第一個問題會使 Server 連接端口的負荷增加,雖然在流量上並沒有很大的區別,但卻會考驗 Server 的硬體資源。

第二個問題是使用者必須等待所有 Ajax 回應後才能看到完整的頁面資訊,而且會因為使用者的頻寬成倍數關係。

Ajax 開發所產生的問題

我們會發生這樣的問題,來自於過度使用以 Ajax 為基礎的模組架構,將一些沒必要利用 Ajax 處理的應用,也使用 Ajax 來呈現,Ajax 原先是用來優化呈現上的局部置換,及增加與使用者互動的應用介面,主要是用來避免重新載入已有的資訊,並讓頁面可以有更好的介面輔助,但在習慣 Ajax 的架構時,不知不覺就習慣利用這個架構去作模組的規劃。

所以再利用 Ajax 作開發時,必須考慮到 Ajax 主要的應用目的,不然在過度不當採用這個應用時,會造成更多的問題存在。
2008-08-09

vimrc - VIM 的設定檔

vim 是什麼? Linux 下的老牌文字編輯器,詳細說明請看Wikipedia-vim

/etc/vim/vimrc 中的常用設定

set nu "顯示行號
set tabstop=4 "Tab 的空白數
set hls "加亮搜尋到的關鍵字
set cursorline "標註顏色至游標整行
syntax on "開啟語法加亮


" 選擇語法加亮的配色,配色檔目錄(/usr/share/vim/vim72/colors)
"colorscheme blue
"colorscheme darkblue
colorscheme default
"colorscheme delek
"colorscheme desert
"colorscheme elflord
"colorscheme evening
"colorscheme koehler
"colorscheme morning
"colorscheme murphy
"colorscheme pablo
"colorscheme peachpuff
"colorscheme ron
"colorscheme shine
"colorscheme slate
"colorscheme torte
"colorscheme zellner



" gVim UTF-8 支援設定
set fileencodings=utf-8,big5,euc-jp,gbk,euc-kr,utf-bom,iso8859-1
"set encoding=utf8 "不設定 menu bar 就不會變亂碼.
set tenc=utf8


if has("gui_running")
set termencoding=utf-8
else
set termencoding=big5
endif


參考來源:
gvim編UTF-8的文件
2008-08-08

ASUS P5K SE/EPU 音效卡驅動程式安裝

之前買新電腦時,為了音效卡一直裝不起來,弄了很久,最後終於找到有效的解決辦法了,怕以後會忘記先記下來。

原文出處

  1. 請先確認您的作業系統是否已包含 WinXP SP1或 SP2?
  2. 確認裝置管理員內的系統裝置底下有無“Microsoft UAA Bus Driver for High Definition Audio”? 若沒有此裝置,請執行 KB888111xpsp1.exe(使用SP1)或 KB888111xpsp2.exe(使用SP2)
  3. “Microsoft UAA Bus Driver for High Definition Audio”已正常驅動,在「音效,視訊及遊戲控制器」底下應該會有一個Audio Device on High Definition Audio Bus 或無法辨識的裝置。請將此裝置【停用】。 若無Audio Device on High Definition Audio Bus 或無法辨識的裝置在裡面可直接跳過此步驟
  4. 接著再將系統裝置底下的 Microsoft UAA Bus Driver for High Definition Audio 【停用】
  5. Microsoft UAA Bus Driver for High Definition Audio【解除安裝】
  6. 做好上述動作後,請在裝置管理員畫面『檢視』的下方按下【硬體變更掃描】的圖示。
  7. 此時會出現新增硬體精靈,請注意勿按下下一步,只需按下『取消』,再進驅動程式光碟片或是網站上下載下來的音效驅動內執行Setup.exe即可完整安裝音效驅動程式

PS:上述的安裝軟體在光碟或官方的安裝包都有