jqLite Orz list (v1.1.5)

jqLite 是 AngularJS 為了方便進行 DOM 操作而又不希望讓 jQuery 成為 dependency 的解決方案，官方文件如是說：

jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM. jqLite implements only the most commonly needed functionality within a very small footprint, so only a subset of the jQuery API - methods, arguments and invocation styles - are supported.

並且在文件下方給了一串相關 API 文件的連結，連到 jQuery API Documentation 去。

嗯？連到 jQuery API Documentaion 有什麼不對嗎？

前言

爬一爬 jqLite 的 source code 就可以知道，其實它是嘗試照著 jQuery 的部分 API 做 subset-implementation，結果就是雖然它給了 jQuery API Documentation 的連結，它部分 API 的部分功能是與 jQuery 不同的。如果你還是照著使用 jQuery 的用法來使用 jqLite 而沒有做好爬 jqLite source code 的心理準備，應該會有點 happy …

本文整理了 v1.1.5 幾個比較常碰到的地雷，與各位共勉之。

環境設定

不載入 jQuery
由於 AngularJS v1.2.0 於本文撰寫時尚在 RC2，並且我自己主 project 在使用的版本為 v1.1.5，因此本文針對的版本為 v1.1.5。

.css() as `setter` 不會自動加上 `px` 單位

jQuery 除了部分的 css style，其餘 style 在沒有帶入單位的時候，預設都會加上 px 做為單位，而 jqLite 不會幫你加。

// works
iElm.css('font-size', '18px');

// won't work
iElm.css('font-size', 18);

Demo

與下一段 getter 一併 Demo。

.css() as `getter` 不會取 computed style

有些 style 是具有繼承性質的(e.g. font-size, color, etc…)，而 jqLite 的 .css() 不像 jQuery 會想辦法取得瀏覽器計算後的結果，它只能夠取得該 DOM element 上已設定的 style 內容。

console.log( iElm.css('font-size') );
// output: ""

// jQuery 的取法
iElm[0].ownerDocument.defaultView.getComputedStyle(iElm[0]).fontSize;

Demo

利用 <input type=”text”> 來修改期望的 font-size
用上一段所說的方法實做了兩種 setter 的 directive font-size-success 及 font-size-error
更新 font-size 的同時，另一個 directive get-font-size 會嘗試從沒有被直接設定 style 的 <span> 上取得 jqLite 直接拿的 font-size 以及計算的 font-size

.bind() 與 .unbind() 對 `eventType` 參數的理解不同

此問題於 v1.2.0rc1 後已修正。

何謂理解不同呢？在 eventType 代入 "play ended pause" 的時候：

.bind() 會視為 play, ended, pause 三個分別處理
.unbind() 沒有把它們切開，於是根本就會找不到這個 event 來 unbind

// 一次綁三個: play, ended, pause
iElm.bind('play ended pause', playbackHandler);

// 這邊這樣無法 unbind 且不會跳錯誤
iElm.unbind('play ended pause', playbackHandler);
// 一樣無法 unbind
iElm.unbind('play ended pause');

// 成功 unbind，不過基本上把事件都清光了
iElm.unbind();

// 一個一個來會成功
angular.forEach(['play', 'ended', 'pause'], function (evtName) {
  iElm.unbind(evtName, playbackHandler);
});
// 對，就是一個一個來
iElm.unbind('play', playbackHandler);
iElm.unbind('ended', playbackHandler);
iElm.unbind('pause', playbackHandler);

Demo

bind-unbind directive 試著將給定的事件 .bind() 至按鈕上並立刻 .unbind()
實作 .unbind() 的方法是上述不會成功的做法，因此嘗試去按鈕上觸發事件還是可以成功執行 bind-unbind-trigger 的內容
歡迎使用 Edit 功能將 directive 裡面的 .unbind() 替換成會成功的做法看看結果

TL;DR

把 jQuery 擺在 AngularJS 前載入，一勞永逸。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>