小惡魔 – 電腦技術 – 工作筆記 – AppleBOY

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

Read Full Post »

在 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 好像沒有啥意義。

Read Full Post »

上個月大家可以注意到 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 載入，程式碼如下。 <script src="http://code.jquery.com/jquery-1.9.0.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script> 壓縮版本 <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>

Read Full Post »

今天早上來到公司就發現一個令人振奮的訊息，那就是 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 [...]

Read Full Post »

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

Read Full Post »

既上一篇作者寫了 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 的話，那只要新增的元件就無法作用，講得有點抽象，底下直接看個例子:

Read Full Post »

我相信大家對於後端程式 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 的 [...]

Read Full Post »

近期在幫公司導入 Backbone.js 技術，把後台全面改寫成 Javascript MVC 架構，技術包含 jQuery + Backbone.js + Underscore.js + Mustache Template，這些技術我想可以寫另外一篇 Backbone.js 初體驗，這邊就先不多說了，在 Backbone.js 的 View 架構裡，可以任意 bind events，程式碼如下: RT.View = Backbone.View.extend({     initialize: function() {           if (this.model) {             this.model.bind("change", this.render, this);         }       [...]

Read Full Post »

程式設計師在網頁表單上通常會設計很多提示的功能，而在 Html5 提供了 placeholder attribute 這功能，目前 FireFox Safari Google Chrome 都沒有顯示上的問題，唯獨 IE8(含以下)都沒辦法顯示這功能，所以必須透過 javascript 來解決這部份問題了，網路上找到這篇解決方式，底下是原始碼 <!–[if IE]> <script type="text/javascript"> // A no-dependancy quick and dirty method of adding basic // placeholder functionality to Internet Explorer 5.5+ // Author: Jay Williams <myd3.com> // License: MIT License // Link: https://gist.github.com/1105055 function add_placeholder (id, placeholder) {     var [...]

Read Full Post »

在網頁裡面用 Select 是很常遇到的，之前也寫了一篇如何利用 jQuery 動態增加 option 或取值，jQuery 部份就不介紹了，那是需要搭配 jQuery Plugin: Select box manipulation，今天要介紹的是如何用 javascript 動態取值或者是增加 option 選項。因為我發現有使用者直接利用 innerHtml 的方式來把資料塞入到 Select 裡面，雖然 FireFox 或 Chrome 都可以正常運作，但是遇到 IE 還是沒辦法動。 如何取得 select element 底下很多方法可以取得 select element: 1. 透過 form name + element name document.myform.selectname 2. 透過 form name + element 陣列(注意看 select 是位在 form element index 值多少) document.myform.elements [...]

Read Full Post »