hello.js

var please = require('share');
console.log('thank you');

Friday, 1 September, 2017 UTC

Hash maps without side effects

Hash maps without side effects

Hash maps without side effects When you want to use javascript object as a hash map(purely for storing data), you might want to create it as follows. const map = Object.create(null); When creating a map using object literal( const map = {} ), the map ... more


Friday, 16 June, 2017 UTC

循環陣列

循環陣列

這裡有一些方法在 JavaScript 中可以循環陣列。我們將從典型例子並且補充標準規範。 while let index = 0; const array = [1,2,3,4,5,6]; while (index < array.length) { console.log(array[index]); index++; } for(典型) const array = [1,2,3,4,5,6]; for (let index = 0; index < array.length, ... more


Thursday, 15 June, 2017 UTC

Closures inside loops

Closures inside loops

If you ever come across the likes of var funcs = []; for (var i = 0; i < 3; i++) { funcs[i] = function() { console.log("i value is" + i); }; } for (var i = 0; i < 3; i++) { funcs[i](); } You will notice that the expected output of i value ... more


Thursday, 15 June, 2017 UTC

Immutable structures and cloning

Immutable structures and cloning

Object cloning is a tricky, full of edge-cases, endeavor. The reason is simple enough. Objects maintain internal state, and that is much abused. There are countless techniques, or better phrased, countless derivations of the same technique. Cloning an ... more


Thursday, 15 June, 2017 UTC

Looping over arrays

Looping over arrays

Looping over arrays There’s a few methods for looping over arrays in Javascript. We’ll start with the classical ones and move towards additions made to the standard. while let index = 0; const array = [1,2,3,4,5,6]; while (index < array.length) { console.log(array[index]); ... more


Monday, 29 May, 2017 UTC

Upping Performance by Appending/Keying

Upping Performance by Appending/Keying

React uses a mechanism called reconciliation for efficient rendering on update. Reconciliation works by recursively comparing the tree of DOM elements, the specifics of the algorithm might be found on the official documents or the source, which is always ... more


Monday, 24 April, 2017 UTC

Improving your Async functions with WebWorkers

Improving your Async functions with WebWorkers

JS shall have but one Thread (in the browser at least) – Thus spoke the master programmer. JS runs in a single thread in the browser, this is the truth. Somewhere in its own universe, there exists a Queue which holds messages and functions associated ... more


Tuesday, 11 April, 2017 UTC

Protocols for the Brave

Protocols for the Brave

You might have heard about the old ways gaining hype recently, and we don’t mean praying to the gods of the north. Functional programming is the rediscovered toy which is bringing some sanity to the world of mutable state and global bindings. Today we’re ... more


Monday, 10 April, 2017 UTC

Adventurers Guide to React (Part I)

Adventurers Guide to React (Part I)

I used to be an adventurer like you, but then I took a RTFM in the knee… Guard outside of Castle Reducer in the Land of React So you’ve heard of this React thing, and you actually peeked at the docs, maybe even went through some of the pages. Then you ... more


Monday, 10 April, 2017 UTC

React 冒險者指南(Part I)

React 冒險者指南(Part I)

I used to be an adventurer like you, but then I took a RTFM in the knee… Guard outside of Castle Reducer in the Land of React 所以你聽說過 React 這件事,實際上或許你通過了一些網頁看過了文件,然後你突然碰到一些莫名其妙的與 Webpack、Browserify、Yarn、Babel、NPM 等等更多相關的東西。 因此,你到了它們的官方網站透過文件,只會發現自己為了使用 ... more


Friday, 7 April, 2017 UTC

Vuejs在資料綁定時會複製更新並替換目標元素

Vuejs在資料綁定時會複製更新並替換目標元素

概述 Vuejs是一款簡單而強大的軟體傑作,類似其它流行的UI框架,Angularjs和Reactjs,但不像這兩者令人生畏的複雜性,Vue非常簡單,在從入門到放棄之前,你能很快掌握它的全部知識並投入生產。 但是如果你不知道它怎麼工作的,有時候它也會難為你。這裡是一個和其它UI框架(Framework7)衝突的例子。 <!-- index.html --> <div class="pages"> <div class="page" ... more


Thursday, 6 April, 2017 UTC

Vuejs在資料綁定時會複製更新並替換目標元素

Vuejs在資料綁定時會複製更新並替換目標元素

概述 Vuejs是一款簡單而強大的軟體傑作,類似其它流行的UI框架,Angularjs和Reactjs,但不像這兩者令人生畏的複雜性,Vue非常簡單,在從入門到放棄之前,你能很快掌握它的全部知識並投入生產。 但是如果你不知道它怎麼工作的,有時候它也會難為你。這裡是一個和其它UI框架(Framework7)衝突的例子。 <!-- index.html --> <div class="pages"> <div class="page" ... more


Thursday, 6 April, 2017 UTC

VueJS, How VueJS makes a copy-update-replace inside the data binding.

VueJS, How VueJS makes a copy-update-replace inside the data binding.

Overview Vuejs is a wonderful piece of software that keeps simple yet powerful compared to other prevalent frameworks, like Angularjs and Reactjs. You can quickly master it before you give up by being in awe of the framework complexity unlike them above. ... more


Thursday, 6 April, 2017 UTC

Vuejs 如何在資料綁定時,拷貝、更新並取代原來的資料

Vuejs 如何在資料綁定時,拷貝、更新並取代原來的資料

概觀 Vuejs 是一個相當優雅的軟體,相對於其他流行的框架像是 Angularjs 和 Reactjs,它讓你保持簡潔而且強大。 你以前可能因為害怕而放棄那些複雜的框架,但是 Vuejs 不像上面那些框架這麼複雜,你可以很快速的上手。 如果你不知道它是如何運作的,你可能會時常在踩地雷。這裡是另一個簡單而且受歡迎的 Framework7 UI 框架衝突的範例。 <!-- index.html --> <div class="pages"> <div ... more


Wednesday, 5 April, 2017 UTC

Picking and rejecting object properties

Picking and rejecting object properties

Sometimes we need to whitelist certain attributes from an object, say we’ve got an array representation of a database table and we need to select just a few fields for some function: function pick(obj, keys) { return keys.map(k => k in obj ? {[k]: ... more


Wednesday, 5 April, 2017 UTC

Enhancing React components, Composition

Enhancing React components, Composition

At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies. Long live to composition, inheritance is dead. So, how do you extend a component in React? Well, ... more


Wednesday, 5 April, 2017 UTC

選擇或是拋棄物件屬性

選擇或是拋棄物件屬性

有時候我們需要列出物件中某些屬性,假設我們有一個陣列來表達一個資料表,我們需要有些 function 來 select 欄位: function pick(obj, keys) { return keys.map(k => k in obj ? {[k]: obj[k]} : {}) .reduce((res, o) => Object.assign(res, o), {}); } const row = { 'accounts.id': 1, 'client.name': 'John ... more


Wednesday, 5 April, 2017 UTC

选择(picking)和反选(rejecting)对象的属性

选择(picking)和反选(rejecting)对象的属性

有时候我们需要将一个对象的某些属性放到白名单里,这样来说,我们有一个数组代表了一张数据库表,并且为了一些功能我们需要从中选出( select )一些字段: function pick(obj, keys) { return keys.map(k => k in obj ? {[k]: obj[k]} : {}) .reduce((res, o) => Object.assign(res, o), {}); } const row = { 'accounts.id': 1, 'client.name': ... more


Tuesday, 4 April, 2017 UTC

增強你的 React component 的組合

增強你的 React component 的組合

在 Facebook 上,我們使用上千個 React 的 component, 我們找不到任何推薦你使用 component 建立繼承的情況。 Long live to composition, inheritance is dead. 所以,你如何在 React 繼承 一個 component? 好吧,相當明顯的,@Facebook 的人認為從父 component 繼承是不恰當的,讓我們看看其他方法: 提前規劃 在某些情況,你有一個 component 但是不知道它會不會有 children(大多數人都是這樣)。關於這點,React ... more


Monday, 3 April, 2017 UTC

Why you should use Object.is() in equality comparison

Why you should use Object.is() in equality comparison

We all know that JavaScript is loosely typed and in some cases it fall behind specially when it comes to quality comparison with ‘==’, comparing with ‘==’ gives unexpected results due to whats called coercion or casting “converting one of the 2 operands ... more


Monday, 3 April, 2017 UTC

為什麼在做相等比較的時候,你應該使用 Object.is()

為什麼在做相等比較的時候,你應該使用 Object.is()

我們都知道 JavaScript 是一個較鬆散的型別,在某些情況它特別是在 == 的情況,當你透過 == 來做比較時,常常會得到意外的結果,基於這個原因我們會強制轉換或建立新的變數來「將兩個操作變數中的其中一個轉換為其他類型,然後進行比較」。 0 == ' ' //true null == undefined //true [1] == true //true 所以他們提供我們三等號 === 的相等操作符,它更嚴格而且不強制去轉換變數,然而 === 比較不是一個比較好的解決方式,你可以得到這樣的結果: ... more


Monday, 3 April, 2017 UTC

为什么你应该在相等比较中使用 Object.is()

为什么你应该在相等比较中使用 Object.is()

我们都知道 JavasSript 是弱类型的,并且当我们使用 ‘==’ 作比较时,在一些情况下由于类型转换或者说“把两个操作数中的一个转换成另一个,然后在比较”,会出现意想不到的结果。 0 == ' ' //true null == undefined //true [1] == true //true 因此 JavaScript 中给我们提供了全等操作符 ‘===’, 它比不全等操作符更加严格并且不会发生类型转换。但是用 ‘===’ 来进行比较并不是最好的解决方案。你可能会得到: NaN === ... more


Wednesday, 29 March, 2017 UTC

Recursion, iteration and tail calls in JS

Recursion, iteration and tail calls in JS

If you’ve been on the business for some time, you have, most likely, come across the definition of recursion, for which the factorial of a given number n! = n * n - 1 * ... * 1 is a standard example. function factorial(n) { if (n === 0) { return 1; } ... more


Wednesday, 29 March, 2017 UTC

在 JavaScript 遞歸、反覆運算並尾呼叫

在 JavaScript 遞歸、反覆運算並尾呼叫

如果你已經有一段實務經驗了,你最有可能會遇到遞迴,給定一個數字來定義階乘(factorial), n! = n * n - 1 * ... * 1 就是一個標準的例子… function factorial(n) { if (n === 0) { return 1; } return n * factorial(n - 1); } 上面的範例是最常見的階乘 function。 為了更完整理解,讓我們來看 n = 6 是如何執行的: factorial(6) 6 * factorial(5) 5 ... more


Monday, 27 March, 2017 UTC

從 State 到 Prop 的映射

從 State 到 Prop 的映射

你可能在你建立的 React Apps 使用 Redux Store 有段時間了,當 component 經常更新時,你可能會感到很不便。 你已經徹底建立你的 state,而且架構你的每個 component 所需要的 state。然而在這些更新 state 的背後,總是在做 state 的 map 和計算。 使用 Reselector 來拯救 如何只計算我們所需要的 state?如果這個 state tree 的部分改變了,沒錯!請更新 state。 讓我看一下簡單的 TODOs List,特別是在我們的 ... more


Monday, 27 March, 2017 UTC

State to Props maps with memory

State to Props maps with memory

You’ve been building your React apps with a Redux store for quite a while, yet you feel awkward when your components update so often. You’ve crafted your state thoroughly, and your architecture is such that each component gets just what it needs from ... more


Thursday, 16 March, 2017 UTC

使用監聽(tap)來快速 debug

使用監聽(tap)來快速 debug

一個相當有用 function 用來快速 debung 一連串的 function 呼叫、匿名函式,實際上你可能只是想要列印而已。 function tap(x) { console.log(x); return x; } 為什麼你不使用 console.log 的老方式呢?讓我示範一個範例: bank_totals_by_client(bank_info(1, banks), table) .filter(c => c.balance > 25000) .sort((c1, c2) ... more


Thursday, 16 March, 2017 UTC

Tapping for quick debugging

Tapping for quick debugging

This little beastie here is tap. A really useful function for quick-debugging chains of function calls, anonymous functions and, actually, whatever you just want to print. function tap(x) { console.log(x); return x; } Why would you use instead of good ... more


Sunday, 12 March, 2017 UTC

Array 的三个技巧

Array 的三个技巧

在 JavaScript 中 数组(Array)随处可见,使用ECMAScript 6 中的新特性 扩展运算符 你可以做很多很棒事情。在这边文章中,我将为你介绍在编码中有用的3个技巧。 1. 迭代一个空数组 JavaScript 中直接创建的数组是松散的,以至于会有很多坑。试着用数组的构造方法创建一个数组,你就会明白我的意思。 > const arr = new Array(4); [undefined, undefined, undefined, undefined] 你会发现,通过一个讼案的数组去循环调用一些转换是非常难得。 ... more


Sunday, 12 March, 2017 UTC

使用 Array 的三個技巧

使用 Array 的三個技巧

在 JavaScript 中隨處都可以看見陣列,ECMAScript 6 中介紹到了展開運算符,你可以透過它來處理陣列。在這篇 tip,我將示範三個有用的技巧,當你在寫程式時可以使用。 1. 迭代一個空的陣列 JavaScript 陣列特性是鬆散的,所以在這裡有許多坑。嘗試使用陣列的建構子建立一個陣列,你會明白我的意思。 > const arr = new Array(4); [undefined, undefined, undefined, undefined] 你可能發現到,迭代一個鬆散的陣列並應用在某些轉換是相當困難的。 ... more