EddyChang

JavaScript - eddychang.me

Atom打造開發React的環境 - 簡介與套件

Eddy

前言

本文說明了使用Atom打造開發React時使用的開發工具。Atom需要安裝不少套件才能使用，它並不是一個軟體就完全滿足所有需求的軟體，本文的目的是提供一些安裝與設定的經驗。另外，某些套件也需要進一步設定，尤其是某些特殊使用的軟體，需要另外搭配Node.js才能正常使用。

Callback 回調

Eddy

本文章摘錄自從ES6開始的JavaScript學習生活一書中的內容。有興趣可以前往觀看。

Callback(回調)是什麼？

中文翻譯字詞會用"回呼""、"回叫"、"回調"，都是聽起來很怪異的講法，Callback在英文是"call back"兩個單字的合體，你應該有聽過"Call me back"的英文，實際情況大概是有客戶打來電話給你，可是你正在電話中，客戶會留話說請你等會有空時再"回電"給它，這裡的說法是指在電信公司裡的callback的涵意。而在程式開發上上，callback它的使用情境其實也是有類似的地方。

Callback簡單一例

Eddy

名詞解釋

不論這個專有名詞用中文的"回呼"、"回叫"、"回調"，都是聽起來很怪異的講法，callback在英文是"call back"兩個單字的合體，你應該有聽過"call me back"的英文，大概是有客戶留電話給你，當你在忙碌時，請你等會有空時再"回電"給它，這裡的說法是指在電信公司裡的callback名詞的涵意。而用在軟體工程上，callback它的使用情境其實也是有類似的地方，維基上的說明我就不說了，其實我也有看沒有懂。雖然在許多程式語言中都可以實現callback，但這裡專注的是在Javascript上的"異步(asynchronous) callback"機制。其他關於"同步callback機制"參考維基百科。

Closure 閉包

Eddy

本文章摘錄自從ES6開始的JavaScript學習生活一書中的內容。有興趣可以前往觀看。

閉包定義

Closure這個字詞是由Close與字尾-ure所構成，-ure有"動作"、"進行"或"結果"的意思，如果close是關閉的意思，clousure就是關閉的結果或動作，它可以作為名詞或動詞使用，中文有"封閉"、"終止"或"結束"的意思。

由於JavaScript語言中的函式是頭等函式(first-class function)的設計，代表函式在語言中的應用上享有與一般原始資料類型的值同等地位，函式可以傳入其他函式作為傳入參數，可以當作另一個函式的回傳值，也可以指定為一個變數的值，或是儲存在資料結構中(例如陣列或物件)，在語言中甚至是有自己獨有的資料類型(typeof一個函式回傳值是'function')。

閉包是一種資料結構，包含函式以及記住函式被建立時當下環境。

Closure圖解

Eddy

Closure範例程式碼

先看範例，一個典型的closure(閉包)會長這個樣子：


var varGlobal = 'x';

function outer(paramOuter){
  var varOuter ='y';

  function inner(paramInner){
    var varInner ='z';

    //print
    console.log(varGlobal);
    console.log(varOuter);
    console.log(varInner);
    console.log(paramOuter);
    console.log(paramInner);
  }

  return inner;
}

var func = outer('a');
func('b');

Javascript新時代學習建議

Eddy

前言

本文提供了一些現在剛入門要學習Javascipt的學習者的建議。這些是我個人目前的理解，以及心得感想。

JavaScript裡的語句用分號結尾是個選項嗎

Eddy

在JS裡的分號(;)是什麼作用？總結一下，它既是語句(表達式)的分隔，也可以作為語句的結尾。但只認為分號(;)就一定是語句的結尾是有疑問的…

Javascript近日心得整理

Eddy

前言

前些日子，寫了一個Joomla!用的編輯器外掛 - EpicEditor。說是我寫的就太超過了，事實上是"整合"和"調整"比較適合，講白話一點就是拿一些合用的零組件拼裝一翻。編輯器原本就是用Javascript開發，不意外，不過在我"組裝"的過程中，我發覺我花在搞定Javascript的時間上，大概比PHP多了五倍以上，這個意思是代表它很難搞定，還是事實上它在程式中的重要性比想像中高很多。

我們經常會看到Javascript主要應用在網站介面上，在這個層面，幾乎沒有任何一套程式語言可以取代它的地位，在今天愈來愈重視"UI"、"使用者經驗"的網站市場，花時間在Javascript程式語言的時間當然會變更多了。而像PHP程式語言這種已經固定式（尤其使用了程式框架之類），終端使用者看不到的東西，依照模式按步就班的寫也不差太多。以下為個人感想：

JS中的{} + {}與{} + []的結果是什麼？

Eddy

在JS中的運算符共同的情況中，(+)符號是很常見的一種，它有以下的使用情況:

  • 數字的加法運算，二元運算
  • 字串的連接運算，二元運算，最高優先
  • 正號，一元運算，可延伸為強制轉換其他類型的運算元為數字類型

當然，如果考慮多個符號一起使用時，(+=)與(++)又是另外的用途。

Promise教學 - Promises/A+標準定義

Eddy

本內容是從免費電子書從Promise開始的JavaScript異步生活中轉貼過來，有興趣可以前往閱讀。

原生的ES6 Promise是符合Promises/A+標準的

所謂的Promises/A+標準，其實就是個幾千字的一頁網頁而已，裡面的說明與用語並不會太難理解。雖然ES6標準中也有自己的Promise物件標準章節，但因為裡面涉及很多實作技術說明，明顯地用字遣詞艱澀許多，所以在這裡就不多加討論。以下使用Promises/A+標準作為一個開始，來解說Promise的標準裡有什麼內容。這一章僅有定義部份，之後的解說也是會依照Promises/A+標準中的規則來說明。

Promise教學 - 前言

Eddy

本內容是從免費電子書從Promise開始的JavaScript異步生活中轉貼過來，有興趣可以前往閱讀。

一個promise代表一個異步運算的最終結果 ~譯自Promises/A+

Promise語法結構提供了更多的程式設計上的可能性，它是一個經過長時間實戰的結構，在許多知名的函式庫或框架中很早就有見到Promise物件的身影，例如Dojo、jQuery、YUI、 Ember、Angular、WinJS、Q等等，之後Promises/A+社區則提供了統一的標準。在最近新一代的ES6標準中將會包含了Promise的實作，提供原生的語言內建支援，這將是個開始，往後會有愈來愈多API以此為基礎架構在其上。

Promise教學 - 基本概念

Eddy

本內容是從免費電子書從Promise開始的JavaScript異步生活中轉貼過來，有興趣可以前往閱讀。

異步Callback(回調)

Promise中的所有回調函式，都是異步執行的

我需要再次強調，並非所有的使用callbacks(回調)函式的API都是異步執行的。在JavaScript中，除了DOM事件處理中的回調函式9成9都是異步執行的，語言內建API中使用的回調函式不一定是異步執行的，也有同步執行的例如Array.forEach，要讓開發者自訂的callbacks(回調)的執行轉變為異步，有以下幾種方式:

Source Map(原始碼映射表)

Eddy

前言

本文提供了如何使用Source Map(原始碼映射表)進行Javascript除錯的指引。內容並沒有討論Source Map的詳細規格內容，有興趣可以看參考資料中的連結內，有收集很多相關的資訊。

Strict Mode(嚴格模式)

Eddy

Javascript中的物件導向

對於一個直譯式語言而言，物件導向特性是不是有那麼樣的重要，有很多不同的意見，有人認為物件導向除了會拖慢執行的速度，不良的物件導向語法，反而會出現更多不預期的程式臭蟲(bugs)。

Javascript中的物件導向存在有很多與現在流行語言完全不同的物件導向特性，也就是說如果你有學過Java、C++之類的物件導向語法，在Javascript中不是很難作到，就是要用很有技巧性的方式才能達成(trick)，尤其是在舊的Javascript標準中，如果不依靠這些技巧，有些物件導向的特性根本很難作得到。當然，新的Javascript標準(ECMAScript5或更新的6)中，對於OOP已經有大幅度的改進。

網路上有關於Javascript的物件導向開發部份的教學，很多都是舊式的標準的內容，新的標準中已經有很多新的作法，相較於舊式的內容，使用上更為簡單而且安全。例如用於建立物件的Object.create方法，用於getter與getter的方法，以及許多方便開發者的Array方法。

本文專注於相容於目前大部份瀏覽器(與Node.js)的物件導向新特性，相容性可以到ECMAScript相容表觀看。

this

Eddy

本文章摘錄自從ES6開始的JavaScript學習生活一書中的內容。有興趣可以前往觀看。

在其他以類別為基礎的程式語言中，this指的是目前使用類別進行實體化的物件。而JavaScript語言中因為沒有類別這種東西，設計上也不一樣，this的指向的是目前呼叫函式或方法的擁有者(owner)物件，也就是說它與函式如何被調用有關，雖然是同一函式的呼叫，因為不同的物件呼叫，也有可能是不同的this值。

展開運算子(Spread Operator)與其餘參數(Rest parameters)

Eddy

前言

展開運算子(Spread Operator)與其餘參數(Rest parameters)是ECMAScript 6中的其中一種新特性。也是懶人必學的Javascript新語法之一。這兩種特性的語法是一樣的，都是(...)三個點，我們常常在文字聊天時，這個(...)常用來代表了"無言"、"無窮的想像"或"後面其他的"的意思。

簡單摘要一下這個語法的內容：

  • 符號是三個點(...)
  • 都與陣列有關
  • 一個是用在函式的參數，一個是用在運算中