Airbnb React/JSX Style Guide重譯版

前言
本篇翻譯是重新翻譯Airbnb React/JSX Style Guide的內容。原先已有另一篇中文翻譯。
這篇翻譯遵循了在這個翻譯指引 Translation Guide中的翻譯規則,希望能提供更容易閱讀與理解的翻譯內容。
JavaScript - eddychang.me
本篇翻譯是重新翻譯Airbnb React/JSX Style Guide的內容。原先已有另一篇中文翻譯。
這篇翻譯遵循了在這個翻譯指引 Translation Guide中的翻譯規則,希望能提供更容易閱讀與理解的翻譯內容。
本文說明了使用Atom打造開發React時使用的開發工具。Atom需要安裝不少套件才能使用,它並不是一個軟體就完全滿足所有需求的軟體,本文的目的是提供一些安裝與設定的經驗。另外,某些套件也需要進一步設定,尤其是某些特殊使用的軟體,需要另外搭配Node.js才能正常使用。
本文章摘錄自從ES6開始的JavaScript學習生活一書中的內容。有興趣可以前往觀看。
中文翻譯字詞會用"回呼""、"回叫"、"回調",都是聽起來很怪異的講法,Callback在英文是"call back"兩個單字的合體,你應該有聽過"Call me back"的英文,實際情況大概是有客戶打來電話給你,可是你正在電話中,客戶會留話說請你等會有空時再"回電"給它,這裡的說法是指在電信公司裡的callback的涵意。而在程式開發上上,callback它的使用情境其實也是有類似的地方。
不論這個專有名詞用中文的"回呼"、"回叫"、"回調",都是聽起來很怪異的講法,callback在英文是"call back"兩個單字的合體,你應該有聽過"call me back"的英文,大概是有客戶留電話給你,當你在忙碌時,請你等會有空時再"回電"給它,這裡的說法是指在電信公司裡的callback名詞的涵意。而用在軟體工程上,callback它的使用情境其實也是有類似的地方,維基上的說明我就不說了,其實我也有看沒有懂。雖然在許多程式語言中都可以實現callback,但這裡專注的是在Javascript上的"異步(asynchronous) callback"機制。其他關於"同步callback機制"參考維基百科。
本文章摘錄自從ES6開始的JavaScript學習生活一書中的內容。有興趣可以前往觀看。
Closure這個字詞是由Close與字尾-ure所構成,-ure有"動作"、"進行"或"結果"的意思,如果close是關閉的意思,clousure就是關閉的結果或動作,它可以作為名詞或動詞使用,中文有"封閉"、"終止"或"結束"的意思。
由於JavaScript語言中的函式是頭等函式(first-class function)的設計,代表函式在語言中的應用上享有與一般原始資料類型的值同等地位,函式可以傳入其他函式作為傳入參數,可以當作另一個函式的回傳值,也可以指定為一個變數的值,或是儲存在資料結構中(例如陣列或物件),在語言中甚至是有自己獨有的資料類型(typeof
一個函式回傳值是'function')。
閉包是一種資料結構,包含函式以及記住函式被建立時當下環境。
先看範例,一個典型的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');
前些日子,寫了一個Joomla!用的編輯器外掛 - EpicEditor。說是我寫的就太超過了,事實上是"整合"和"調整"比較適合,講白話一點就是拿一些合用的零組件拼裝一翻。編輯器原本就是用Javascript開發,不意外,不過在我"組裝"的過程中,我發覺我花在搞定Javascript的時間上,大概比PHP多了五倍以上,這個意思是代表它很難搞定,還是事實上它在程式中的重要性比想像中高很多。
我們經常會看到Javascript主要應用在網站介面上,在這個層面,幾乎沒有任何一套程式語言可以取代它的地位,在今天愈來愈重視"UI"、"使用者經驗"的網站市場,花時間在Javascript程式語言的時間當然會變更多了。而像PHP程式語言這種已經固定式(尤其使用了程式框架之類),終端使用者看不到的東西,依照模式按步就班的寫也不差太多。以下為個人感想:
在JS中的運算符共同的情況中,(+)符號是很常見的一種,它有以下的使用情況:
當然,如果考慮多個符號一起使用時,(+=)與(++)又是另外的用途。
本內容是從免費電子書從Promise開始的JavaScript異步生活中轉貼過來,有興趣可以前往閱讀。
原生的ES6 Promise是符合Promises/A+標準的
所謂的Promises/A+標準,其實就是個幾千字的一頁網頁而已,裡面的說明與用語並不會太難理解。雖然ES6標準中也有自己的Promise物件標準章節,但因為裡面涉及很多實作技術說明,明顯地用字遣詞艱澀許多,所以在這裡就不多加討論。以下使用Promises/A+標準作為一個開始,來解說Promise的標準裡有什麼內容。這一章僅有定義部份,之後的解說也是會依照Promises/A+標準中的規則來說明。
本內容是從免費電子書從Promise開始的JavaScript異步生活中轉貼過來,有興趣可以前往閱讀。
ES6 Promise的實作中,會確保Promise物件一實體化後就會固定住狀態,要不就是"已實現",要不就是"已拒絕"
本內容是從免費電子書從Promise開始的JavaScript異步生活中轉貼過來,有興趣可以前往閱讀。
一個promise代表一個異步運算的最終結果 ~譯自Promises/A+
Promise語法結構提供了更多的程式設計上的可能性,它是一個經過長時間實戰的結構,在許多知名的函式庫或框架中很早就有見到Promise物件的身影,例如Dojo、jQuery、YUI、 Ember、Angular、WinJS、Q等等,之後Promises/A+社區則提供了統一的標準。在最近新一代的ES6標準中將會包含了Promise的實作,提供原生的語言內建支援,這將是個開始,往後會有愈來愈多API以此為基礎架構在其上。
本內容是從免費電子書從Promise開始的JavaScript異步生活中轉貼過來,有興趣可以前往閱讀。
Promise中的所有回調函式,都是異步執行的
我需要再次強調,並非所有的使用callbacks(回調)函式的API都是異步執行的。在JavaScript中,除了DOM事件處理中的回調函式9成9都是異步執行的,語言內建API中使用的回調函式不一定是異步執行的,也有同步執行的例如Array.forEach
,要讓開發者自訂的callbacks(回調)的執行轉變為異步,有以下幾種方式:
本篇翻譯是翻譯React style guide(Khan Academy)的內容。 這篇翻譯遵循了在這個翻譯指引 Translation Guide中的翻譯規則,希望能提供更容易閱讀與理解的翻譯內容。
Khan Academy是一個世界性的非營利教育組織,提供網路免費教學,在Youtube上有超過5600支教學影片。
本篇翻譯是重新翻譯React Style Guide的內容。 這篇翻譯遵循了在這個翻譯指引 Translation Guide中的翻譯規則,希望能提供更容易閱讀與理解的翻譯內容。
React Starter Kit是知名的"同構(isomorphic)"網路應用程式樣版文件(boilerplate)的專案。
本文提供了如何使用Source Map(原始碼映射表)進行Javascript除錯的指引。內容並沒有討論Source Map的詳細規格內容,有興趣可以看參考資料中的連結內,有收集很多相關的資訊。
對於一個直譯式語言而言,物件導向特性是不是有那麼樣的重要,有很多不同的意見,有人認為物件導向除了會拖慢執行的速度,不良的物件導向語法,反而會出現更多不預期的程式臭蟲(bugs)。
Javascript中的物件導向存在有很多與現在流行語言完全不同的物件導向特性,也就是說如果你有學過Java、C++之類的物件導向語法,在Javascript中不是很難作到,就是要用很有技巧性的方式才能達成(trick),尤其是在舊的Javascript標準中,如果不依靠這些技巧,有些物件導向的特性根本很難作得到。當然,新的Javascript標準(ECMAScript5或更新的6)中,對於OOP已經有大幅度的改進。
網路上有關於Javascript的物件導向開發部份的教學,很多都是舊式的標準的內容,新的標準中已經有很多新的作法,相較於舊式的內容,使用上更為簡單而且安全。例如用於建立物件的Object.create
方法,用於getter與getter的方法,以及許多方便開發者的Array方法。
本文專注於相容於目前大部份瀏覽器(與Node.js)的物件導向新特性,相容性可以到ECMAScript相容表觀看。
本文章摘錄自從ES6開始的JavaScript學習生活一書中的內容。有興趣可以前往觀看。
在其他以類別為基礎的程式語言中,this
指的是目前使用類別進行實體化的物件。而JavaScript語言中因為沒有類別這種東西,設計上也不一樣,this
的指向的是目前呼叫函式或方法的擁有者(owner)物件,也就是說它與函式如何被調用有關,雖然是同一函式的呼叫,因為不同的物件呼叫,也有可能是不同的this值。
展開運算子(Spread Operator)與其餘參數(Rest parameters)是ECMAScript 6中的其中一種新特性。也是懶人必學的Javascript新語法之一。這兩種特性的語法是一樣的,都是(...)三個點,我們常常在文字聊天時,這個(...)常用來代表了"無言"、"無窮的想像"或"後面其他的"的意思。
簡單摘要一下這個語法的內容: