好用的 lex 詞彙解析語言

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

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

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



以入門書來說這本寫的真是不錯，除了語法上都講解得很清楚，還有有很多教學範例。
相關連結：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 物件都不會有類似的狀況。

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 的設計架構其實在撰寫上還蠻具彈性的。

用 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)

在 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 真的很麻煩！難道不可以允許符合邏輯的語法嗎？