@ChingHanHo

I Build Stuff.

使用 Zepto + Velocity 無縫取代 jQuery 更輕巧

zeptojs

Zepto 是個跟 jQuery API 相容的套件,但是非常輕巧。

jQuery 1.11.2 不壓縮 278KB,壓縮後是 94.8KB。儘管 jQuery 2.0 比 jQuery 1.11 減少了 12% 的體積大小,仍然是個 200KB 級的套件。而 Zepto 不壓縮 56KB,壓縮後大約是 24.5KB,比 jQuery 平均小了 74%!

Zepto 極其輕巧的秘訣在於它預設只有 jQuery 最關鍵的幾個核心功能,並且用友善的模組化設計,保持每個功能能夠輕易地被擴充。

擴充 animate 模組

jQuery 的 animate 效能不是很好,上次在製作公司官網作品牆,讓圖片載完進行 fadeIn 的效果,造成 FPS 低到明顯感受到 lag。

通常需要用到大量的動態視覺效果的首選是 GreenSock 所提供的 TweenMax(344KB)。如果只是需要用來取代 jQuery 的 animate 操作 DOM 的動態效果,那麼能夠跟 jQuery 無縫整合的 Velocity(215KB)有更好的條件。Velocity 優點是效能高,體積比較小,也能夠相容 jQuery API。

Zepto 因為模組化設計的關係,預設是不包括 animate 這個方法的,因此便可以改用 Velocity 來擴充。

外部網站參考:

瀏覽器相容性

jQuery 2.0 開始就直接放棄 IE 9 以下的瀏覽器,Zepto 更狠直接跳到 IE 10+;而 Velocity 則是不支援 IE 8 以下,所以能不能使用 Zepto + Velocity 這個組合要先觀察一下產品的目標使用群。

如果打算支援 IE 8,還是去用 jQuery 1.11.3 吧!

9 個存取硬體裝置的 Javascript API

原生 HTML5 和 Javascript API 可以直接從瀏覽器存取硬體組件和感測器。這裏的硬體裝置主要是指手機。

點擊連結傳送簡訊

1
2
3
4
5
6
<a href="tel:0912345678">打給我!</a>

<!-- Android -->
<a href="sms:0912345678?body=你到哪了?">傳簡訊給我!</a>
<!-- iOS -->
<a href="sms:0912345678&amp;body=你到哪了?">傳簡訊給我!</a>

延伸資料:

地理定位 API

1
2
3
4
5
6
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function (position) {
    var whereareyou = position.coords.latitude + ' ,' + position.coords.longitude
    alert(whereareyou)
  })
}

裝置方向與裝置體感 API

這兩個功能是建立在裝置的陀螺儀和指南針感測器上,它能夠傳回目前裝置的旋轉角度,以及三個維度。

1
2
3
4
5
6
7
8
9
if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', function(event) {
    // gamma 是左到右傾斜的角度
    // beta  是前到後傾斜的角度
    // alpha 是裝置面向在指南針方位上的角度
    document.body.innerHTML = event.gamma + ' ,' + event.beta + ' ,' + event.alpha

  }, false)
}

有了裝置體感的 API,也可以做出搖一搖復原輸入的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', function(evnet) {

    document.body.innerHTML = evnet.acceleration.x + '<br/>' + evnet.acceleration.y + '<br/>' + evnet.acceleration.z

    // 加速感測
    console.log(evnet.acceleration.x)
    console.log(evnet.acceleration.y)
    console.log(evnet.acceleration.z)

    // 加速感測包括重力參數
    console.log(evnet.accelerationIncludingGravity.x)
    console.log(evnet.accelerationIncludingGravity.y)
    console.log(evnet.accelerationIncludingGravity.z)

    // 旋轉率
    console.log(evnet.rotationRate.alpha)
    console.log(evnet.rotationRate.beta)
    console.log(evnet.rotationRate.gamma)
  }, false)
}

延伸資料:

震動馬達

目前只支援 Android 的 Chrome 以及 Opera、Firefox,iOS 尚不支援。

1
2
3
4
5
var btn = document.getElementById('btn')
var vibrate = navigator.vibrate || navigator.mozVibrate || navigator.webkitVibrate
btn.addEventListener('click', function (event) {
  vibrate(1000)
})

延伸資料:

剩餘電力管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery

function log(_battery) {
  document.body.innerHTML = '目前電力剩下:' + (_battery.level * 100) + '%'
  _battery.addEventListener('chargingchange', function() {
    alert('開始充電!')
  }, false)
}

if (navigator.getBattery) {
  navigator.getBattery().then(log)
} else if (battery) {
  log(battery)
}

亮度感測器

目前只有 Firefox 支援這個 API。

1
2
3
4
5
6
if ('ondevicelight' in window) {
  window.addEventListener("devicelight", function (event) {
  // 回傳的是亮度單位 lux
  console.log(event.value + " lux")
  })
}

近距離感測 API

這個也是只有 Firefox 支援。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if('ondeviceproximity' in window) {
  // Fired when object is in the detection zone
  window.addEventListener('deviceproximity', function (event) {
      // Object distance in centimeters
      console.log(event.value + " centimeters")
    })
} else {
  console.log("deviceproximity not supported")
}

if('ondeviceproximity' in window){
  // Fired when object is in the detection zone
  window.addEventListener('userproximity', function (event) {
    if(event.near == true) {
      console.log("Object is near")
    } else {
      console.log("Object is far")
    }
  })
} else {
  console.log("userproximity not supported")
}

參考:

io.js 1.1 vs node.js 0.12.0 vs node.js 0.10.36

這篇文章不是要做深入的效能評比,只是最近 node.js v0.12.0 正式版釋出,又剛好人品很好地用 io.js 1.1 把專案建起來了,乾脆就在本機上做一下 node.js 新舊版和現在很熱的 io.js 效能紀錄。圖有點小,要嘛自己想辦法放大,要嘛就直接看結論吧!XD

Page 1

node.js v0.12.0 page1

node.js v0.12.0 TTFB 1.36s。

io.js v1.1.0 page1

io.js v1.1.0 TTFB 1.21s。

node.js v0.10.36 page1

node.js v0.10.36 TTFB 603ms。

io.js 是什麼?Node.js 社群分裂事件觀察

這個事件已經燒了好幾天,剛開始注意到是 Hacker News 上出現「IO.js – Evented I/O for V8 javascript」這篇推文,我甚至還不曉得到底該寫 IO.js 還是 io.js 比較正確。

整件事情發展詭譎得像 Prometheus 的 Elisabeth Shaw 剛發現黑色黏液一樣,不知道到底是希望還是崩壞的開始。最近公司有要用 Node.js 所以我就追了一下新聞,大概統整出來的概況寫了這篇觀察紀錄,或許有些可能有錯麻煩在幫我指正,感謝喔!

Node 樣版引擎評估:Jade、Handlebars

短文版

用 jade。

長文版

因為這個專案效能不會是評估重點,語法設計、擴充性、使用彈性會是比較在意的部分。

活在樣版引擎這個群雄割據的戰國時代實在太多選擇,從各方的評論和簡略地掃描文件上的語法特性,挑出以下幾個我比較喜歡的:

TJ 當初設計 Express 承襲 Ruby micro-framework Sinatra 的設計理念,ejs 好像是因應而生(?),從 ejs 語法上面可以看到非常多 Ruby 樣版引擎 ERb 的影子,對我來說是最「友善」的。不過 TJ 另創 jade 樣版引擎加上投奔 Go 世界以後,ejs 的活躍程度越來越低,從今年 5 月之後就再也沒有更新過了。

我向來都會先以「社群活躍度」來評量一個程式專案計畫可靠度,jade 貢獻者在 Github 上成立 jadejs 組織來維護專案,長久來看蠻可靠的。而 handlebars 在 Github 上也廣受 Javascript 開發者歡迎,所以最後我就拿這兩套樣版引擎來比較,以下是值得提出來講的部分。

(再強調一次好了:語法設計、擴充性、使用彈性是我比較在意的項目)