電波幻想

發想來自我接觸最久的程式語言 Powerbuilder，說真的跳通到其他語言時，會非常懷念它的DataWindow 物件。原因不外乎，它讓資料操作變得很簡單，甚至讓程式設計師變懶了。 但如果開始使用其他語言時，例如現在幾乎都要用網頁來工作，就發現網頁要操作資料真的不是那麼容易，尤其使用AJAX技術時，針對頁面的操作，每個工程師寫出來的方式大相逕庭，閱讀理解就變得重重。 有鑑於此，只好將自己理解datawidnow的部份，將其方法(method)實現到javascript裡面來。 盡力讓畫面表單操作變得簡單一些。 這樣的好處是，使用相同套件，程式碼閱讀起來清爽也易懂，比較容易除錯。 下面簡單介紹一下操作原理，與表格架構，DataWindow會用DW簡稱： 1、原則上一個類DW的架構如下： <div id="objid">  <table width="100">   <tr>    <th width="48" cn="field1">欄1標題</th>    <th width="18" cn="field2">欄2標題</th>    <th width="28" cn="field3">欄3標題</th>   </tr>  <table> </div> 這是一個標準table外面包著一個div層，而這個div層的id就是這個datawindow的名稱(datawindow name)，一個DW結構(div)裡面只能有一個table存在。 這個結構很重要，因為接下來所有的操作都會參考這個結構的定義。 2、TH屬性的定義： cn ：欄位名稱，必要的，英數字，其值就是代表了這個欄位的column name。 edit ：編輯模式，選擇性，此屬性表示生成的資料可以編輯，其值(編輯模式)有：text / password / date / ddw / lbox。 key ：關鍵欄，選擇性，其值為yes / no，yes=開啟編

jQuery操作ajax技巧是相當方便的， 但是操作ajax.responseText，不得不注意到同步問題，如下面的例子： var rtxt = $.ajax ({ type: "GET" ,                    url: "empl.cfm" ,                    data: { eno:"A001",                    dept: "A" } ,                    async: true}) .responseText; var msg = eval (rtext).message; alert (msag); 這個是以 jQuery 利用ajax非同步呼叫 empl.cfm 頁面取得人事資料，而該頁面會以 JSON 格式回傳，該格式結構裡面會包含 message 的變數。 這個看似正常的程式碼其實隱含著很大的問題， 測試過程中，當伺服器回應在200ms以內時這個畫面會顯示 msag 內容， 當大於 200ms 就容易出現無反應 ( alert沒有執行 )。 後來反覆檢查的結果，發現原來是 async 參數會作祟，當 async為 true 時，ajax 為非同步運作：請求頁面同時，script 繼續執行並不等待請求回應，由於 responseText 指令在執行時會需要瀏覽器即時編譯，當編譯完成執行時，若請求的頁面已經返回回應資料，則此時會正常的繼續執行，若請求頁面來不及在編譯執行前返回回應資料，則會造成 rtxt 變成 undefined 狀態，使得接下來的 eval(rtext) 也變成 undefined ，如此直接取得結構 .message 時就會導致 javascript 執行錯誤停止。 當然正常的情況可以不要加入 async 屬性，因為其預設值就是 false 狀態。

續上一篇 ， 資料讀取到 Array 以後，偶爾使用者會需要排序這些列表資料， 當然 javascript array 有 sort 這個方法來排序，只是這個排序， 只比較合適於內容值為數值的排序，對於文字的排序就不怎麼靈光，不好用了。 因此 javascript 提供的另外一種排序方式 就比較合適文字/中文的排序方式： //SORT data function sortDW1(field,kind){     dwset.sort(function(a,b){         if (kind=="A"){             return a[field].localeCompare(b[field])         }else{             return b[field].localeCompare(a[field])         };     }); }; 關於 localeCompare 可以參考系列網頁資料： http://www.w3school.com.cn/js/jsref_localeCompare.asp http://www.southmaster.com/article/pub.php?page=red2.php&id=5408