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 新功能的介紹,建議大家有空可以看看。

Looking Backwards, Connecting the Dots

So the day came.

I have not much to say like everyone else on the web and mess media. I don’t want to go on skin-depth things like how he transformed the computer industry and the world – I didn’t even agree most of the tactics he used (like, all closed-source, closed and single distributor model for the iOS platform, etc.).

I want to share something personal with you here, instead.

I did a lot of things that didn’t make sense to my parents, nor to myself at the time. Ever since mid-school, I spent countless hours making websites. I was the computer guru to my high school classmates because the guestbook/chatroom service I built was practically the online social network to them. When I went to college, I chose to take physics as major instead of computer science because I thought there were more wonders in the mechanics of the physical world instead of inside a computer. That turned out to be true, and the wonders unfortunately succumbed me; my grades in physics classes were never higher than the one and only computer science class I took. I didn’t know what to do at the time; I didn’t want to, and couldn’t go for the regular career a physics-major in Taiwan would usually do, that is go to graduate school, and to TSMC/UMC or other semiconductor companies straight from school, the flagship industry of Taiwan – The promise land with dicent salary and social recognition.

Nevertheless, I got my B.Sc. anyway. I stall a bit by deliberately not to meet the graduation requirement (which is, ironically, English requirement) and stayed for a fifth year. I joined MozTW and took care of Firefox localization, started to get to know people in the technology circle, many of whom are big names I admired. I gave lectures at meet-ups and events, wrote web application for Firefox promotion. I co-organized events, designed event websites. I built a paper toss game in the IE9 hackathon event and was awarded an XBox 360 + Kinect. Eventually, I am recognized by people as a qualified front-end developer.

(Full text of Steve Jobs’ 2005 Stanford Commencement Address)

I don’t actually remember when I see the speech for the first time. At first it didn’t make an impression. It was not until some day, I realized “connecting the dots by looking backwards” is exactly what I did, and do right now: Without these “personal homepage” I wrote before college, I wouldn’t know how server-client architecture works. Without my college projects in the physics department, I wouldn’t have any idea how to organize a full-scale rich-content website, nor the chance to improve my communication skill. Without MozTW I wouldn’t be known by my talented peers. Even physics has a part when I looked backwards – The paper toss game I wrote at the IE9 event is actually based on physics simulation skill I learned in school. I hated that class, but without the knowledge the game wouldn’t have such animation effect.

Indeed, Steve was right all along. “You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. … This approach has never let me down, and it has made all the difference in my life.”, he said. By looking backwards, I found everything I did somehow makes who I am today, and they surely made all the difference.

This is what Mr. Jobs meant to me. Nothing technological nor innovative, purely personal. So long, Steve, you lived a good life. This post is my tribute to you, and you will certainly be missed.

為何要選擇自由軟體授權你的 JavaScript 等前端程式碼

昨天和人討論事情又提到所謂「HTML5 的安全問題*」這個老梗,整理一下寫下來:

為何要選擇自由軟體授權你的 JavaScript 等前端程式碼所構成的 client-side web app?

答案對我來說很簡單:

  1. client-side web app 活在瀏覽器上,Javascript 等所有程式碼都是明碼下載下去執行,不會被編譯。
  2. 當然你可以用 compressor 做 obfuscation,但 compressor 再厲害也只能做 dead code removal 和重新命名變數。Beautifier 可以很容易的復原除了變數名稱以外的所有東西。程式的邏輯本身是不會被保護的。
  3. 如果程式是用 GWT 等工具撰寫,前端程式碼也會面臨一樣的問題。
  4. 就算人家看不到,天底下哪有什麼不能用 black box testing 重建的程式?假以時日總會有人山寨出來。
  5. 因為技術上做屏蔽不可行,所以在授權上去標示著作權所有抄襲必究只是防君子不防小人。
  6. 而防君子這件事情一點好處也沒有 … 妨礙了自己的技術被認可的機會,也阻礙整體的技術發展。

所以基於商業方法要做什麼技術考量的話,我的建議是:

  • 程式的主體、架構、流程還是可以放在 client-side。現在有很多很棒的 library/framework 可以幫忙這件事情,像是 jQueryModernizrbackbone.js。尤其別忘了善用 History API。
  • 如果有什麼獨家演算法需要保護的話,請用 server-side script 實作,放在 server 上用 API 的方式提供。但代價是伺服器的 CPU 與流量。
  • client-side 的 API wrapper,甚至是完整的 client 程式本身,都可以用自由軟體授權(像是 MIT License)放出去。理由如前述。
  • 如果你的 server 端服務真的如此獨家又有價值的話,把 JavaScript 包成 API SDK 放出去,反過來增加他的價值。公司甚至可以用 API 用量賺開發者的錢!Google 有許多 API 就是用這種方式提供的,免費提供,超過流量收取費用。
  • 其實不算安全問題而是商業方法問題。只是大家都覺得 code 被看光叫做不安全。