JQuery

最近專案需求用到 jQuery Serialize Object plugin，它能夠自動將 Form 表單內的值，全部轉成 object 或 json 字串，減少開發者每次都要寫抓取 Form 表單內全部欄位的值。此套件安裝及使用方法都很容易，安裝可以透過 Bower 方式，或者是下載 source code 直接 include 即可，在 IE 7 或 8 為什麼沒辦法使用呢，原因是作者使用了 Array.prototype.forEach，此語法需要 JavaScript 1.6 版本，很抱歉，在 IE8 並不支援 forEach 寫法，所以 Mozilla Javascript 開發者文件內有提供 Compatibility 方法： if (!Array.prototype.forEach) { Array.prototype.forEach = function (fn, scope) { ‘use strict’; var i, len; for (i = 0, len = this.length; i < len; ++i) { if (i in this) { fn.call(scope, this[i], i, this); } } }; }[/code] 但是既然這是 jQuery Plugin，就可以透過 jQuery 內建的 each 函式來解決，最後發了 Pull request 給作者，就看作者收不收了 XD

CKEditor 或 TinyMCE，兩套各有優缺點，CKEditor 雖然功能最完整，也是最肥了，雖然官網可以自己挑選 plugin 來簡化肥肥的 source code。如果是單純用在後台管理，我還是推薦 CKEditor，給前端使用者的話，就推薦 TinyMCE 了，畢竟前台還是要以輕量為主。

Cross Site Request Forgery 簡稱 CSRF 是網路上最常見的攻擊方式，由於前端的盛行，現在開發網站偏向前後端拆開，前端使用大量的 Javascript 及 CSS3 效果，後端則是使用 PHP, Ruby, Python… 等，前端如何拿到資料庫資料呢，必需透 過 AJAX 方式來存取，常見的後端 API 會設計成 RESTful (GET/PUT/POST/DELETE)，後端為了擋住 CSRF 攻擊，所以限定了特殊 Content-Type Header，前端需要帶 application/json 給後端才可以拿到資料，這只能透過 Ajax requests 才可以做到。

modern.IE 的使用方式及介紹，今天在 Facebook 上看到 Eric Shangkuan 說已經有了中文介面，如果你的瀏覽器是中文版，應該就可以直接看到中文介面了，裡面有篇文章非常重要，寫 Web 的工程師都必須注意，那就是 Cross Browser Best Practices，這篇文章教您如何撰寫相容於舊版 IE 瀏覽器的一些小技巧，這些技巧也不只用在 IE 上，更是教您在實做 CSS，JavaScript 的注意事項。我們來看看 Javascript 的小技巧。

html5-boilerplate 看到有人發 Remove Google CDN reference for jQuery 的 pull request，發現國外鄉民其實蠻有趣的，也很會表達自己的想法，根據 Steve Webster 在 2011/11/21 寫了一篇 Caching and the Google AJAX Libraries 裡面的結論是: 使用 Google CDN Library 對於第一次訪問網站並沒有很大的幫助，其實這句話非常有疑問，如果網站不想 host 一些 static file 又想要用 CDN 的話，Google 絕對是最好的選擇，底下就有人反駁 Google CDN 還是比自己 host 檔案快很多，所以此 pull request 好像沒有啥意義。

jQuery 釋出 1.9 及 2.0 版本，官方團隊也同時推出 jQuery Migrate Plugin 1.0.0 版本，此 Plugin 是跟 jQuery 1.9 或 2.0 一起搭配使用，偵測 jQuey 已移除或者是將被移除的功能，讓您之前開發的 jQuey 功能可以持續使用，但是似乎很多使用者不知道此 plugin 用處，就直接升級 1.9 或 2.0，並未載入 migrate plugin，造成官方收到很多 feed back 都是關於一些舊功能不能使用。半個月後 jQuery 官方收到很多 migrate plugin 回報問題，這次一樣可以透過 jQuuery CDN 載入，程式碼如下。

今天早上來到公司就發現一個令人振奮的訊息，那就是 jQuery 1.9 and 2.0 beta Release 了，相信大家對於 jQuery 應該都不是很陌生了，釋出同時官網也有寫一份 jQuery 1.9 upgrade guide 文件，來幫助大家升級舊版本。那為什麼這次會同時釋出 1.9 以及 2.0 beta 呢？我們來看看 jQuery 團隊如何定位 jQuery 1.9 及 2.0: 1. jQuery 1.9 和 2.0 擁有相同的 API，一些官方打算移除的 API 像是 $.bowser，在這兩版本都已經移除，更多的訊息可以參考 jQuery 1.9 upgrade guide 2. jQuery 1.9 可以執行在 IE 6,7 和 8 版本(“old IE”)，就如同之前的版本一樣升級 3. jQuery 2.0 將不在 old IE 版本上執行，此版本會比 1.9 版本還要小以及效能好 4. jQuery 團隊會持續維護 jQuery 1.9 及 2.0 版本，所以開發者根據自己的需求下載對應版本

Backbone.js Event 事件，介紹 Event 之前，大家可以先看看 Backbone.js 的初學介紹，該教學文件可以學習如何載入 Backbone.js library，利用此套件如何去制定各種事件。Backbone.js 提供了3個 method 去控制事件產生、移除、執行，分別是 on(bind)、off(unbind)、trigger。文字上寫得很清楚 on 就等於 bind，off 就是 unbind，最後就是如何去 trigger 事件。底下就來簡單舉例:

既上一篇作者寫了 Javascript 前端工具 Backbone.js Framework 初學介紹，這次來將程式改寫成 jQuery 寫法，藉這個機會來介紹 jQuery 新功能 on API，底下來看看 jQuery event handle 的演進

//在 jQuery 1.3 以上版本
$(selector).live(events, data, handler);
//在 jQuery 1.4.3 以上版本 
$(document).delegate(selector, events, data, handler);
//在 jQuery 1.7 以上版本
$(document).on(events, selector, data, handler);

PHP, Ruby, Python .. 等語言都已經相當熟悉，進階開發者也都接觸了好用的後端 Framework 如 CodeIgniter, CakePHP, Django, Ruby on Rail, Yii, Symfony .. 等，用 Framework 最大的好處並不是在 Framework 提供了大量工具，而是制定了 MVC 架構，讓專案多位開發者可以遵循，上了講了這麼多後端 MVC Framework，那麼前端呢？接下來介紹前端強大工具: Backbone.js

什麼是 Backbone.js 簡單來說 Backbone.js 就是一套前端 Javascript Framework，它提供 MVC 架構，相信大家都玩過後端 MVC，那至於前端呢，好像比較少人提到，這就是介紹 Backbone.js 最主要的目的。Backbone.js 包含了 Model View Controller 來讓使者操作，Model 提供了key-value 結構，以及可以 binding 大量 event，開發者可以透過 RESTful JSON interface 來跟 Backbone.js 的 Model 及 Collection 搭配。如果想瞭解 Backbone.js 線上文件可以參考

GitHub 網站，如果想瞭解程式碼可以參考 source code 註解。