Month: April 2012

Windows 下安裝 Web Developer tool LiveReload

去年寫了一篇: LiveReload 網頁程式設計師必備工具，介紹如何在 FreeBSD 及 Linux 底下安裝 Livereload，相信過程也都不難，只是筆者目前有在 Windows 底下開發 Web，原本是透過 Linux 來使用 Livereload，但是我發現只有在 Chrome 才可以 Work，但是 FireFox 提供的 LiveReload :: Firefox 附加元件，安裝之後，發現瀏覽器根本沒有出現按鈕讓使用者連接伺服器，所以這方法作罷，查了官網資料才知道已經有提供 Windows 安裝檔架設 Server，及 Browser extension 來連接伺服器。

Continue reading “Windows 下安裝 Web Developer tool LiveReload”

Backbone.js Event 事件介紹

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

jQuery 1.7 透過 on 來綁定事件

既上一篇作者寫了 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);
上面三種寫法都可以綁定網頁上全部元件，如果只是單純只是用 click bind event 的話，那只要新增的元件就無法作用，講得有點抽象，底下直接看個例子: Continue reading “jQuery 1.7 透過 on 來綁定事件”

Javascript 前端工具 Backbone.js Framework 初學介紹

backbone
我相信大家對於後端程式 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 註解。 Continue reading “Javascript 前端工具 Backbone.js Framework 初學介紹”