了不得的前端

千山萬重，不離不棄，爲了理想。

前言

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

前端簡史

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

web1.0時代

關於前端的發展得從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 爲表明的動態頁面技術相繼誕生。

Web2.0時代

直到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也能夠在各端自由暢行，並不斷髮掘潛力。一位朋友預測，將來只會存在兩種開發人員，一個是端開發工程師，一個是雲開發工程師。技術的界限愈來愈模糊，「全棧工程師」、「架構師」等等新的職業詞彙不斷涌現。做爲一個前端開發人員，要學的東西不少，並且不只僅侷限於前端。

最後一個問題，你真的學不動了嗎？

公衆號同步。

公衆號內回覆算法，可參加天天一道算法題活動。