[Javascript] 實作熱鍵(HotKey)共用程式，以Konami(上上下下左右左右BA)為例

/*
不曉得有沒有人想過像 Konami 那種，按 "上上下下左右左右BA" 後，
會觸發某些事件的功能，如何撰寫，以下是我的實作，除了特定的 Konami 按鍵外，
也允許自訂自己的按鍵事件序列的測試方法，
整個程式的概念，是註冊 document 的 keyup 事件，並紀錄下最近 10 次的按鍵內容，
並提供一個 RegisterTest 方法，由註冊者自行決定目前按下的按鍵是否符合觸發的條件，
若符合要觸發什麼事件； RegisterTest 會先把這兩個 function 紀錄下來，
等到畫面上的 kepup 事件產生時，逐一呼叫 testFun ， testFun 回傳 true ，
就呼叫 triggerFun 執行當初註冊的觸發事件。
這個程式需要 jQuery ，
另外這個陽春的版本不提供組合鍵的處理，當然稍微修改一下也可以支援組合鍵。
*/
var HotKeyControler = {
    MAX_QUEUE: 10, /* 保留最後 10 個鍵盤事件 */
    testFuns: new Object(),
    triggerFuns: new Object(),
    KeyQueue: new Array,
    Keyup: function(event) {
        HotKeyControler.KeyQueue.push(event.keyCode);
        if (HotKeyControler.KeyQueue.length > HotKeyControler.MAX_QUEUE) {
            HotKeyControler.KeyQueue.shift();
        }
        for (var key in HotKeyControler.testFuns) {
            if (HotKeyControler.testFuns[key](event,  HotKeyControler.KeyQueue)) {
                HotKeyControler.triggerFuns[key]();
            }
        }
    },
   /*  函數名稱：註冊熱鍵
    *  參數說明：(唯一鍵值, 測試function, 觸發function)
    *  說   明：提供註冊熱鍵的方法，提供目前畫面被按下的按鍵佇列，供AP自行判斷是否觸發執行事件
    */
    RegisterTest: function(key, testFun, triggerFun) {
        if (typeof(testFun)=='function' && typeof(triggerFun)=='function') {
            HotKeyControler.testFuns[key] = testFun;
            HotKeyControler.triggerFuns[key] = triggerFun;
        }
    }
}

$(document).ready(function(){    
    $(document).unbind("keyup",HotKeyControler.Keyup);
    $(document).bind("keyup",HotKeyControler.Keyup);
});

/* DEMO 註冊當按下 Konami(上上下下左右左右BA)時要觸發的事件 */
HotKeyControler.RegisterTest("Konami"
    ,function(event,code) { /* 上上下下左右左右BA */
        if (code.length!=10) return false;
        if (code[0]==38 && code[1]==38 && code[2]==40 && code[3]==40 &&
            code[4]==37 && code[5]==39 && code[6]==37 && code[7]==39 &&
            code[8]==66 && code[9]==65) {
            return true;
        }
        return false;
    }
    ,function() {
        alert('上上下下左右左右BA!!!');
    }
);

[RegExp] 正規表示式(Regular Expression) 應用(一)

網路上有 一大堆 關於 Regular Expression (正規表示式)，寫得很棒的文章，
所以這裡並不特別介紹，因為怎麼寫也沒有比別人寫得好，
因此我主要的目的是應用的分享，所謂師傅領進門，修行靠個人，
這篇就是把小弟個人的修行成果做個紀錄，
以後就不定期來更新，

HTML DOM Style 物件擁有很多屬性，
我們可以直接用 element.style[styleProperty] 去存取他們，
偏偏有些舊 IE 時代的程式會這麼寫：

element.style.getAttribute(styleProperty);
element.style.setAttribute(styleProperty, value);

糟糕的是，其它的 browser 不甩這種寫法，而是要這麼寫

element.style.getPropertyValue(style-property)
element.style.setProperty(style-property, value)

更慘的是，新舊參雜的風格時，有大量的程式需要調整、測試，在不動舊程式的情況下，
我們希望在其他瀏覽器下模擬出 style.get/setAttribute 的行為，
於是我這麼做：

if (typeof (CSSStyleDeclaration.prototype.getAttribute) == "undefined") {
    CSSStyleDeclaration.prototype.getAttribute = function (propName) {
        return this.getPropertyValue(Me._changePropName(propName));
    }
}
if (typeof (CSSStyleDeclaration.prototype.setAttribute) == "undefined") {
    CSSStyleDeclaration.prototype.setAttribute = function (propName, value) {
        this.setProperty(Me._changePropName(propName), value);
    }
}

但這卻遇到一個問題，當用 get/set Property 時， propertyName 格式是和 CSS 一樣，

中間用 "-" 分隔，但 IE get/set Attribute 的寫法則是第二個字的字首字母大寫(ex: backgroundColor Vs. background-color)，所以我們需要處理一下 propName，

處理的方式則用運用 RE 來處理：

    function changePropName(propName) {
        var pattern = /[A-Z]/;
        var c = ("-" + (propName.match(pattern))).toLowerCase();
        var s = propName.split(pattern);
        var result = s[0];
        if (s.length > 1) {
            result += c + s[1];
        }
        return result;
    }

利用 RE 找出字串中的大寫字元，以 backgroundColor為例

mach 會找出 C

split 則會找出 background,olor

然後就把 'background' + '-' + 'c' + 'olor' 就完成了我們要的轉換了。