在前一篇介紹 [JavaScript Concurrency 的文章][weihanglo-promise]中，Promise 提供開發者安全統一的標準 API，透過 thenable 減少 callback hell，巨幅降低開發非同步程式的門檻，大大提升可維護性。不過，Promise 仍沒達到 JS 社群的目標「Write async code synchronously」。本篇文章將簡單最新的 Concurrency Solution「Async Functions」，利用同步的語法寫非同步的程式，整個人都變潮了呢！
（撰於 2017-06-17，基於 ECMAScript 7+）
| /** | |
| * GET request with a cancelable token | |
| * @param {string} url - url to request | |
| * @param {objecg} token - an object with a `cancel` function property. | |
| * @return {Promise} | |
| */ | |
| export function cancellableGet (url, token) { | |
| const xhr = new XMLHttpRequest() | |
| return new Promise(function (resolve, reject) { | |
| token.cancel = function () { |
| /** | |
| * Get real element offset with an offsetParent referencing element | |
| * | |
| * `getBoundingClientRect` return values is not correct under CSS multi-column | |
| * layout, so we recursively get `offsetLeft`/`offsetTop` instead. | |
| * @param {HTMLElement} el - element of interest | |
| * @param {HTMLElement} stopEl - one of the offsetParent as a reference | |
| * @return {object} object wth top and left offset | |
| */ | |
| export function getClientOffset (el, stopEl) { |
| /** | |
| * Calculate the rendered rect of img content (useful with object-fit: contain) | |
| * @param {HTMLImageElement} img | |
| * @return {object} rect of the object (the coordinate origin is top-left). | |
| */ | |
| export function getRenderedRect (img) { | |
| const style = window.getComputedStyle(img) | |
| const pos = style.getPropertyValue('object-position').split(' ') | |
| const contains = style.getPropertyValue('object-fit') === 'contain' |
About two month ago, I started making a React Native app ["PyConTW 17"][pycontw-mobile] for the biggest annual Python conference in Taiwan ([PyCon Taiwan][pycontw]). The app is quite simple, but still took some efforts for me to build. As a complete React newbie, I would like to share some of my thoughts about React Native.
(written on 2017-07-30, based on React Native 0.44.2)
