前言

喜歡聊一些新奇的技術(shù)，也喜歡學(xué)習(xí)新的東西，在這個日益繁榮的時代，有幸見證技術(shù)的發(fā)展是多么美好的一件事。

前端簡史

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

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

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

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

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

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

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

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

一個小插曲的就是TypeScript的誕生，TypeScript 是一種由微軟開發(fā)的自由和開源的編程語言。它是 JavaScript 的一個超集，而且本質(zhì)上向這個語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭２⒂?012.10 微軟發(fā)布 TypeScript 公開版。

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

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

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

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

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

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

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

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

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

隨著技術(shù)的興起，我們進入了移動應(yīng)用的時代，網(wǎng)頁逐漸由 Web Site 演變成了 Web App。涌現(xiàn)的Web App、Hybrid App、Native App?，F(xiàn)在大多數(shù)App都是混合App，既有原生的功能，也有Web的頁面。前端逐漸開始涉及App應(yīng)用的開發(fā)。React Native可以用js來構(gòu)建原生應(yīng)用，極大的節(jié)約的開發(fā)成本，也加劇來前端的學(xué)習(xí)成本。不久前的谷歌開發(fā)大會，講了Flutter開發(fā)原生應(yīng)用，F(xiàn)lutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。

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

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

前端也可以開發(fā)桌面應(yīng)用， Electron 是基于 Chromium 和 Node.js, 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術(shù)創(chuàng)建桌面原生應(yīng)用程序的框架。Electron 兼容 Mac, Windows 和 Linux， 它構(gòu)建的應(yīng)用可在這三個操作系統(tǒng)上面運行。

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

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

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