星期四, 11月 01, 2012

console.log

近來的專案越來對使用者體驗( user friendly )更加的重視,對於 client 端的程式需求越來越多,而在 Web Application 的專案裡面,client端的程式的首選當然是 javascript ,今天來分享一下對於 javascript 開發的小技巧。

在比較古老的年代,常常會倚賴 alert 這 method 來協助程式的撰寫,或是在 debug 的時候也拿來用,但是用 alert 來做這方面的處理,真的很不適合,例如:1.跳出來訊息要手動去關掉 2.正式上線時,不能留著 3.在大量訊息時,alert視窗就會爆炸等等等,這些缺點都導致開發起來礙手礙腳的,在強調快速開發且又需要大量撰寫的 javascript 的時代,現在都會用 console.log 來代替 alert,但是 console.log 又有一些缺點,那就是不是所有瀏覽器都支援 (我沒有指名道姓說IEx我沒有指名道姓說IEx),參考 黑暗大的 jQuery Logging Plugin 這篇文章,再加上自己本身的一些經驗,整合了一下作法,我們先直些看code吧!

實作

//擴充 String ,讓 String 可以有 log 的能力
jQuery.extend(String.prototype, {
    log: function (logKey) {
        var msg = this.toString()
        jQuery.fn.log.logConsole(logKey, msg);
        return msg;
    }
});
//參考 黑暗大的 jQuery Logging Plugin
jQuery.fn.log = function (logKey) {
    jQuery.fn.log.logConsole(logKey, this);
    return this;
};
jQuery.fn.log.logConsole = function (logKey, obj) {
    if (typeof console != "undefined")
        console.log("%s: %o", logKey, obj);

}

用法

var str = 'I love twMVC',
      elem = $('<div>test1</div>');
      ;    

var a = str.substr(7,5).log('s1').substr(2,3).log('s2');
elem.log('jqueryElem').hide();

image
這裡我加了對 String 的擴充,很多時候都需要把 String 顯示出來,讓自己可以有更好的參考來撰寫 javascript ,當要上正式機的時候,只需要把擴充裡的 console.log 那段註解掉就行了,對於其它有加 log 的地方都不需要改動,這樣也不會手賤手誤改錯了地方了,個人感覺算不錯的方式,跟大家分享一下,如果有更好的方法,交流一下吧

參考:


2 則留言:

匿名 提到...

Dear Bibby,
上次研討會中場,跟您請教問題
你說加入你的facebook就可以寄範例程式給我
因上網查不到您的facebook,改在這兒聯絡
我的email是veg081@yahoo.com.tw
(about:action到website時,一定會先去逛的地方)
感謝您的分享
Max

Bibby 提到...

我把檔案寄給你了^^
有問題再一起討論吧!