前言

喜歡聊一些新奇的技術，也喜歡學習新的東西，在這個日益繁榮的時代，有幸見證技術的發展是多么美好的一件事。

前端簡史

技術的發展總是遇到問題，去解決問題，然后不斷遇到問題，不斷解決問題。前端最初被稱為Front-end。主要是用來采集輸入信息，呈現界面效果。

關于前端的發展得從Tim在1990年發明了最原始的瀏覽器開始，隨著Tim推廣，美國國家超算應用中心開發了名為Mosaic 的瀏覽器，并于93年4月發布;第二年第一屆萬維網大會在日內瓦召開，同年7月，Html2.0規范發布，11月網景成立并發布第一代瀏覽器，改名為Navigator。94年底，W3C成立。此時，進入靜態網頁時代。也就是web1.0時代。

95年網景工程師 Brendan Eich 花了10天時間設計了 JavaScript 語言。與此相對的是，1996 年，微軟發布了 VBScript 和 JScript。第一次瀏覽器之爭開始了，同年11月，網景把javascript推向國際化，并在97年6月ECMA 以 JavaScript 語言為基礎制定了 ECMAScript 1.0 標準規范。第一次瀏覽器戰爭以 IE 瀏覽器完勝 Netscape 而結束，IE 開始統領瀏覽器市場，份額的最高峰達到 2002 年的 96%。隨著第一輪大戰的結束，瀏覽器的創新也隨之減少。作為獨裁者，IE 并不遵循 W3C 的標準，IE 成了事實標準。

js的誕生，可以說是開啟了動態網頁的時代，為了使得 Web 更加充滿活力，以 PHP、JSP、ASP.NET 為代表的動態頁面技術相繼誕生。

直到Google 分別在 2004 年和 2005 年先后發布了兩款重量級的 Web 產品：Gmail 和 Google Map。這兩款 Web 產品都大量使用了 AJAX 技術，不需要刷新頁面就可以使得前端與服務器進行網絡通信，顛覆了用戶體驗，這也體現了Ajax的較大的特性就是局部刷新。Ajax的流行，是我們進入了Web2.0時代，也就是客戶端更方便的向服務端發送信息。

隨著Firefox的出現，直接引發第二次瀏覽器大戰。第二次瀏覽器戰爭中，隨著以 Firefox 和 Opera 為首的 W3C 陣營與 IE 對抗程度的加劇，瀏覽器碎片化問題越來越嚴重，不同的瀏覽器執行不同的標準，對于開發人員來說這是一個惡夢。為了解決這個問題，眾多兼容性js框架誕生，JQ在眾多同類中脫穎而出，獨領風騷，幾乎成了業界的標配。

但是隨著Web應用的增多，舊的標準難以滿足需求，在2008 年 1 月 22 日，H5草案發布。同年12月，Chrome 發布JavaScript 引擎 V8，并加入瀏覽器之爭中。H5的真正興起是由于它與Flash的差異，在2010年4月，喬布斯發表一篇題為“對 Flash 的思考”的文章，指出隨著 HTML5 的發展，觀看視頻或其它內容時，Adobe Flash 將不再是必須的，同時H5的WebWorker 可以讓 JavaScript 運行在多線程中，WebSocket 可以實現前端與后臺的雙工通信，WebGL 可以創建 Web3D 網頁游戲……

在第二次瀏覽器大戰中，各個瀏覽器廠商都以提升 JavaScript 運行效率和支持 HTML5 各種新特性為主要目標，促進了瀏覽器的良性競爭。直到2016年，Chrome 占據了瀏覽器市場的半壁江山。

一個小插曲的就是TypeScript的誕生，TypeScript 是一種由微軟開發的自由和開源的編程語言。它是 JavaScript 的一個超集，而且本質上向這個語言添加了可選的靜態類型和基于類的面向對象編程。并于2012.10 微軟發布 TypeScript 公開版。

2009 年，Ryan 利用 Chrome 的 V8 引擎打造了基于事件循環的異步 I/O 框架 —— Node.js 誕生。Node的出現使前端的職能進一步擴大，前端正式進入服務端。由于語言的特性，我們很難用一種語言去實現前后端的開發。Node的出現，擴展了js語言的特性，它更重要的是構建了一個龐大的生態體系。使得js大有一統天下之勢。

2010 年 1 月，NPM 作為 Node.js 的包管理系統首次發布。我們可以按照 CommonJS 的規范編寫 Node.js 模塊，然后將其發布到 NPM 上面供其他開發人員使用。Npm是世界上較大的包模塊管理系統。

關于Node的框架有很多，有Express、koa、Sails、egg。推薦egg，因為egg是阿里出的，有完整詳細的文檔，它是為企業級應用程序設計的。

談到模塊化，簡單說一下模塊化的歷程。模塊化體現的兩個特性就是獨立性和依賴性。早期，我們用script來引入js模塊，但是它的缺點也很明顯就是它會污染全局變量，同時有一個常見的問題就是它的加載是有順序的，而且模塊太多，不美觀，資源難以管理。

為了解決這個問題，commonJs規范誕生了，該規范的核心思想是允許模塊通過require方法來同步加載所要依賴的其他模塊，然后通過 exports 或module.exports 來導出需要暴露的接口，同樣它的缺點是不能并行加載模塊，會阻塞瀏覽器加載。

AMD的誕生就是為了解決瀏覽器不能并行加載，代表工具就是requirejs，但是代碼閱讀性低。

同時CMD的出現，使開發者多了一種選擇，代表工具是sea.js。與AMD相比，AMD推崇依賴前置;CMD推崇依賴就近，只有在用到某個模塊的時候再去require。AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。對于依賴的模塊，AMD是提前執行，CMD是延遲執行。

現在我們大多數用的是ES6模塊，EcmaScript6標準增加了JavaScript語言層面的模塊體系定義。ES6 模塊的設計思想，是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS和AMD模塊，都只能在運行時確定這些東西。在 ES6 中，我們使用export關鍵字來導出模塊，使用import關鍵字引用模塊。但是瀏覽器還沒有完全兼容，需要使用babel轉化。

接著上面的講，隨著H5的流行，以前只適用于后端的思想，逐漸也被前端采用，MV*框架的興起，將前端從DOM操作直接推向了數據操作，這將是前端的又一次革命，如果把Ajax當作前端的第一次革命，Node的出現當作是前端的第二次革命，這將是前端的第三次革命。Ajax將靜態網頁變成了真正的“動態”，并引領了瀏覽器生態的紛繁。Node將前端延伸到了后端，使js充滿了無限的想象力。MV*框架的誕生，更是改寫了前端的書寫方式。現在前端面試，問的都是什么，你可以百度看看，現在的前端還是前端嗎?還是那個Front-end嗎?

隨著技術的興起，我們進入了移動應用的時代，網頁逐漸由 Web Site 演變成了 Web App。涌現的Web App、Hybrid App、Native App。現在大多數App都是混合App，既有原生的功能，也有Web的頁面。前端逐漸開始涉及App應用的開發。React Native可以用js來構建原生應用，極大的節約的開發成本，也加劇來前端的學習成本。不久前的谷歌開發大會，講了Flutter開發原生應用，Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。

小程序的橫空出世，也是對前端的一個挑戰，不論微信小程序還是支付寶小程序，都依托于一個巨大的流量池(平臺)。前端的多樣性也導致前端的復雜性，那么問題來了，我們怎么才能多端使用一套代碼呢?

Taro 是一套遵循 React 語法規范的 多端開發 解決方案。現如今市面上端的形態多種多樣，Web、ReactNative、微信小程序等各種端大行其道，當業務要求同時在不同的端都要求有所表現的時候，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。Taro是由京東凹凸實驗室開發的。

前端也可以開發桌面應用， Electron 是基于 Chromium 和 Node.js, 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術創建桌面原生應用程序的框架。Electron 兼容 Mac, Windows 和 Linux， 它構建的應用可在這三個操作系統上面運行。

2015 年 6 月，ECMAScript 6.0 發布。該版本增加了許多新的語法。ECMAScript 以后每年將會發布一個新版本，這無疑將持續促使瀏覽器廠商不斷為 JavaScript 注入新的功能與特性，JavaScript走上了快速發展的正軌。

現在的前端還是前端嗎?隨著技術的發展，前端開始涉及各個端，js也可以在各端自由暢行，并不斷發掘潛力。一位朋友預測，未來只會存在兩種開發人員，一個是端開發工程師，一個是云開發工程師。技術的界限越來越模糊，“全棧工程師”、“架構師”等等新的職業詞匯不斷涌現。作為一個前端開發人員，要學的東西很多，而且不僅僅局限于前端。

最后一個問題，你真的學不動了嗎?