前端發(fā)展史一直是大叔想寫的总寻，苦于話題多且雜，實(shí)在無從下手梢为，也就一拖再拖渐行。

前端技術(shù)從誕生至今有二十多年，說長不長說短不短抖誉。種種機(jī)緣巧合殊轴，大叔恰巧經(jīng)歷了前端技術(shù)變遷的全部歷程，多少曾經(jīng)的快樂痛苦興奮迷茫都湮為回憶袒炉。

事如春夢了無痕旁理，往事如煙，又恍若昨日我磁。

倘若用一個(gè)詞來形容前端技術(shù)變革孽文，那便是無常驻襟，成住壞空遍計(jì)其蹤。

而又有多少今日的事實(shí)芋哭，會(huì)成為明日的無常沉衣？技術(shù)也罷，生活也罷减牺，大多如此豌习。

不敢以史相稱，暫且喚作記事拔疚。星羅一些可提的舊事肥隆，間雜前瞻，希望對大家有所幫助稚失。

-1- 緣起 （1994）

齊秦的《往事隨風(fēng)》收錄于他的專輯《痛并快樂著》栋艳，發(fā)行于1995年9月1日。

這是一首曾被無數(shù)人翻唱過的老歌句各，承載著一兩代人滿滿的回憶吸占，有痛也有快樂。

“就讓往事隨風(fēng) 都隨風(fēng) 都隨風(fēng) 心隨你動(dòng)凿宾，昨天花謝花開 不是夢 不是夢 不是夢”

大叔打開藍(lán)牙音響矾屯，特意選了這首歌，讓思緒隨風(fēng)菌湃，飄向那如夢般的青蔥歲月问拘。

放牛娃也有春天，大叔也曾年輕過惧所。

1994年冬季骤坐，正是大四下半學(xué)期，學(xué)校里的課程基本結(jié)束下愈，唯有畢業(yè)設(shè)計(jì)與論文需要準(zhǔn)備纽绍。

忽然有一天，輔導(dǎo)畢業(yè)設(shè)計(jì)的老師說：“最近新出現(xiàn)了一種叫做超文本標(biāo)記語言（HTML）的技術(shù)势似，你們可以了解了解拌夏。”

大叔最初曾誤以為這是一種新的多媒體描述文檔履因，這也不全怪我障簿，因?yàn)槟菚r(shí)候還沒有互聯(lián)網(wǎng)，更不要說網(wǎng)吧什么的栅迄。大叔的大學(xué)生活除了學(xué)習(xí)以外站故，很難跟如今的大學(xué)生比，可以說是單純得很不完美。

這是我第一次聽聞HTML這個(gè)詞西篓。就好比第一次喝啤酒一樣愈腾，并沒有被打動(dòng)多少。

HTML文檔需要使用網(wǎng)景公司開發(fā)的一款叫作Netscape Navigator的軟件打開岂津，Code Name叫Mozilla虱黄。

什么？吮成？橱乱？這么巧，也叫Mozilla? 不是巧赁豆，這正是前端工程師太熟悉不過的Mozilla的由來仅醇。

Netscape Navigator其實(shí)就是一款瀏覽器，曾經(jīng)稱霸一時(shí)魔种，無人可敵。只是由于種種原因粉洼，在后來的瀏覽器大戰(zhàn)中失去陣腳节预，逐漸被淘汰，被收購属韧，被開源安拟，被遺忘。開源后由Mozilla Foundation維護(hù)宵喂，幾經(jīng)挫折又靈魂附體糠赦，以Firefox重生，成為一只不死的火狐锅棕。

-2- 互聯(lián)網(wǎng)的春天 （1995-1996）

1995年開學(xué)季拙泽，大叔開始了研一的學(xué)習(xí)生活，還在西安交大裸燎，還是計(jì)算機(jī)專業(yè)顾瞻，并追隨歸國不久的博導(dǎo)侯義斌教授。

那時(shí)候已經(jīng)有了手機(jī)德绿，是一種稱為大哥大的磚頭大小的通話設(shè)備荷荤，可防身更可彰顯身份。

多數(shù)人則使用BB機(jī)移稳，有漢顯和數(shù)顯之分蕴纳。如果你看到誰把BB機(jī)拴在皮帶最顯眼的位置，不用說个粱，那一定是漢顯古毛。

這一年發(fā)生了很多事情，中國互聯(lián)網(wǎng)正式接入國際互聯(lián)網(wǎng)几蜻，國內(nèi)第一家互聯(lián)網(wǎng)服務(wù)供應(yīng)商瀛海威成立喇潘，國內(nèi)第一個(gè)BBS水木清華開通体斩，HTML 2.0發(fā)布，Window95發(fā)售颖低，Sun公司將Oak語言改名為Java, 網(wǎng)景公司把一種能夠嵌入Navigator的腳本語言LiveScript改名為JavaScript絮吵。

人們對世界的好奇，對互通互聯(lián)的渴望忱屑，再?zèng)]有比那個(gè)時(shí)代來的強(qiáng)烈蹬敲，一切都方興未艾，充滿生機(jī)莺戒。

更不可預(yù)料的是伴嗡，這個(gè)可以窺探世界的窗口，有一天會(huì)被筑起高墻从铲，以避免人們過于好奇墻外的世界瘪校。

互通互聯(lián)會(huì)開啟智慧，對某些人來說名段，我猜想這一定是一件很可怕的事情阱扬。

96年春季，導(dǎo)師訪問荷蘭回國伸辟，把幾個(gè)弟子叫到一起聊到：“這次荷蘭之行麻惶，看到HTML技術(shù)在互聯(lián)網(wǎng)上的應(yīng)用，這個(gè)技術(shù)一定會(huì)改變我們的世界信夫。”?

導(dǎo)師的這句話對我觸動(dòng)很大窃蹋，直到現(xiàn)在還記憶猶新。而觸動(dòng)的原因其實(shí)是疑惑静稻，我不明白這種字符型文檔警没，會(huì)如何改變整個(gè)世界？

現(xiàn)在看來姊扔，導(dǎo)師畢竟是導(dǎo)師惠奸，見得多，看得遠(yuǎn)恰梢。當(dāng)年荷蘭埃因霍芬大學(xué)就是因?yàn)閷?dǎo)師留學(xué)期間成績過于出眾佛南，遂決定只要是西安交大推薦的留學(xué)生，一律免試嵌言。能跟隨侯老師學(xué)習(xí)嗅回，是幸運(yùn)的。

這就好比平地里無故冒出一顆竹筍摧茴，有的人看到了一片竹林绵载，而有人則看到一盤腌篤鮮。

那個(gè)看到腌篤鮮的人就是平時(shí)超愛做飯的大叔我了。

-3- 混沌與荒蠻 （1996-1998）

1996年娃豹，網(wǎng)景公司發(fā)布Netscape 3.0焚虱，宣稱支持JavaScript 1.1。

同年8月懂版，微軟推出Windows 95 OSR2鹃栽，以捆綁銷售的方式推出IE3.0，首次支持自己的腳本語言JScript躯畴。

明眼人很容易就看出來民鼓，兩家公司同時(shí)推出類似的產(chǎn)品，這是要打起來的節(jié)奏蓬抄。而實(shí)際上發(fā)生的卻是一場激烈的瀏覽器爭奪戰(zhàn)丰嘉，并引發(fā)了著名的針對微軟的反托拉斯訴訟案。

“微軟以大欺小嚷缭，玩不過了就上手段饮亏，這TMD不是耍流氓嗎？” 年輕時(shí)的我曾經(jīng)滿懷正義感的這么想過峭状。

隨著年齡增長克滴，各種無恥耍賴見多了，這點(diǎn)事兒還真不是事兒优床。一個(gè)公司用錢把對方玩死，已經(jīng)算仁義誓焦。倘若遇到權(quán)勢胆敞，連玩的機(jī)會(huì)都不一定給你，這才叫流氓杂伟。

混沌與荒蠻是那個(gè)時(shí)期前端發(fā)展的特點(diǎn)移层。

混沌源于沒有標(biāo)準(zhǔn)，JavaScript和JScript按照各自的設(shè)計(jì)實(shí)現(xiàn)赫粥，瀏覽器互不相認(rèn)观话，需要寫兩套代碼來保持兼容。

這就迫使歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ECMA）以JavaScript1.1為藍(lán)本越平，制定獨(dú)立于廠商的频蛔，靈活的腳本語言標(biāo)準(zhǔn)。大名鼎鼎的ECMA-262由此而來秦叛，版本1誕生于1997年晦溪。

1998年，Windows98發(fā)售挣跋，捆綁了IE4三圆，并且首次把IE嵌入操作系統(tǒng)桌面。同年，張朝陽創(chuàng)立了搜狐舟肉，馬化騰創(chuàng)立了騰訊修噪，王志東創(chuàng)立了新浪。

這一年路媚，大叔碩士畢業(yè)步入社會(huì)黄琼，除了年輕和對技術(shù)的執(zhí)著，一無所有磷籍。

-4- 緩慢發(fā)展 (1998-2006)

在較長的一段時(shí)間里适荣，前端技術(shù)進(jìn)展緩慢，與之不協(xié)調(diào)的是院领，人們對Web應(yīng)用的需求卻與日俱增弛矛。

很多桌面系統(tǒng)紛紛轉(zhuǎn)向BS結(jié)構(gòu)，新系統(tǒng)如果不是BS結(jié)構(gòu)的比然，你都不好意思給人說丈氓。

DHTML成了熱詞，與此同時(shí)强法，ASP, PHP, JSP, ASP.NET, ROR, Django等Web框架相繼出現(xiàn)万俗，各領(lǐng)風(fēng)騷若干年。

大叔給這個(gè)階段總結(jié)出這么幾個(gè)特點(diǎn)：

1）前后端不分離

前后端相互牽連饮怯，貌離神合闰歪，感覺上更像是具有Web UI的桌面系統(tǒng)。

2）前端發(fā)展緩慢

技術(shù)重點(diǎn)放在了如何完善BS體系上蓖墅，而忽視了前端的發(fā)展库倘。

唯一值得一提的也許就是AJAX的出現(xiàn)。

AJAX最初被用來實(shí)現(xiàn)局部刷新UI论矾，其實(shí)還是為了模擬桌面系統(tǒng)教翩。后來證明這個(gè)方向是錯(cuò)誤的，也就不再提贪壳。

3）瀏覽器差異大

這一階段瀏覽器幾乎是IE饱亿、Firefox和Opera的天下，差異大闰靴，給開發(fā)人員帶來很多不便彪笼。

4）艱難中沒有放棄對美的追求

在如此艱難的條件下，并沒有阻止人們對美的追求传黄。

沒有漸變效果杰扫，用圖片鋪展。沒有圓角膘掰，用圖片拼湊章姓。沒有陰影佳遣，用圖片模擬。更有甚者凡伊，后端來動(dòng)態(tài)生成圖片零渐。實(shí)在是苦中作樂。

-5- 工具與框架出現(xiàn) （2006-2012）

人類進(jìn)步離不開工具的發(fā)明與使用系忙，前端亦是如此诵盼。

2006年，驚天一聲雷银还，經(jīng)歷了長久的沉悶风宁，jQuery誕生了。

你是電 你是光 你是唯一的神話?我只愛你

jQuery的誕生蛹疯，給前端帶來一股無以言表的清流戒财。它小巧、簡潔捺弦，鏈?zhǔn)秸Z法寫起來很自然饮寞，具有豐富靈活的選擇器。

而在大叔心里列吼，所有這些都無法與之另一項(xiàng)特點(diǎn)相提并論幽崩，那就是jQuery對瀏覽器差異做了處理。

就好比有一雙充滿愛的手寞钥，把大叔的累累傷痕撫平慌申，直到現(xiàn)在，大叔依舊愛jQuery理郑。

常有人問太示，隨著腳本語言發(fā)展和瀏覽器趨于標(biāo)準(zhǔn)，jQuery會(huì)消失么香浩？

大叔的回答是：“會(huì)的，總有一天會(huì)退出舞臺(tái)臼勉，可不是現(xiàn)在邻吭。”

jQuery不應(yīng)被過早的拋棄, 否則是不理智的宴霸。多數(shù)前端框架都有一個(gè)顯著特征--排它性囱晴，一種框架寫的組件，無法用在另一種框架中瓢谢。jQuery卻具有開放的畸写、兼容并包的思想精神。

黑格爾有句名言：“不要在倒洗澡水的時(shí)候把孩子也一起倒掉”氓扛。我們選框架枯芬，不一定要完全拋棄jQuery论笔。

其實(shí)，jQuery的思想已經(jīng)慢慢滲透到了新的ECMA語言標(biāo)準(zhǔn)中去了千所，我們需要再給它一些時(shí)間狂魔，直到它徹底完成歷史使命。

同一時(shí)期淫痰，前端還涌現(xiàn)出一大批基礎(chǔ)類庫和框架最楷，大體可分為兩類：

1）面向?qū)ο箢愋?/b>

基于原型鏈技術(shù)演化出的面向?qū)ο蟮沫h(huán)境與工具集合。例如：Prototype, Mootools待错，DojoJS,?ExtJS籽孙。

2）Model-View類型

Model-View概念開始在前端出現(xiàn)（MVC/MVVM），數(shù)據(jù)綁定火俄、模板犯建、路由、重用烛占、依賴注入等概念也被相繼引入胎挎。例如：AngularJS, Knockout, Backbone, EmberJS。有些庫已經(jīng)成為企業(yè)級(jí)框架忆家，被大型前端應(yīng)用采用犹菇。

-6- 工程化與大變革 （2012-2017）

如果說蒸汽機(jī)的出現(xiàn)導(dǎo)致了18世紀(jì)英國工業(yè)化進(jìn)程，那么NodeJS則拉開了前端工程化與大變革的序幕芽卿。

誰也未曾想到揭芍，這款最初只是為了實(shí)現(xiàn)輕量級(jí)Web服務(wù)的JavaScript虛擬機(jī)，從它脫胎于Chrome V8引擎那一刻起卸例，就彰顯出超群的表現(xiàn)称杨，在性能上遠(yuǎn)遠(yuǎn)甩開Ruby和Python。

只用一種語言就能夠統(tǒng)領(lǐng)世界筷转，這不僅是假想姑原，也成為可能。巴別塔的雄心再一次被燃起呜舒。

2012年锭汛，包與工程管理器NPM被開發(fā)，以JavaScript語言為基礎(chǔ)的代碼庫開始迅速壯大袭蝗。

一批在其它技術(shù)領(lǐng)域成熟的項(xiàng)目管理理念(Ant, Maven等)開始在前端項(xiàng)目上實(shí)現(xiàn)唤殴。

先是任務(wù)隊(duì)列運(yùn)行工具Grunt、而后是Gulp到腥。圍繞這些工具產(chǎn)生出幾千個(gè)插件朵逝，用于前端項(xiàng)目的構(gòu)建。編譯和打包的概念應(yīng)運(yùn)而生乡范，前端開發(fā)越來越像后端的模式配名。

2015年ES6發(fā)布啤咽，腳本規(guī)范靜默多年，終于放出了大招段誊。腳本語言在書寫上更像面向?qū)ο笳Z言闰蚕，一批語法糖出現(xiàn)。

AngularJS被徹底重寫连舍，改稱Angular没陡，與前端框架的黑馬ReactJS, VueJS形成新的三駕馬車，開啟了組件化的潮流索赏。

前端的大變革時(shí)代到來了盼玄，這是一個(gè)眼花繚亂的時(shí)代，是一個(gè)追逐時(shí)髦的時(shí)代潜腻，是一個(gè)最容易迷失自我的時(shí)代埃儿。

-7- 展望

說展望不如說猜測，也不一定準(zhǔn)確融涣，重點(diǎn)還是要做好當(dāng)下童番。

大叔猜測的前端趨勢大體是：

1）ECMAScript標(biāo)準(zhǔn)按承諾一年一更新，但近期不會(huì)有太大的變化威鹿。

2）腳本語言下一個(gè)大地震將是強(qiáng)類型化剃斧。

3）語言會(huì)支持圖形功能。

4）DOM引擎支持模板忽你。

5）瀏覽器性能提升幼东，更充分利用多核，F(xiàn)irefox重振雄風(fēng)科雳。

6）VueJS備受歡迎（酒香不怕巷子深根蟹，目前只是虧在鼓吹能力而已）。

7）你當(dāng)前寫的代碼糟秘，用不了幾年就需要重寫简逮。

8）下一個(gè)框架是.....我們要不要一起寫一個(gè)?

-8- 結(jié)語

三十功名塵與土，八千里路云和月尿赚。莫等閑买决，白了少年頭，空悲切吼畏。

等到一切都看透，也白了頭嘁灯，也空悲切泻蚊。

前面說過浅妆，前端技術(shù)變化的最大特點(diǎn)就是無常與空拌阴。

無常并不代表不學(xué)新技術(shù)，而是要在變化中能看到本體涕侈，不被變化牽絆。

空也不代表什么都不用做秒旋，前端工程師不僅要把工作做好约计，還要用匠人精神去做。

前端技術(shù)變遷是一個(gè)苦旅迁筛，需秉持過往不戀煤蚌，未來不迎，當(dāng)下不負(fù)的態(tài)度细卧，把工作當(dāng)做修行尉桩，在磨難中前進(jìn)。

在快節(jié)奏的時(shí)代贪庙，我們更需要靜下心來蜘犁，去除浮躁，用接近真實(shí)的方式實(shí)現(xiàn)前端止邮。

這里借用五代時(shí)期僧人契此的一首禪詩送給大家：

手把秧苗插滿田这橙，低頭便見水中天。

心地清凈方為道导披，退步原來是向前屈扎。

午夜已過，今天是大叔生日盛卡，打一聽啤酒助隧，自己慶祝一下。

-2018. 2. 22 蘭山-