改用 jquery-ujs...

昨天聽 othree 提到 jquery-ujs (Unobtrusive scripting adapter for jQuery),裡面有不少 convention 可以直接套用。othree 在三月有寫一篇文章介紹:「jQuery-ujs」。

雖然 repository 看起來是給 RoR 使用,但直接把 rails.js 抓下來用「<script src="rails.js"></script>」掛上來,還是可以用在非 RoR 環境裡。

直接看 code 也很好懂,舉幾個例子來說:

<?php $sToken = hash('sha256', session_id()); ?>
<meta name="csrf-token" content="<?php echo $sToken; ?>">
<meta name="csrf-param" content="sToken">

表示 CSRF token 名稱為 sToken,值為 hash('sha256', sesssion_id())

對於想要先跳出 confirm dialog,再決定要不要繼續執行的連結,可以加上 data-confirm 表示:

<a href="/delete/1" data-confirm="是否要刪除?">

如果要用 POST (上面的 delete operation 不應該用 GET,因為資料被變更),可以加上 data-method

<a href="/delete/1" data-confirm="是否要刪除?" data-method="post">

或是直接用 DELETE,在 server side 可以讀 _method 這個值:

<a href="/delete/1" data-confirm="是否要刪除?" data-method="delete">

最後,建議大家去看 jquery-ujs 的 wiki,上面有針對用法有比較完整的說明,配著 source code 一起看會比較容易上手。

jQuery 1.7 版,並計畫瘦身 jQuery...

jQuery 1.7 前幾天丟出來了,可以看到很多對 event 操作的改善,包括效能與功能 (新增了 .on().off()):「jQuery 1.7 Released」。

另外今天又看到瘦身計畫:「Building a Slimmer jQuery」,希望把一些「應該要拿掉」或是「應該要被修正」的問題處理掉... 所以在 jQuery 1.7 標為 Deprecation,預定在下個主版本就會處理掉這些問題。

目前 (對我家) 最主要的影響應該是 .live() 會被拔掉,以及之前有使用 .attr('value') 取 current value (要 current value 應該用 .val() 取得)。

看起來是往好的方面進行...

jQuery 1.5.1 釋出

jQuery 的官方 blog 宣佈 1.5.1 正式出版:「jQuery 1.5.1 Released」,除了 bugfix 外,也宣佈要開 1.6 Roadmap Meeting 討論下一個版本要做的事情,預定在 irc.freenode.net 的 #jquery-meeting 上開,時間是 3/7 (時區是 EST)。

這次 Google CDN 上已經有 1.5.1 版,需要的人可以改過去了...

Protocol Preserve URI 的過濾

雖然知道 //host.domain/path 這種 Relative Protocol 用法 (而且也用很久了),不過最近在 irc.perl.org 上的 #plack 剛好有人提到,再加上最近剛好有人在探討安全性問題:「Bypassing "RequestPolicy" Using Protocol Relative URLs」,剛好可以拿出來再說一次。

簡單來說就是「以 / 開頭的 URI 並非一定是 same origin,不可以以此當作 same origin 的判斷」。因為「//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js」這種用法是正確的用法,表示保留 Protocol。

另外講些題外話,這個用法也還是有缺點,用在 IE 的 css 時會造成重複抓取 (到 IE9 都還是):「CSS files downloaded twice in Internet Explorer with protocol relative URLs」,script 或是 relative path 都不會,只有 css 會...

反過來說,因為 js 的部份大家都沒問題,所以當使用 Google 提供的 jQuery 時,「永遠」都應該使用「//ajax.googleapis.com/...」,因為 Google Libraries API 是同時支援 HTTP 與 HTTPS 的。

jQuery 1.5.1 RC 1

jQuery 1.5.0 出來以後 (2011/1/31) 沒幾天又準備要出 1.5.1 了,剛剛在官方的公告「jQuery 1.5.1 RC 1 Released」上公佈了 1.5.1 RC 1 的連結 (讓人測試),以及大量的 bugfix 資訊...

昨天看了幾個報社的網站,發現不少網站都用 jQuery:(看首頁的部份)

而「自由時報電子報」首頁沒有看到 jQuery...

jQuery CDN failover 的方式...

之前有在其他網站上看到 failover 的技巧,但剛剛才發現 jQuery 官方網站上也用上了類似的技巧,將 Google (ajax.googleapis.com) 與 EdgeCast (code.jquery.com) 的 CDN:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="http://code.jquery.com/jquery-1.4.2.min.js"><\/script>');</script>

雖然 jQuery 網站上是放在開頭,但放在 HTML 最後面也有一樣的效果...

jQuery 對效能的調整...

TwitterjQuery 1.4.2 換到 1.4.4 以後,發現在捲頁時的效能變得很差:「About that slowness on Twitter…」。

這件事情讓 John Resig 在他的 blog 上發表了一篇文章,發現原因在「$something.find(".class")」這種用法,成為壓死駱駝的最後一根稻草:「Learning from Twitter」。主要的原因是 querySelectorAll(".class") 比起 getElementsByClassName() 慢了一些,而 Twitter 的寫法會使得這個 function 的效能明顯放大到影響整體效能的程度...

文章以及 comment 有給一些建議 (cache selector 與針對 scroll event 的處理),記起來以後應該會有幫助...

jQuery 1.4.3 正式釋出

如前幾天在「jQuery 1.4.3-RC* 開跑」所說的,jQuery 1.4.3 如期正式釋出:「jQuery 1.4.3 Released」,除了可以自己下載以外,在 Google Libraries API 上也已經更新了:ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js

對於 dev quality 的要求,這個版本導入 JSLint,要求所有 jQuery code 都要 pass JSLint 的檢查。

另外把一些模組的相依性處理的更好,儘量都拆開不要相依,這樣可以使用 LABjsRequireJS 這類工具動態讀入。

在效能改善的部份,這次把 .css() 重新寫過,大約快 20%,對於 .animate() 會有幫助,不過 Chrome 以及 IE8 似乎沒差... 最重要,改善幅度也最多的的應該是 .closest().filter() 的改善,以及連帶大量使用這兩個 function 的 .is().find()

jQuery 1.4.3-RC* 開跑

jQuery 在出了 2010/2/19 出了 1.4.2 之後,過了半年總算有 1.4.3 的消息了。預定在 10/16 要放出 1.4.3 正式版,這幾天正在做最後的測試:10/10 的「jQuery 1.4.3 Release Candidate 1 Released」,以及 10/12 的「jQuery 1.4.3 Release Candidate 2 Released」。

這半年最主要的變化應該是 HTML5 的興起,所以可以看到很多針對 HTML5 而做的修改。

另外九月的時候 Jeff Roberson (不是 FreeBSD committer 那位) 對 jQuery 所使用的 regular expression 重新檢視過,再次把 jQuery 的效能再往上拉:「jQuery Regular Expressions Review」,相關的 commit fix 可以在 9dc6e0c572b9c809a3a4c123071d96d48a01dd1c 看到。