American Censorship Day

Note: If you are reading this on the site, you will see the banner censored.

The US Congress is currently discussing a bill that will give the power of government to shut down websites, prosecute social network users (i.e. you and me) for making minor non-commercial copyright violation (e.g. singing a pop song on Facebook), etc. This is the end of free speech on Internet as we know it, and is an attempt to build national firewall and censorship system much like the one in China.

Please join us for the fight to preserve freedom on Internet. More information can be found at americancensorship.org.

Animate.css

Animate.css 是一組好玩的 CSS animation keyframe,提供很多誇張的 DOM 動畫效果。使用方法根據網頁是用 Script 在想要做動畫的元素上面加上 class,然後就會觸發 CSS transition。以 jQuery 為例:

$('.bouncy').addClass('bounceInDown');

但這個作法有個問題,在他的範例頁面上也是,就是在動畫結束之後沒有辦法再跑一次(因為要先拿掉 Class 再加才會有 transition)。所以最基本的,應該要在動畫跑完(預設是 1 秒鐘)之後把 class 偷偷拿掉。我還有其他的需求像是 *Out 的 transition 跑完之後就把元素藏起來、callback、如果不支援的瀏覽器就跑 jQuery 動畫這樣,最後就變成這樣一個小小的 helper plug-in 了。

jQuery.fn.animateCSS = function (className, callback) {
	var that = this;
	if (!Modernizr.csstransforms || !Modernizr.csstransitions) {
		// for old browsers we use jQuery animation
		// only fadeIn and fadeOut for now
		if (/In/.test(className)) this.fadeIn(1000);
		if (/Out/.test(className)) this.fadeOut(1000);
	}
	if (/In/.test(className)) this.show();
	setTimeout(
		function () {
			that.removeClass(className);
			if (/Out/.test(className)) that.hide();
			if (typeof callback === 'function') callback.apply(that, that);
		},
		950
	);
	return this.addClass('animated ' + className);
}

有需要請隨意複製貼上到自己的專案去囉。

jQuery 的 live() 被 Deprecate 了

在 jQuery 1.7,live() 方法被標示為 deprecate (不建議使用),意思就是不建議新的專案使用這個方法,另外下個版本的 jQuery 可能會拿掉這個方法,到時候如果要升級 jQuery 的話有用到就要改寫。jQuery 建議的寫法是用 1.4.2 之後就存在的 delegate() 或是 1.7 提供的 on()

on() 統合了 bind()live()delegate() 等方法,用這個方法可以取代前述方法的功能。不過這就好玩了:如果 on() 可以取代 bind()live(),原本的程式碼應該要分別怎麼改寫?

看了半天文件才得到下面的結論:

// 舊
$('#myid').bind(event, fn);
// 新 (改名字就好)
$('#myid').on(event, fn);

// 舊
$('#not_in_dom_yet').live(event, fn)
// 新
$(document).on(event, '#not_in_dom_yet', fn);

另外也是寫下來之後才發現之前 live() 語法的問題:

  1. live() 的原理是把事件綁在上層的元素,事件 bubble 上去之後再去檢查從下面上來的事件是不是符合之前設定的 selector。這個原理在 on()(或是 delegate())才會被暴露出來(有發現那個 document 嗎?)。如果只寫 live() 的話等於是不求甚解的用法,最明顯的問題是無法掌握事件觸發的順序,常常在 bind() 裡面有用的 ev.stopPropagation() 改成 live() 就沒用了。
  2. live() 把事件掛在 document,雖然比每個元素都 bind() 有效率,但是還是要過濾很多傳上來的無關事件。用 delegate() 或是 on() 才能指定要把事件 bind 在哪裡。
  3. live() 的語法不合邏輯。一個用 $('#not_in_dom_yet') 選元素的 jQuery 物件,裡面明明就沒有 DOM 元素,那照理說後面接上的方法都不應該做任何事情。結果 live() 反而是這樣運作的。

所以,就如 jQuery blog 所說的,這的確是一個瘦身計畫:只提供一個簡單的 API 來處理所有事情可以簡化程式碼的設計,也可以幫大家腦袋裡存的文件瘦身。那篇文章,還有 1.7 新功能的介紹,建議大家有空可以看看。