聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

五月 22, 2016

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» ScaleDrone Websocket 平台從 Node.js 轉換到 Golang

Go-brown-side.sh 又看到一間網路平台公司從 Node.js 跳到 Golang 了。ScaleDrone 是一間提供了 websocket 服務的公司,讓 web 可以透過 ScaleDrone 即時將訊息傳播到各種瀏覽器,但是今天看到 ScaleDrone 即將把後端平台使用的語言從 Node.js 轉換到 Golang,為什麼要轉語言呢,官方提到大量的 Websocket 連線,讓伺服器記憶體快吃不消了,然而 ScaleDrone 用 Go 語言來實際測試,發現記憶體不但沒有增加,反而還降低了 response 及 connections 時間。底下是針對 Node.js vs Go 語言轉換比較。

Performance 效能

Node.js 使用了 event-driven, non-blocking I/O 模型,一種說法是程式設計師不需要考慮 concurrency,另一種說法是 JavaScript 及 Node.js 在 concurrency 是有效能限制的。ScaleDrone 實際拿了 Websocket 來做實驗,發現 Golang 在 Websocket 表現上足足快了 Node.js 三倍,當然這不代表 Node.js 是不好的語言,只是為了證明,如果針對 websocket 長期考量來說,Golang 會是一個比較好的選擇。

Ease of use 使用上

相信寫 JavaScript 再來寫 Node.js 會是非常簡單,學一套語言前後端都可以適用,Node.js 語言讓程式設計師可以快速進入開發,所以也不用考慮 concurrency 狀況,然而在 Golang 則是提供另外一種 elegant patterns,讓你在寫 concurrency 語法時,需要考慮實際情境。

Ecosystem 生態

不得不說在語言生態上 Node.js 還是贏過 Golang 許多,一個套件可能在 Node.js 上找到好多個不同的作者寫的,但是在 Golang 上可能連一個都沒有。在文件上 Node.js 靠的是 Readme,而 golang 則是靠 godoc,在沒有大量的 example 的狀態下,其實從 Readme 來看都是不好上手的,另外如果第一次接觸 golang,其實 godoc 看起來不是很友善。

Conclusion 結論

每種語言都各有優缺點,並非說 Node.js 就是不好的語言,該 Blog 有說到,如果您還沒有處理過數千或數百萬的 concurrent connections 的話,會推薦使用 Node.js,反之則就是推薦 Golang。最後 Golang 有兩個套件專門主理 WebSocket,一個是 x/net/websocket 另一個是 gorilla/websocket,前者是 Golang 內建的套件,但是並非有很多功能,後者是 third party package 提供了更多 WebSocket 功能,如果要用在 Production 上,請使用後者,最後寫 Golang 可以使用 pprof tool 來追蹤記憶體變化。本篇翻譯自原文出處

二月 22, 2015

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 6to5 JavaScript Transpiler 重新命名為 Babel

es6-logo

先前寫了一篇 CoffeeScript 轉 ES6,裡面有提到 6to5 專案,此專案幫助開發者可以直接寫 JavaScript ECMAScript 6,該專案則會將 ES6 轉成 ES5,但是目前瀏覽器對於 ES6 的支援度還沒有很高,可以直接參考 ECMAScript 6 compatibility table,但是看到專案名稱 6to5,就會覺得如果之後 ES7 出來,不就要多開一個 7to6 專案,果然官方在 Blog 宣佈將名稱正式轉為 BabeljsBabel 也會持續使用最新 JavaScript Standard 開發 JavaScript transpiler 相關工具,讓各種平台程式都可以使用。

現在就可以透過 Babel 來開發 ES6

$ npm install --global babel

ES6 轉 ES5

$ babel script.js

一些來自 Mozilla, Esprima, jQuery Foundation, Acorn, 6to5, ESLint 組織成員,也合力開了 ESTree,而 Babel 以 ESTree 為基底來開發相關 Tool,所以最新的 Standard 也可以直接參考 ESTree。

二月 9, 2015

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 成立 iojs 台灣群組

9950313

昨天在 node.js 台灣群組討論對岸已經成立 iojs-cn,不多說我們也請官方幫忙成立了 iojs-tw,目前的工作只有兩項,就是負責將[ iojs 官網]翻譯成中文,這部份 @cfsghost 已經送 PR 給官方了,另外就是翻譯官方的 Weekly Notes,iojs 每週五都會發布一篇 iojs 的最新動態,我們就是負責將其中文化,上週五已經翻譯好了請參考如下:

io.js 週報 – 2015.02.06

Atom & nw.js 開始採用 io.js, Linux Tracing .. 等等。

每周五我們都會發布關於 io.js 的最新發展。

回顧整個一月份的社群貢獻,io.js 共有 294 次提交,是 Node 近三年來第三活耀的月份,(2012 年 2 月份有 308 次提交)。随着社群貢獻的成長,預計二月份會有更多產出。

  1. 發布 v1.1.0,詳細資訊請參考更新紀錄
  2. Sam Newman lands 簡化了 Stream 建構方法
  3. 正在進行 加入 Linux Tracing (LTTNG) 的工作
  4. 隨著我們加強在 io.js debugging 工作,Google 分享了部分在 V8 和 Chrome 中應用的追蹤技術
  5. Travis CI 增加了 io.js 的支援
  6. Codeship 支持 io.js
  7. Atom 編輯器轉移到 io.js
  8. nw.js(前身是 node-webkit)轉移到 io.js
  9. Tessel 硬體新產品將支援 io.js
  10. Chris Dickinson 增加了 6 位新的貢獻者,活躍的貢獻者目前共有 23 名
  11. 正在制定穩定兼容性策略,歡迎踴躍參加。
  12. 我們開始接受各大公司的反饋意見。如果您有我們遺漏掉的的公司的聯絡方式,請告知我們。
  13. 下週舉行 Node summit,將會有許多演講和與會者。
  14. 技術委員週會
  15. 網站工作群組會議
  16. 追蹤工作會議

原文:io.js Week of February 6th 2015,作者:@iojs,翻譯 @iojs-tw

如要加入 iojs 翻譯請直接到這裡申請

一月 26, 2014

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 前端工程師必看 JavaScript The Right Way

325x450xtech-icon_js-strict.png.pagespeed.ic.iBvyvS-EQY

PHP 的工程師一定知道 PHP The Right Way,現在 JavaScript 也出了 JavaScript The Right Way,不管是新手或者是資深工程師,都值得把裡面提到文章一看再看,此網站包含

網站還提供了新手或老手必讀的文章,像是 Understanding JavaScript OOP, Understanding “Prototypes” in JavaScriptUnderstanding JavaScript Function Invocation and “this”。也有推薦值的購買的書籍,以及免費書籍

十一月 20, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» jquery-serialize-object 不支援 IE7,8 瀏覽器?

最近專案需求用到 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, this);
            }
        }
    };
}

但是既然這是 jQuery Plugin,就可以透過 jQuery 內建的 each 函式來解決,最後發了 Pull request 給作者,就看作者收不收了 XD

十一月 14, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 將 Backbone Framework 升級到 1.1.0 注意事項

backbone

Backbone.js 經過了半年終於在 10 月 Release 了 1.1.0 版本,這次升級最重要的一點就是,Backbone 本來在 View 有支援 options,讓你可以透過初始化過程,將自定額外的 key 及 value 帶入,並且可以隨時透過 this.options.key 的方式取得資料。直接給例子來解說好了

this.example = new Backbone.View.extend({
  template_name: "user_edit",
  el: "#main"
});

上面是宣告 Backbone.view 的寫法,程式設計師可以傳入 object 設定,並且可以在程式任意地方,使用 this.example.options.template_name 方式來得到 user_edit 值,如果是使用 Backbone 1.1.0 之前的版本都沒問題,要升級到 1.1.0,又想要此功能,請務必在 view 的宣告前就必須加一段程式碼(後面解說)。為什麼作者會拿掉呢?因為有開發者發 issue 說為什麼 View 有這功能,那 Model 為什麼沒有呢?,這會讓未來加入開發的程式設計師感到困擾,所以作者就決定拿掉這塊

_configure: function(options) {
  if (this.options) options = _.extend({}, _.result(this, 'options'), options);
  _.extend(this, _.pick(options, viewOptions));
  this.options = options;
},

當然,也有熱心的開發者提供相容性解法

var View = Backbone.View
Backbone.View = View.extend({
  constructor: function (options) {
    this.options = options;
    View.apply(this, arguments);
  }
});

其他的修正就沒什麼地方需要注意的了,這也難怪 Backbone 一些 Plugin 尚未升級到 1.1.0 相容性的關係 XD

四月 12, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» [小技巧] JavaScript Cross Browser Best Practices

ie-logo-smallie-logo-small

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

不要再使用 navigator.userAgent

為了知道使用者 Browser 資訊,之前有寫篇 jQuery 偵測瀏覽器版本, 作業系統(OS detection),內容使用 navigator.userAgent 來取得使用者瀏覽器及裝置資訊,開發者為了 IE 各版本的相容,所以透過此方式來知道 IE 各版本,進而在 JS 做處理,但是有時候並不是這麼準確,因為目前市面上裝置實在是太多種了,手機,平板,電視一堆等等,為了支援各種裝置,請不要再用 navigator.userAgent 來判斷了,現在取而代之的就是用 Modernizr,用來偵測您的 Browser 有無任何您所想要的功能,像是 Html5 的 Canvas,利用 Modernizr 來判斷是否支援,這時候各種裝置就不會因為 JS 沒有判斷到而產生錯誤 ,尤其是在電視介面或 Android 平板,踩到很多雷阿。詳細資訊可以參考此連結

簡單來說 Canvas 在 IE9 才有支援,所以針對 IE 部份,我們使用 navigator.userAgent 來判斷

<script type="text/javascript">
    function getInternetExplorerVersion()
    // Returns the version of Internet Explorer or a -1 for other browsers.
    {
        var rv = -1;
        if(navigator.appName == 'Microsoft Internet Explorer')
        {
            var ua = navigator.userAgent;
            varre    = newRegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
            if(re.exec(ua) != null)
            rv = parseFloat( RegExp.$1 );
        }
        return rv;
    }
    function onLoad()
    {
        var version = GetInternetExplorerVersion()
        if (version < 9 && version > -1)
        {
            // Code to run in Internet Explorer 9 or earlier.
        }
    }
</script>

但是如果遇到 Safari, Chrome, Android, IPad, IPhone 版本呢,也很好解決,就是一直些判斷式,那為什麼不換個角度去想,直接判斷有無 Cnavas 功能即可,透過 Modernizr 套件可以簡單做到。另外 jQuery 在 1.9 版也直接捨棄了 jQuery.browser API 功能,取而代之的也是推薦 Modernizr

if (Modernizr.canvas) {
  console.info('Your browser support canvas');
}

在 document ready 內不要執行大量 script

現在大部分的網站缺少不了的就是 jQuery,jQuery 提供了 $(document).ready() 在 html load 完成後可以快速執行 JavaScript,在大多的狀況下都可以正確執行的,但是如果在 $(document).ready() 寫入大量及複雜的 Script,只會讓瀏覽器呆滯而不能使用,所以盡可能減少執行的程式碼,等到使用者真正要執行功能的時候在進行呼叫即可。通常像是 tooltip 或 dialog 可以延遲等到要出現的時候在初始化即可。

簡單舉個例子,在 form 表單大家常用的 jQuery Plugin datepicker,通常初始化會透過底下方式來寫:

$(document).ready( function() {
    $("input.date").datepicker({
        minDate: moment().subtract( "months", 1 ).toDate(),
        maxDate: moment().add( "months", 1 ).toDate(),
        dateFormat: "d M, y",
        constrainInput: true,
        beforeShowDay: $.datepicker.noWeekends
    });
});

用這缺點就是當 html 完成載入後,jQuery 會開始找 input 並且符合 class 為 date 的 元件,這會 delay 使用者正常使用網頁,比較好的解決方式就是 bind 在 input 的 focus 事件上。

$(document).on( "focus", "input.date:not(.hasDatepicker)", function() {
    $(this).datepicker({
        minDate: moment().subtract( "months", 1 ).toDate(),
        maxDate: moment().add( "months", 1 ).toDate(),
        dateFormat: "d M, y",
        constrainInput: true,
        beforeShowDay: $.datepicker.noWeekends
    });
});

此寫法有另外的優點就是當如果有建立新的 input.date 元件,可以動態初始化元件。初始過的元件,我們就動態增加 hasDatepicker class 來判斷是否已經初始化。

網頁開始先優先執行 AJAX

由於執行 AJAX 需要一段時間,所以請在 html load 之前就開始執行,並不需要等到 $(document).ready() 後才執行,另外在 AJAX 完成執行後的 Complete function 加入 $(document).ready() 函式確保 html 已載入完成。

延遲載入 social button(Facebook Like, Google +1, Twitter)

現在大多網站都有一大堆分享機制(social networks),像是 Facebook Like、Twitter 等等,但是這些 JS 的載入,都大大影響到網頁的載入時間,其實最主要的解決方式就是務必思考哪些頁面才需要這些 button,能減少載入外部 JS 就是提昇網頁載入速度,在以前載入外部 JS 的作法就是底下

<script>
(function(d, s) {
  var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.src = url; js.id = id;
    fjs.parentNode.insertBefore(js, fjs);
  };
  load('//connect.facebook.net/en_US/all.js#appId=272697932759946&xfbml=1', 'fbjssdk');
  load('http://apis.google.com/js/plusone.js', 'gplus1js');
  load('//platform.twitter.com/widgets.js', 'tweetjs');
}(document, 'script'));
</script>

現在請改寫成底下

<script>
(function(w, d, s) {
  function go(){
    var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.src = url; js.id = id;
      fjs.parentNode.insertBefore(js, fjs);
    };
    load('//connect.facebook.net/en_US/all.js#appId=272697932759946&xfbml=1', 'fbjssdk');
    load('http://apis.google.com/js/plusone.js', 'gplus1js');
    load('//platform.twitter.com/widgets.js', 'tweetjs');
  }
  if (w.addEventListener) { w.addEventListener("load", go, false); }
  else if (w.attachEvent) { w.attachEvent("onload",go); }
}(window, document, 'script'));
</script>

由於各瀏覽器相容問題,所以判斷是否支援 addEventListener 或 attachEvent,在 onload 後才開始執行。更多詳細內容可以參考 requesting these scripts

三月 1, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Backbone.js rewrite into CoffeeScript?

backbonebackbone

看到 @gsamokovarov 提出將 Backbone.js 改寫成 CoffeeScript 架構的 Pull request,結果官方團隊其中一位開發作者回應了一張圖,代表他的心情 XD,各位有興趣可以點上面連結看看,後來有其他人回應說,為什麼官方不用 CoffeeScript 來寫了,發此 Pull Request 的作者也有說,他只是將架構改成 CoffeeScript 讓大家參考看看而已,沒有真的希望可以納入整個 Backbone.js 專案,如果有其他開發者需要的話,一樣可以 fork 此專案,說明文件也用 docco 產生好了,可以參考此連結,官方作者也提到,大部份的第3方 Library 還是不會使用 CoffeeScript 來當作基底開發,畢竟並非所有人都知道 CoffeeScript,如果官方想這麼開發的話,早就再 2010 年丟釋出 Backbone.js 的時候就直接採用了,不會拖到現在還沒出來,當然最後官方也希望將此 pull request 寫到 wiki 裡面給大家參考,等待原作者補開發動機及細節。

五月 21, 2012

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 台灣第一屆 JavaScript Conference Developer 會議

JSDC 2012

自從去年辦了台灣第一屆 2011 PHP Conference,2012年開始又來新的第一屆 Javascript Conference,在去年的 PHP 會議由於第一次開始舉辦 PHP Conference,所以比較少人投稿,導致議程裡面出現很多 Javascript 議題,這也是很多朋友的疑問 XD。底下來回顧 JSDC 5/19 (六) 個人參加的議程。由於早上差不多10點半才到,所以前兩場議程(Key Note – Ericsk, Node.JS on Windows Azure)就沒有聽到了,比較可惜。如果沒去聽現場的,可以到官方網站下載投影片參考。

Key Note – Andreas Gal

這場最主要是介紹 Mozilla B2G Project,這是去年 Mozilla 的計畫,也在今年二月發表一些 demo 範例,以前程式設計師開發 Mobile device 需要用到大量的 Native API,現在可以利用 HTML5 + Javascript 開發任何驚人的 Application,大家可以在 Github 找到此專案 Gaia,另外可以參考 Boot to Gecko Wiki,現場有 Demo 手機可以玩看看。

JavaScript在Big Data方面的應用

這場其實就是推廣 Windows Azure 一些功能還有用 Javascript 處理大量資料,Map Reduce 的 work flow,投影片可以參考這裡,個人對於 Windows 系列的產品沒有很大的興趣,結論就是只有網站夠大才需要考慮到這些應用,不然一般的架構就可以做完了。

JavaScript MVC compare

這場是由 TonyQ 主講,相信大家對於他已經很熟悉,在台北每個禮拜都有舉辦 Javascript 小聚會,可以參考 Facebook javascript.tw Group,這場介紹如何選擇一套 Javascript Framework,現場也提到如果想玩新的 Framework,請由全新專案開始,不要拿舊有的網站來開刀,那會是拿石頭丟自己的腳,以老闆角度來想,為啥要導入新的架構,除非你有很大的說服力,不然請打消這個念頭,此主題有提到 AngularJSBackbone.jsSpineJavaScript MVC,講者提到下面幾個重點,對於找一套好的 Framework 非常有幫助:

  • Project Dependency
  • Dependency Management
  • Model-View-Controll structure
  • Entry point
  • Testing

Project Dependency:
首先在用任何一套 JS Framework 之前,必需要先瞭解此套件的相依性,例如 Spine.js 需要 include jQueryzepto,另外還需要 CoffeeScript。那 Backbone.js 呢?就需要 include underscore.js 跟 jQuery,所以每一套 Framework 都要瞭解相依性,以及自己撰寫開發的 script 是否可以相依並存,這點是非常重要。

Dependency Management:
如何解決相依性管理,這點是就是要瞭解這些 Framework 如何整合而外的 Library,像是 Backbone.js 用了 AMD (Asynchronous Module Definitions) 架構,要瞭解管理這些額外套件,以及整合各大 opensource 架構,例如 Require.js

Entry Point:
各大 JS Framework 的主要特性,當您選一套喜歡的 Framework,一定會有您自己心目中想要的架構,才會繼續使用它吧,這點大家都必須要先清楚知道,而不是大家用,您就用。像 Sencha Touch,它就是 script base,你只要會寫 javascript 就可以了,不用理會 html dom 元件如何產生出來,因為在 Sencha 底層就幫忙把 Html Layout 處理完畢。Backbone.js 呢,它提供了 URL Routing 功能,這點非常方便,讓後專程式設計師可以專心寫 API,輸出 JSON 格式就可以了。AngularJS 就是以 html 當作 Base,利用 ng-* 插入到 html tag 來產生前端效果。

Model-View-Controler:
我想大家一定聽過很多 MVC Framework,像是 CodeIgniter, Django, Yii, Zend Framework …等太多了,那前端的 MVC 呢?這是大家很少注意,也很少使用的地方,個人認為要選擇一套前端 MVC Framework 必須包含 Controller,利用 URL Routing 功能來達到 JS File 的分離,Model 用來連接後端 API,View 則是 Template Engines,以及可以自訂各種不同的 Event。

Testing:
前端的 Testing 就看專案需求了,這部份就不多寫了,可以參考 QUnit

Introducing Mojito

這場由 Yahoo 前端工程師 David Shariff 來介紹 Mojito MVC application framework,現在前端工程師非常辛苦,因為有太多的 Device 要支援: Android, iPhone, iPad, Windows Phone, other Device…等,每個 Application 用到不同的 Language,每出一個產品,前端做到死,所以 Yahoo 提出了解決方案: Cocktails Mojito。Mojito 實現一種 Language base,支援各式不同的 Devices,包涵各種不同的 Screen Size。Mojito 語言就是 JavaScript,Client, Server 全部都是。大家可以到 Yahoo Github 找到完整 Source Code。Mojito 整合了 YUI3Node.js 當作伺服器端。個人覺得這套好用的原因在於架構清楚,並且幫忙分離檔案目錄結構,這樣對於共同開發團隊非常有幫助。

Noder eyes for frontend guys

這場由 Fillano 主講,主要是給大家一堆寫 Node.js 之前所需要的 Javascript 知識,像是單一執行緒,或者是會碰到 async mode,以上都是寫 JS 的工程師會遇到的,投影片值得一看再看,請參考此下載連結

Non-MVC Web Framework

永遠的大四生 Fred 所講的一套 MVC Web Framework,base on node.js,講者提到台北一堆神人都自己寫一套 Framework,所以講者也自己創了一套 XD,原本是 RedTea (淡定紅茶 Framework),後來作者把 Express Framewrok 導入,讓開發者更趨向於使用 Express Framework,並且結合 RedTea 所有功能,衍生出另外一套 Kamalan Web Framework 詳細可以參考作者 blog: 【JSDC.tw 2012 簡報檔釋出】Non-MVC Web Framework

Refactoring with Backbone.js

Jace Ju 主講,如何幫網站擦屁股,這是我這次去會議看到最多程式碼的一個 Section,主要是把網站本身的 jQuery 程式碼重構成 Backbone.js,對於新人來說是非常好的學習,大家可以看看簡報檔,裡面有講者一步一步詳細分析該如何重構整個 Javascript,完整的把 Backbone.js 導入到開發專案,相信看完此 Slide,會有更多人投入 Backbone.js。

心得

個人蠻喜歡參加這種大型會議,可以學習到不同的架構,聽到不同的心得,以及瞭解目前大家開發主流的工具及語言,希望下次能有機會可以分享自己的心得 XD。

Related View

四月 11, 2012

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 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 的話,那只要新增的元件就無法作用,講得有點抽象,底下直接看個例子:

html 程式碼:

<div class="container well">
    <h1>jQuery Click Event</h1>
    <p>&nbsp;</p>
    <button class="btn btn-primary add">Click me to add new item</button>
    <ul style="margin-top:5px;margin-bottom:5px;" class="li">
        <li style="margin-top:5px; font-size:1.2em">I am old item.&nbsp;&nbsp;<button class="btn btn-danger delete">Delete</button></li>
        <li style="margin-top:5px; font-size:1.2em">I am old item.&nbsp;&nbsp;<button class="btn btn-danger delete">Delete</button></li>
        <li style="margin-top:5px; font-size:1.2em">I am old item.&nbsp;&nbsp;<button class="btn btn-danger delete">Delete</button></li>
        <li style="margin-top:5px; font-size:1.2em">I am old item.&nbsp;&nbsp;<button class="btn btn-danger delete">Delete</button></li>
    </ul>
</div>

jQuery Click 事件

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
(function ($) {
    $(".add").click(function(){
        $(".li").append('<li style="margin-top:5px; font-size:1.2em">I am new item.&nbsp;&nbsp;<button class="btn btn-danger delete">Delete</button></li>');
    });
    $(".delete").click(function(){
        $(this).parent().remove();
    });
})(jQuery);
</script>

上面例子,大家可以發現只要是透過 button 新增加的 li element 都不可以被刪除,原因就是在 .delete 是 bind 在 click 事件。這時候就要用 jQuery.on API 來重新實做,其實很簡單,只要將 click 改成 on 就完成了,請取代底下程式碼。

$(".delete").click(function(){
    $(this).parent().remove();
});

換成

$(document).on('click', '.delete', function(event){
    $(this).parent().remove();
});

直接看 Demo 範例,這樣可以更直接瞭解。

Related View

三月 28, 2012

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» jQuery stopPropagation 和 stopImmediatePropagation 比較

近期在幫公司導入 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);
        }
        if (this.collection) {
            this.collection.bind("all", this.render, this);
        }
    },

    events: {
      'click .add': 'add',
      'click .edit': 'edit',
      'click .delete': 'delete_item',
      'click .delete_all': 'delete_all'
    },

   add: function(e) {
   
   },
)};

上面程式碼可以看到,將 click 事件綁在不同 Class 上,但是問題來了,如果同時 new 兩個 RT.View 物件,當我觸發 click 事件時,就會發生兩次一樣的效果,該如何解決這問題呢,可以透過 jQuery 的 stopPropagationstopImmediatePropagation,這兩個其實很好區分,前者只會防止目前 Dom Tree 的上一層事件,後者則是會防止全部 Dom Tree 事件

不多說直接看個例子,先以 stopPropagation 當例子

<div><p style="background-color:#ccc; width:300px; height:300px"></p></div>
$("p").click(function(event){
  event.stopPropagation();
});
$("p").click(function(event){
  alert('test');
});
$("div").click(function(event){
  alert('test');    
});

執行過後,你會發現點選該區域只會跳出一個 alert 視窗,如果把 event.stopPropagation(); 換成 event.stopImmediatePropagation(); 則完全不會跳出 alert 視窗。

Related View

八月 6, 2011

小惡魔AppleBOY
AppleBOY
is about »

tag cloud