Garbage Collection (1)

這篇只是介紹比較知名的方法，預計之後還會再發一兩篇討論 C++/Qt 的回收手法。

Download attachment file with JavaScript

AJAX 回應回來的內容會被 JavaScript 拿到, 而不是直接顯示在網頁上. 當你希望瀏覽器跳出下載對話框, 可以這麼做:

window.location.href = 'download.cgi';

是的, 根本不需要 AJAX.

JavaScript function binding: arguments only

Function.bind -- MDC Docs

既然 JavaScript 1.8.5 已經有 bind 可以用, 為什麼不用它呢? 因為它有一個小問題, 就是它非得 bind 一個 instance 給 this, 但很多時候你是不想動到原本 this 所指向的 instance, 比方說某些 library 會要求 event handler 的 this 必須要指向某個 DOM Element. 於是當你只想 bind arguments 時, 這個無法忽略的第一個參數實在很惱人, 我自己試過丟 undefined 或 null 進去, 但結果 this 都被 bind 到 window 上. 幸好這個要求在 JavaScript 並不難實作, 我就自己刻了一個.

QtWebkit plus jQuery

Fancy Browser - Qt Example

新的 Qt 4.5.2 多了一個範例描述如何在 QtWebkit 配合 jQuery 使用。是時候來研究一下了。

如何讓你的程式更難理解(4)

// unique values
var c = [];
// random shuffled keys
var rsk = [];
( function( functor ) {
    jQuery.each( tags, function( key, value ) {
        // random shuffle or just copy. tags -> rsk
        functor( key );
        // unique array to c
        if( jQuery.inArray( value, c ) < 0 ) {
            c.push( value );
        }
    } );
} )( Blog.TagCloud.shuffle ? function( key ) {
    rsk.splice( Math.floor( Math.random() * ( rsk.length + 1 ) ), 0, key );
} : function( key ) {
    rsk.push( key );
} );

以上是我的標籤雲實作的其中一小段，tags 是(標籤,文章數量)的集合，c 放的是不重複的文章數量，Blog.TagCloud.shuffle 是設定要不要打亂標籤的順序，rsk 放的是處理後的標籤順序。
暮然回首才發現我寫出這種東西...= =

如何讓你的程式更難理解(3)

alert( ( function( list ) {
    return ( function( functor, nullValue, list ) {
        if( list.length == 0 ) {
            return nullValue;
        }
        var head = list.shift();
        return functor( head, arguments.callee( functor, nullValue, list ) );
    } )( function( head, tail ) {
        return head * head + tail;
    }, 0, list );
} )( [1, 2, 3, 4, 5] ) ); // will alert 55

用遞迴的方式算出一個陣列的平方和，使用 JavaScript。
靈感來自於 測測你自己 - The Joel on Software Translation Project。
對，我是故意寫成這樣的，這不算是好的風格...

Recursive anonymous function

JavaScript 在每個 Function 都維持了一個變數叫 arguments，可以取得 context 的有趣資訊。比如說，arguments.callee 可以拿到目前正在執行的這個 Function 的實體，這有什麼用呢？它可以用來自殺(?)，以及實現匿名函式的遞迴。

以自殺來說，比方現在你註冊一個監聽函式，而你需要在某個條件達成後解除監聽，這就很有用了：

ele.addEventListener( 'click', function( e ) {
    // blah blah ...
    this.removeEventListener( 'click', arguments.callee, false );
    // blah blah ...
}, false );

而遞迴就更有趣了，雖然應用上應該很少用到：

alert( ( function( n ) {
    return ( n <= 1 ) ? n : n + arguments.callee( n - 1 );
} )( 100 ) );

以上會跳出 5050。

Blogger可以在post裡放script了?

我都不知道啊!!
測試:

jQuery's bug on KHTML?

才剛轉職沒幾天就疑似碰到bug...概述如下：

var temp = $( '#dome1' ).hide();
alert( temp.css( 'display' ) );     // none
$( '#dome2' ).after( temp );
alert( temp.css( 'display' ) );     // block or inline ( default style )

var temp = $( '#dome1' ).css( 'display', 'none' );
alert( temp.css( 'display' ) );     // none
$( '#dome2' ).after( temp );
alert( temp.css( 'display' ) );     // none

簡單地說如果使用hide，那麼在經過DOM的插入動作以後style會消失，但是直接使用css指定卻不會。這個錯誤在Safari和Konqueror上都會出現，但是Konqueror更嚴重，因為不只是插入的元素會失效，連被插入的元素也會失效。

在網路上搜尋的結果，發現了這個ticket，如果bug根源是一樣的話，可能要等1.3釋出才會修正吧？可是奇怪的是使用他的test case我無法重現bug....

換裝

今天發神經把所有原本用Prototype的JavaScript全部重寫成jQuery。jQuery的code長度果然有比Prototype短，不過某些功能還是沒辦法替換就是了，比方說少了Hash，我就只好自己弄了個類似的功能，但是標籤雲的random shuffle就沒了....現在標籤的順序是固定的。
但是我明明記得jQuery很小的啊...怎麼一看就變成五十幾K...

Prototype Based OO - ECMAScript

以 C 語言實做 Javascript 的 prototype 特性 - Jserv's blog
JavaScript掌握 JavaScript 的「封裝」特性, part 1 - 石頭閒語
掌握 JavaScript 的「封裝」特性, part 2 - 石頭閒語

Media Player Control DOM for IE

MSDN
簡體

新增標籤雲展示

參考這個做出來的
不過我有自己再用prototype.js改寫一些東西（主要是hash）的部分。
等code進入穩定期再發佈寫法。
先去上課=.=b

XHTML deprecated target attribute

在XHTML 1.0 Strict和XHTML 1.1中，a元素的target屬性被拿掉了，似乎是委員會的大老們覺得連結的開啟目標不該由文件本身提供，或是說使用者應該可以自己決定要怎麼打開它，所以現在是用rel和rev屬性來註明這個文件連結，但是不做任何具體影響。你可以利用rel="external"來註明這是個外部文件。
想要實現原本的功能，可以自己定義DTD或是用JavaScript。實作其實很簡單，核心如下：

var links = document.getElementsByTagName( 'a' );
for( var i = 0; links[i]; ++i ) {
    if( links[i].getAttribute( 'rel' ) == 'external' ) {
        links[i].addEventListener( 'click', function( e ) {
            e.preventDefault();    // IMPORTANT!
            window.open( this.getAttribute( 'href' ), '_blank' );
        }, false );
    }
}

Event的preventDefault是為了要阻止元素的預設行為，因為<a>在click之後一定會打開連結。
另外，我想這個JavaScript應該是不相容於IE的，不過沒關係，反正IE不支援XHTML，自然不用擔心這種XHTML才有的問題。

[Modified - 2008/02/26] Use W3C style.
[Modified - 2008/07/06] Improved loop terminate condition.

instance or literal

前陣子在做JavaScript的異常處理時，意外的發現一些實體判定的問題。

考慮如下的程式：

try {
    throw( 'Exception' );
} catch( e if e instanceof String ) {
    alert( e );
}

這樣是不會捕捉到異常的，就算'Exception'這個字串可以使用String的method，就算typeof的取值是string。

接著再進一步的試驗：

var temp = [ 'test', String( 'test' ), new String( 'test' ) ];

for( var x in temp ) {
    alert( temp[x] + ', ' + typeof( temp[x] ) + ', ' + ( temp[x] instanceof String ) );
}

// test, string, false
// test, string, false
// test, object, true

可以看見只有用new才會真正用constructor建造一個實體，不加new的話似乎只是呼叫function而已。
也就是說new運算子才是產生instance，其他的都算literal。

可是要說instance和literal不一樣嗎？好像也不盡然：

String.prototype.popup = function() {
    alert( this );
};

// will alert 'test'
'test'.popup();

IE socks...

之前就為了IE一個調CSS調到快瘋掉
沒想到剛才改JavaScript又給我碰到一件鳥事...

由於測試時不管怎麼按IE都沒反應
還以為我有什麼地方寫錯了
結果竟然是IE不支援application/javascript這個MIME type
非得用過時的text/javascript才能執行....

某個角度來說,IE還真是讓我大開眼界....

Ruby Tag Auto Creator 2.1.0.0 released!

Link:

Ruby Tag Auto Creator 2.1.0.0

---

Release Note:

Library:

• 更改genRubyTag(), delRubyTag(), delRubyText()的行為，使它們在找不到目標時回傳null，而不會彈出任何信息。
• 變更rubytext.css的載入方式，rubytext.js不再負責CSS的路徑。請在要使用的網頁的<head>裡加入：
  <link rel="alternate stylesheet" id="RubyText" type="text/css" href="YOUR rubytext.css PATH" />
  <script type="text/javascript" src="YOUR rubytext.js PATH"></script>
  紅標的地方是一定要遵守的，另外，CSS的載入也必須在JavaScript之前。

Page interface:

• 將所有網頁元件純粹化。
• 版面設計更動，特別感謝魏藥的大力協助與測試。

Caution:

Safari 2由於其本身若干BUG，如有必要請使用Safari 3 beta以得到最佳效果。

UrMap in blogger....

某MF給的靈感....

靠北啊!真的可以用!
不過我也想不到要拿來幹麻就是了....

繼續閱讀的做法

　　這幾天不停在測的就是在文章內加上“繼續閱讀”的做法，並且只限定在首頁上發生作用。可能是我笨不會用別人的模版吧，只好呆呆的自己寫一個。

　　要做到這件事，首先要先在head裡加入外部的JavaScript，第一個是很廣泛被使用的prototype.js,第二個是我自己寫的js檔。
　　為什麼不把js檔寫在head裡？因為blogger用的是XHTML1.0 strict DTD，script裡的內容會被視為PCDATA，這會對特殊符號造成複雜影響，所以最簡單的方法就是外部引入js檔。
　　在head裡任意一處加入以下的文字：

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="myjs.js"></script>

　　然後myjs.js的內容如下：

function init() { if( location.pathname.search(/^\/(index\.html)?$/) >= 0 ) { $$('.stealth').each( function(element,index) { element.hide(); $$('.detect')[index].update('<a title="展開隱藏區塊" onClick=" $$(\'.stealth\')['+index+'].style[\'display\']=\'block\'; this.style.display=\'none\'; ">(繼續閱讀)</a>'); }); } }

　　其中，if( location.pathname.search(/^\/(index\.html)?$/) >= 0 )用了一點Regular Expression的技巧，因為我的目的只要它在首頁上作用即可，在各文章的單一網址內不要作用。

　　最後，在body的後面加上onLoad="init();"，然後在自己的文章裡，要加入繼續閱讀的地方加入一行：

<span class="detect"></span>

　　在要隱藏的文章前後加上：

<div class="stealth">
文章內容

</div>

　　即可。

　　要注意的是，這兩個tag一定要一起使用，使用的數量不可以不同，否則會發生錯誤。