@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 最關鍵的幾個核心功能，並且用友善的模組化設計，保持每個功能能夠輕易地被擴充。

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 開發者歡迎，所以最後我就拿這兩套樣版引擎來比較，以下是值得提出來講的部分。

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