2008-05-04

好用的 lex 詞彙解析語言

lex 這個語言是我在二技時學會的,這原本是用來開發編譯器的語言,但他對於詞彙解析有很強的能力,而且不需要寫太多的程式碼就可以做到很大的能力,用來處理一些有規則文檔的是輕而一舉的事。

其實 lex 的語法就是『正規表示式』所組成的,所以撰寫上花的腦筋跟測試會比寫程式碼來的多,雖然很好用,但在想解析的規則時卻不是那麼快樂。

lex 是 base 在 C 上面的語言,除了解析的規則外,其他都是屬於 C 語言的撰寫,所以基本上還必須會寫 C,而且 C 的文字處理函數卻不怎麼好用。


lex&yacc
以入門書來說這本寫的真是不錯,除了語法上都講解得很清楚,還有有很多教學範例。
相關連結:Yacc 与 Lex 快速入门

在 IE 中對表格的操作問題(innerHTML,style)

問題1:在對以存在的表格用 innerHTML 新增列或其他 DOM 子節點時,會發生錯誤或警告,或者是完全沒反應。

table.innerHTML+="<tr><td>test</td></tr>";


解決方法:採用 createElement 去建立 DOM 物件,再用 insertBefore 插入新的子節點。

var tdObj=document.createElement('td');
trObj.appendChild(document.createTextNode("test"));

var trObj=document.createElement('tr');
trObj.insertBefore(tdObj);

table.insertBefore(trObj);


問題2:在現存表格中的子節點(tr,td)作 style 操作時,完全沒反應的現象。

tr.style.display="none";
td.style.display="none";


解決方法:利用 className 去套用以設定好的樣式。

table .hide{ display : none; }

tr.className="hide";
td.className="hide";


目前我只在 IE 上遇到這些問題,Firefox 則不會有這樣的問題,可能是 IE 對 table 的 DOM 解析比較特別,其他的 DOM 物件都不會有類似的狀況。
2008-05-03

JavaScript 效率優化

最近開始重視 JavaScript 的效率問題,原因在於感到自己寫的網頁越來越不流暢,其中大量的計算跟無法避免的迴圈愈來愈多,加上 UI 介面跟動態效果的需要,使得瀏覽器的負荷過大,所以這是個需要重視的問題,這直接的影響網站名聲的好壞。

要如何作效率優化呢?因為 JavaScript 是直譯語言,無法透過編譯器加以優化,所以只能從撰寫方式下手。

下面有一個效率很差的例子:
for (var i=0; i<data.length; i++) {
    document.getElementById("link").innerHTML += data[i];
    document.getElementById("link").hreh += "&" + data[i];
    document.getElementById("link").title += data[i] + ",";
    document.getElementById("link").className += data[i] + " ";
    document.getElementById("link").name += data[i] + "_";
}


當中有幾個影響效率的問題:
  1. 過渡的使用 getElementById 搜尋 DOM 物件,尤其是在 for 迴圈中
  2. 大量的存取 length、innerHTML 等成員變數
  3. 多次的存取 data[i],這跟上一個差不多



這些問題的修改方法:
/*利用暫存變數作處理*/
var temp1='', temp2='', temp3='', temp4='', temp5='';

/*利用 l 紀錄 length 的值,以避免多次存取成員變數*/
for (var i=0,l=data.length; i<l; i++) {
    /*利用 d 紀錄 data[i] 的值,以避免多次存取成員變數*/
    d = data[i];
    temp1 += d;
    temp2 += "&" + d;
    temp3 += d + ",";
    temp4 += d + " ";
    temp5 += d + "_";
}

/*利用暫存變數紀錄 DOM 物件*/
var link = document.getElementById("link");
link.innerHTML += temp1;
link.hreh += temp2;
link.title += temp3;
link.className += temp4;
link.name += temp5;



實驗 1000 筆資料的結果:
第 1 個耗時:5625(msec)
第 2 個耗時:47(msec)
展示(demo)

參考來源:
JavaScript loop performance
随時innerHTMLに書き込んだ場合と一括して書き込んだ場合
innerHTMLとinnerText/textContentの速度比較
getElementByID、変数、withによる参照速度比較
シリアルサーチと正規表現の速度比較

善用 Mootools 的 onComplete 事件

用了 Mootools 那麼久終於有點心得了,尤其是在 Effects 類別庫上,因為之前一直對變換效果的後續處理很困擾,而採用的延遲函數,可是這不是很好的作法,因為 JavaScript 的計時器非常的耗資源,會讓整個網頁的流暢度降低。

而其實在 Effects 都附有 onComplete 事件可以使用,這個事件會在變換效果結束後被呼叫,而且還附帶本身物件(this),利用 firebug 的 console.log() 函數可以直接觀察 this 所帶有的成員參數,這比之前的延遲函數要好多了,而且程式碼也不會那麼多。

其他的類別庫中也有定義或繼承 onComplete 事件,如 Drag、Remote 及 Plugins 中的部分類別都帶有此事件,雖然官方的 docs 沒有寫得很清楚,只寫了繼承的來源及本身帶有的成員函數,有部分的成員變數可能要看原始碼會比較清楚,Mootools 的設計架構其實在撰寫上還蠻具彈性的。
2008-05-02

用 JavaScript 作 HTML 比較(diff)

為了做到文字比較,我利用『最長共同部分序列』(Longest Common Subsequence)演算法,這是屬於動態規劃演算法的一種,特點就是以空間換速度,在比較過程需要 (m+1)*(n+1) 的記憶體空間,效率是 m*n,m 跟 n 的數量取決於文章的長度與切割的大小,我的切割方式是以空白符號及 HTML tag 作分界,對英文的切割有正向的優勢,所以在中文上就有點糟,但因為切割的長度大效率會比較快。
/*切割文字*/
function toReg(str){
    var array = str.match(/<[^>]*>|[^< ,.\r\n\t]+[ ,.\r\n\t]*/ig);
    result = [];
    for(var i = 0, l = array.length; i < l; i++) {
        if(array[i].charAt(0) == '<') {
            temp = array[i].match(/[^<][^> ]*/i);
            result[i] = {
                txt: array[i],
                tag: temp
            };
        }else{
            result[i] = {
                txt: array[i],
                tag: false
            };
        }
    }
    return result;
}

/*最長共同部分序列*/
function LCS(na, oa){
    var m = na.length, n = oa.length;
    var i, j;
    var d = [];

    /*Dynamic*/
    for(i = 0; i <= m; i++) {
        d[i] = [];
        d[i][0] = 0;
    }
    for(j = 1; j <= n; j++) {
        d[0][j] = 0;
    }

    /*動態規劃演算法*/
    for(i = 1; i <= m; i++) {
        for(j = 1; j <= n; j++) {
            if(na[i - 1].txt == oa[j - 1].txt) {
                d[i][j] = d[i - 1][j - 1] + 1;
            }else if(na[i - 1].tag && na[i - 1].tag==oa[j - 1].tag) {
                d[i][j] = d[i - 1][j - 1] + 1;
            }else if (d[i][j - 1] > d[i - 1][j]) {
                d[i][j] = d[i][j - 1];
            }else {
                d[i][j] = d[i - 1][j];
            }
        }
    }

    /*標註共同部分序列*/
    i = m;
    j = n;
    while (i > 0 && j > 0) {
        if(d[i][j] == d[i - 1][j]) {
            i--;
        }else if(d[i][j] == d[i][j - 1]) {
            j--;
        }else{
            i--;
            j--;
            na[i].com = j;
            oa[j].com = i;
        }
    }
    delete d;
}

/*合併比較陣列*/
function merge(na, oa){
    var m = na.length, n = oa.length;
    var result = [];
    if(!m && !n) { return null; }

    var i;
    var oldPrint = 0;
    for(i = 0; i < m; i++) {
        /*有共同的資料*/
        if(na[i].com != undefined) {
            /*有刪除的舊資料*/
            if(na[i].com > oldPrint) {
                var maxRow=(na[i].com < n) ? na[i].com : n;
                for(j = oldPrint; j < maxRow; j++) {
                    if(oa[j].tag) {
                        result.push(oa[j].txt);
                    }else{
                        result.push('<del>' + oa[j].txt + '</del>');
                    }
                }
            }
            /*記錄下一次舊資料的指標*/
            oldPrint = na[i].com + 1;
            /*儲存共同的資料*/
            result.push(na[i].txt);

        /*新的差異資料*/
        }else{
            if(na[i].tag) {
                result.push(na[i].txt);
            }else{
                result.push('<ins>' + na[i].txt + '</ins>');
            }
        }
    }
    return result;
}

展示(demo)
2008-05-01

在 IE 中對 window.open (子視窗)的參數傳遞

由於子視窗和母視窗是使用不同的 document,在 IE 的架構上不可以對母視窗作 call by reference,要先將要用的值設定給母視窗的變數,再作函數呼叫,在 JavaScript 中字串的屬性是一般變數值,不會有 reference 的現象。

//要回傳的陣列
var selData=["A","B","C","D"];

//清空母視窗的陣列,將陣列長度設為零
window.opener.resultArray.length = 0;

//將參數值填入母視窗的陣列中
for(i=0,l=selData.length; i<l; i++){
    window.opener.resultArray.push(selData[i]);
}


參考來源:請問子母視窗如何傳遞變數


結論:IE 真的很麻煩!難道不可以允許符合邏輯的語法嗎?