JavaScript - eddychang.me

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


前言

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

Callback 回調


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

Callback(回調)是什麼?

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

Callback簡單一例


名詞解釋

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

Closure 閉包


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

閉包定義

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

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

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

Closure圖解


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新時代學習建議


前言

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

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


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

Javascript近日心得整理


前言

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

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

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


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

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

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

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


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


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

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

Promise教學 - 前言


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


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

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

Promise教學 - 基本概念


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


異步Callback(回調)

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

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

Source Map(原始碼映射表)


前言

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

Strict Mode(嚴格模式)


Javascript中的物件導向

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

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

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

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

this


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

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

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


前言

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

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

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