React全棧--現代前端技術

1.ES6-- 新一代JavaScript標準

1.1 const和let關鍵字

之前只有全局變量以及函數內部的局部變量，因此之前的局部變量只能定義在函數裏面，可是如今不是了，能夠經過let關鍵字來定義局部變量。同時經過const關鍵字來定義常量，定義後的基本類型數據是不能改變的，可是定義的是引用類型的變量的話，仍是能夠改變的。

1.2 函數

1.箭頭函數，在回調中頗有做用，箭頭函數永遠是匿名的

2.this在箭頭函數中的使用：在嵌套函數中，碰到setInterval, setTimeout等定時器函數時，this會發生漂移，指向windows（global對象），之前咱們要將this緩存[var self = this;]()或者經過[(){}.bind(this]())來改變this的內部函數的指向，可是有了箭頭函數後，不再用更擔憂這個問題了；

3.函數默認參數，之前的函數默認參數 [var a = a || []]();可是ES6支持了函數的默認參數；

4.rest參數[...](),rest參數是沒有指定變量名的參數數組，而arguments是全部參數的集合。並且arguments參數不是一個真正的數組，而rest參數是一個真的數組，能夠調用sort和map方法。能夠告別arguments參數了；

1.3.展開符操做

...能夠用於函數的調用，數組字面量，以及對象的展開（ES7）.

1.4.模板字符串

用反引號標識。它能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。模板字符串中嵌入變量，須要將變量名寫在${}之中。

// 字符串中嵌入變量

var name = "Bob", time = "today";
Hello {name}, how are you {time}?

1.5 解構賦值

解構方法能夠很快的從數組或者對象中提取變量，能夠用一個表達式讀取整個解構；

1.6 類

JavaScript是原型繼承的，但聲明起來卻很怪，全部提供了一個原型鏈的class語法糖。經過class關鍵字定義了一個「類」，能夠看到裏面有一個constructor方法，這就是構造方法，而this關鍵字則表明實例對象。constructor方法是類的默認方法，經過new命令生成對象實例時，自動調用該方法。一個類必須有constructor方法，若是沒有顯式定義，一個空的constructor方法會被默認添加。

注意，定義「類」的方法的時候，前面不須要加上function這個關鍵字，直接把函數定義放進去了就能夠了。另外，方法之間不須要逗號分隔，加了會報錯。類的數據類型就是函數，類自己就指向構造函數。

Class之間能夠經過extends關鍵字實現繼承，這比ES5的經過修改原型鏈實現繼承，要清晰和方便不少。

子類必須在constructor方法中調用super方法，不然新建實例時會報錯。這是由於子類沒有本身的this對象，而是繼承父類的this對象，而後對其進行加工。若是不調用super方法，子類就得不到this對象。另外一個須要注意的地方是，在子類的構造函數中，只有調用super以後，纔可使用this關鍵字，不然會報錯。這是由於子類實例的構建，是基於對父類實例加工，只有super方法才能返回父類實例。

super這個關鍵字，既能夠看成函數使用，第一種狀況，super做爲函數調用時，表明父類的構造函數。第二種狀況，super做爲對象時，指向父類的原型對象。能夠採用super(). + 方法名字來調用父類的方法。

類至關於實例的原型，全部在類中定義的方法，都會被實例繼承。若是在一個方法前，加上static關鍵字，就表示該方法不會被實例繼承，而是直接經過類來調用，這就稱爲「靜態方法」。

1.7 模塊

1.首先推出Require.js的AMD規範，Node.js誕生後，隨之而來的是CommonJS格式，後來的browerify，知道es6推出了模塊化，對模塊化進行了支持；

es6模塊功能主要由兩個命令構成：export和import。export命令用於規定模塊的對外接口，import命令用於輸入其餘模塊提供的功能。經過as取別名。

export {firstName, lastName, year};
import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

1.8 使用Babel

各類方案層出不窮，JavaScript不斷髮展，致使不少性能沒法普及，babel提供了JavaScript多用途編譯器。讓你能夠開心的使用ES6.

Babel經過安裝插件（plugin）或者預設（preset，就是一組設定好的插件）來編譯代碼。建立一個.babelrc文件。

{
  "presets":[],
    "plugins":[]
}

2.Component組件與模塊化

首先要明白兩個概念：模塊（module）和組件（component）,模塊是指的語言層面的，在前端大多數指的是一個JavaScript模塊，每每變現爲一個JavaScript文件，以及其對外暴露的一些屬性和方法。組件更偏向於業務層面，每每是一個獨立功能的實現，好比一個下拉菜單，文本編輯器，路由系統等。一個組件每每包括其所需的全部資源，包括邏輯js,樣式css，模板html（template），甚至圖片和文字。

2.1模塊化方案的階段

1.全局變量+命名空間：

避免污染全局做用域，模塊內部一般用匿名自執行函數。問題多多：（1）依賴全局變量，污染全局變量的同時，不安去.（2）依賴約定的命名空間，不可靠。（3）要手動管理並控制執行，容易出錯，在上線前要手動合併一些模塊

2.AMD+CommonJs

解決時上述的問題，全局下定義require和define，不須要其餘變量

經過文件路徑或模塊聲明來定義模塊

依賴與加載都是由加載器完成，提供了打包工具自動分析依賴併合並

3.ES6模塊化

JavaScript帶來了本身的模塊化方案，相比AMD/CommonJS,功能更強大，引用和暴露的方式更多樣，支持複雜的靜態分析，使構建工具更細粒度地移除模塊實現中的無用代碼。

2.2 組件化階段

1.基於命名空間的多入口文件

基於前面的第一種模塊化方案，不一樣資源手動導入，最典型的就是jQuery插件；

2.基於模塊的多入口文件

隨着前端模塊化方案的流行，組件也趨於AMD這樣的規範，把組件也暴露爲一個模塊。一個AMD模塊的JavaScript，一個CSS(Less,Sass)模塊的樣式，以及其餘資源。

3.單JavaScript入口的組件

這是如今比較流行的方案，藉助browerify、webpack這樣的打包工具，容許咱們將通常的資源當作JavaScript模塊來對待。並一致的加載進來。

4.Web Component

這是組件化裏的國家隊，與2011年提出，可是還處於不溫不火的狀態，主要包括自定義元素（Custom Element）、HTML模板（HTML Template）、Shadow DOM、HTML 的引入（HTML Import）

3.前端開發經常使用工具

1.包管理工具

用來安裝、管理和分享JavaScript包，同時自動處理多個包之間的依賴。主要有包管理工具，Bower、Component、Spm、以及Node.js的親兒子npm;

2.任務流工具

在前端項目中會遇到各類各樣的任務，好比壓縮合並代碼、驗證代碼格式、測試代碼、監視文件等等，執行這些方法不可能每次都去手動寫這些命令，很是麻煩，接觸Linux的確定會想到shell腳本。如今前端比較流行的有Grunt和Gulp兩個；

3.模塊打包工具

主要有bundler和webpack兩個，webpack做爲後起之秀，它支持AMD、CommonJS類型，經過loader機制也可使用ES6的模塊格式，正向一個全能型構建工具發展。