起源
什么是前端
前端:針對(duì)瀏覽器的開(kāi)發(fā),代碼在瀏覽器運(yùn)行
后端:針對(duì)服務(wù)器的開(kāi)發(fā),代碼在服務(wù)器運(yùn)行
前端三劍客
HTML
CSS
JavaScript
HTML
HTML(超文本標(biāo)記語(yǔ)言——HyperText Markup Language)是構(gòu)成 Web 世界的基石拼岳。HTML是一種基礎(chǔ)技術(shù)聋涨,常與CSS拓颓、JavaScript一起被眾多網(wǎng)站用于設(shè)計(jì)令人賞心悅目的網(wǎng)頁(yè)、網(wǎng)頁(yè)應(yīng)用程序以及移動(dòng)應(yīng)用程序的用戶界面孕惜。
超文本標(biāo)記語(yǔ)言(第一版)——在1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布(并非標(biāo)準(zhǔn)):
HTML 2.0——1995年11月作為RFC 1866發(fā)布,在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過(guò)時(shí)
HTML 3.2——1997年1月14日晨炕,W3C推薦標(biāo)準(zhǔn)
HTML 4.0——1997年12月18日衫画,W3C推薦標(biāo)準(zhǔn)
HTML 4.01(微小改進(jìn))——1999年12月24日,W3C推薦標(biāo)準(zhǔn)
HTML 5——2014年10月28日瓮栗,W3C推薦標(biāo)準(zhǔn)
CSS
層疊樣式表(英文全稱(chēng):Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語(yǔ)言削罩。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)瞄勾,還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制弥激,支持幾乎所有的字體字號(hào)樣式进陡,擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。
JavaScript
JavaScript一種直譯式腳本語(yǔ)言微服,是一種動(dòng)態(tài)類(lèi)型趾疚、弱類(lèi)型、基于原型的語(yǔ)言以蕴,內(nèi)置支持類(lèi)型糙麦。它的解釋器被稱(chēng)為JavaScript引擎,為瀏覽器的一部分丛肮,廣泛用于客戶端的腳本語(yǔ)言赡磅,最早是在HTML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用)網(wǎng)頁(yè)上使用,用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能腾供。
前端的發(fā)展離不開(kāi)瀏覽器的發(fā)展
瀏覽器的發(fā)展其實(shí)也是前端的發(fā)展
我們來(lái)簡(jiǎn)單了解一下瀏覽器的發(fā)展歷史
1991年仆邓,WorldWideWeb 瀏覽器發(fā)布
這款由 Web 之父 Tim Berners-Lee 親手設(shè)計(jì)的圖形化瀏覽器還包含一個(gè)所見(jiàn)即所得 HTML 編輯器,為了避免同 WWW 混淆伴鳖,這個(gè)瀏覽器后來(lái)改名為 Nexus.
1993年节值,Mosaic 發(fā)布
Internet 的流行應(yīng)該歸功于 Mosaic,這款瀏覽器將 Web 帶向了大眾榜聂。諸如 IE搞疗, Firefox 一類(lèi)的當(dāng)代瀏覽器仍然在延用 Mosaic 的圖形化操作界面思想。
1994年须肆,Netscape 成立
Marc Andreessen 帶領(lǐng) Mosaic 的程序員成立了 Netscape 公司匿乃,并發(fā)布了第一款商業(yè)瀏覽器 Netscape Navigator.
1995年,IE 發(fā)布豌汇,瀏覽器之戰(zhàn)即將爆發(fā)
微軟針對(duì) Netscape 發(fā)布了他們自己的瀏覽器幢炸,IE,第一場(chǎng)瀏覽器之戰(zhàn)爆發(fā)拒贱。
1996年宛徊,Opera 發(fā)布
Telenor 是挪威最大的通訊公司,他們推出了 Opera逻澳,并在兩年后進(jìn)軍移動(dòng)市場(chǎng)闸天,推出 Opera 的移動(dòng)版。
1998年斜做,Mozilla 項(xiàng)目成立
Netscape 成立 Mozilla 開(kāi)源項(xiàng)目苞氮,開(kāi)發(fā)下一代瀏覽器,后來(lái)證明瓤逼,使用原有代碼開(kāi)發(fā)新東西是一種負(fù)擔(dān)笼吟,接著他們著手從新開(kāi)發(fā)库物。
1998年,Netscape 瀏覽器走向開(kāi)源
隨著同 IE 征戰(zhàn)的失利贷帮,Netscape 市場(chǎng)份額急劇下降艳狐,Netscape 決定將自己的瀏覽器開(kāi)源以期重整山河。
2002年皿桑,IE 開(kāi)始主導(dǎo)瀏覽器市場(chǎng)
市場(chǎng)份額達(dá)到95%毫目,借助操作系統(tǒng)的捆綁優(yōu)勢(shì),IE 贏得第一場(chǎng)瀏覽器之戰(zhàn)诲侮。
2003年镀虐,蘋(píng)果 Safari 瀏覽器登場(chǎng)
蘋(píng)果進(jìn)入了瀏覽器市場(chǎng),推出自己的 Webkit 引擎沟绪,該引擎非常優(yōu)秀刮便,后來(lái)被包括 Google, Nokia 之類(lèi)的廠商用于手機(jī)瀏覽器绽慈。
2004年恨旱,F(xiàn)irefox 引發(fā)第二場(chǎng)瀏覽器之戰(zhàn)
Firefox 1.0 推出。早在 Beta 測(cè)試期間就積累了大量人氣的 Firefox 引發(fā)了第二場(chǎng)瀏覽器之戰(zhàn)坝疼,當(dāng)年年底搜贤,F(xiàn)irefox 已經(jīng)贏得 7.4% 的市場(chǎng)份額。
2006年钝凶,IE7 發(fā)布
IE6 發(fā)布后的第六年仪芒,迫于 Firefox 的壓力,微軟匆匆推出 IE7 應(yīng)戰(zhàn)耕陷,吸取了 Firefox 的一些設(shè)計(jì)思想掂名,如標(biāo)簽式瀏覽,反釣魚(yú)等哟沫。但這款瀏覽器現(xiàn)在看來(lái)并不成功饺蔑。
2008年,Google 攜 Chrome 參戰(zhàn)
Google 發(fā)布了他們自己的瀏覽器嗜诀,加入這場(chǎng)戰(zhàn)爭(zhēng)猾警。輕量,快裹虫,異常的穩(wěn)固讓這款瀏覽器成為不可輕視的一個(gè)對(duì)手肿嘲。
瀏覽器現(xiàn)狀
瀏覽器內(nèi)核
早期的前端
早期受制于瀏覽器以及技術(shù)融击、兼容性等問(wèn)題筑公,導(dǎo)致網(wǎng)頁(yè)的顯示效果非常的單一,幾乎都是靜態(tài)頁(yè)尊浪,前端的工作也是非常簡(jiǎn)單匣屡,說(shuō)是前端封救,其實(shí)只是一個(gè)模板工程師,編寫(xiě)頁(yè)面模板捣作,然后讓后端負(fù)責(zé)渲染誉结。所以在互聯(lián)網(wǎng)早期,前端工程師這個(gè)職位可以說(shuō)是不存在券躁,通常由后端或者是美工來(lái)兼任惩坑。
像這種古老的設(shè)計(jì)風(fēng)格,現(xiàn)在已經(jīng)很難看到了
后端MVC的開(kāi)發(fā)模式
當(dāng)時(shí)的網(wǎng)站開(kāi)發(fā)也拜,采用的是后端MVC模式 *Model(模型層):提供/保存數(shù)據(jù) *Controller(控制層):數(shù)據(jù)處理以舒,實(shí)現(xiàn)業(yè)務(wù)邏輯 * View(視圖層):展示數(shù)據(jù),提供用戶界面 前端只是后端 MVC 的 V
當(dāng)用戶訪問(wèn)網(wǎng)站時(shí)慢哈,會(huì)向后臺(tái)發(fā)送一個(gè)請(qǐng)求蔓钟,后臺(tái)接收到請(qǐng)求,生成靜態(tài)HTML頁(yè)面卵贱,發(fā)送到瀏覽器滥沫。 比如JSP
<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>
Ajax
Ajax技術(shù)誕生,改變了一切键俱。前端不再是后端的模板兰绣,可以獨(dú)立得到各種數(shù)據(jù)。
Ajax是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下编振,能夠更新部分網(wǎng)頁(yè)的技術(shù)狭魂。
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,Ajax可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新党觅。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下雌澄,對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
舉個(gè)例子:用戶注冊(cè)
如果仔細(xì)觀察一個(gè)表單的提交杯瞻,你就會(huì)發(fā)現(xiàn)镐牺,一旦用戶點(diǎn)擊“提交”按鈕,表單開(kāi)始提交魁莉,瀏覽器就會(huì)刷新頁(yè)面睬涧,然后在新頁(yè)面里告訴你操作是成功了還是失敗了。如果不幸由于網(wǎng)絡(luò)太慢或者其他原因旗唁,就會(huì)得到一個(gè)404頁(yè)面畦浓。
這就是Web的運(yùn)作原理:一次HTTP請(qǐng)求對(duì)應(yīng)一個(gè)頁(yè)面。
如果要讓用戶留在當(dāng)前頁(yè)面中检疫,同時(shí)發(fā)出新的HTTP請(qǐng)求讶请,就可以使用Ajax發(fā)送這個(gè)新請(qǐng)求,接收到數(shù)據(jù)后屎媳,再用JavaScript更新頁(yè)面夺溢,這樣一來(lái)论巍,用戶就感覺(jué)自己仍然停留在當(dāng)前頁(yè)面,但是數(shù)據(jù)卻可以不斷地更新风响。
2004年:最早大規(guī)模使用AJAX的就是Gmail嘉汰,Gmail的頁(yè)面在首次加載后,剩下的所有數(shù)據(jù)都依賴(lài)于AJAX來(lái)更新状勤。
Web 2.0
Ajax技術(shù)促成了 Web 2.0 的誕生鞋怀。
Web 1.0:靜態(tài)網(wǎng)頁(yè),純內(nèi)容展示
Web 2.0:動(dòng)態(tài)網(wǎng)頁(yè)持搜,富交互接箫,前端數(shù)據(jù)處理
至此,前端早期的發(fā)展史就介紹完了朵诫,當(dāng)時(shí)對(duì)于前端的要求并不高辛友,只要掌握html css js和一個(gè)jquery就足夠開(kāi)發(fā)網(wǎng)頁(yè)了
新時(shí)代的前端
到目前為止 HTML已經(jīng)發(fā)展到HTML5
CSS已經(jīng)發(fā)展到CSS3.0
JavaScript已經(jīng)發(fā)展到ES9,但是常用的還是ES5和ES6
現(xiàn)代標(biāo)準(zhǔn)瀏覽器(遵循W3C標(biāo)準(zhǔn)的瀏覽器)基本已經(jīng)支持HTML5 CSS3 ES6的大部分特性
瀏覽器市場(chǎng)份額(2018.9)
由于IE的不思上進(jìn)剪返,導(dǎo)致市場(chǎng)份額越來(lái)越少废累,現(xiàn)在幾乎是現(xiàn)代標(biāo)準(zhǔn)瀏覽器的天下。
所以前端開(kāi)發(fā)一個(gè)網(wǎng)頁(yè)幾乎不需要考慮IE兼容性
得益于前端技術(shù)和瀏覽器的發(fā)展脱盲,現(xiàn)在的網(wǎng)頁(yè)能展示越來(lái)越豐富的內(nèi)容了邑滨,比如動(dòng)畫(huà) 游戲 畫(huà)圖等等
所以,對(duì)于前端的要求也越來(lái)越高钱反,特別是近幾年框架掖看、技術(shù)、工具呈爆發(fā)式發(fā)展面哥,前端變化特別快哎壳!
MVVM
MVVM最早由微軟提出來(lái),它借鑒了桌面應(yīng)用程序的MVC思想尚卫,在前端頁(yè)面中归榕,把Model用純JavaScript對(duì)象表示,View負(fù)責(zé)顯示吱涉,兩者做到了最大限度的分離 把Model和View關(guān)聯(lián)起來(lái)的就是ViewModel刹泄。
ViewModel負(fù)責(zé)把Model的數(shù)據(jù)同步到View顯示出來(lái),還負(fù)責(zé)把View的修改同步回Model
View 和 Model 之間的同步工作完全是自動(dòng)的怎爵,無(wú)需人為干涉
因此開(kāi)發(fā)者只需關(guān)注業(yè)務(wù)邏輯特石,不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題,復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來(lái)統(tǒng)一管理
一個(gè)MVVM框架和jQuery操作DOM相比有什么區(qū)別鳖链? 我們先看用jQuery實(shí)現(xiàn)的修改兩個(gè)DOM節(jié)點(diǎn)的例子:
<!-- HTML -->
<p>Hello, <span id="name">Bart</span>!</p>
<p>You are <span id="age">12</span>.</p>
Hello, Bart!
You are 12.
用jQuery修改name和age節(jié)點(diǎn)的內(nèi)容:
var name = 'Homer';
var age = 51;
$('#name').text(name);
$('#age').text(age);
如果我們使用MVVM框架來(lái)實(shí)現(xiàn)同樣的功能姆蘸,我們首先并不關(guān)心DOM的結(jié)構(gòu),而是關(guān)心數(shù)據(jù)如何存儲(chǔ)。最簡(jiǎn)單的數(shù)據(jù)存儲(chǔ)方式是使用JavaScript對(duì)象:
var person = {
name: 'Bart',
age: 12
}
我們把變量person看作Model乞旦,把HTML某些DOM節(jié)點(diǎn)看作View,并假定它們之間被關(guān)聯(lián)起來(lái)了题山。
要把顯示的name從Bart改為Homer兰粉,把顯示的age從12改為51,我們并不操作DOM顶瞳,而是直接修改JavaScript對(duì)象:
person.name = 'Homer';
person.age = 51;
執(zhí)行上面的代碼玖姑,我們驚訝地發(fā)現(xiàn),改變JavaScript對(duì)象的狀態(tài)慨菱,會(huì)導(dǎo)致DOM結(jié)構(gòu)作出對(duì)應(yīng)的變化焰络!這讓我們的關(guān)注點(diǎn)從如何操作DOM變成了如何更新JavaScript對(duì)象的狀態(tài),而操作JavaScript對(duì)象比DOM簡(jiǎn)單多了符喝!
這就是MVVM的設(shè)計(jì)思想:關(guān)注Model的變化闪彼,讓MVVM框架去自動(dòng)更新DOM的狀態(tài),從而把開(kāi)發(fā)者從操作DOM的繁瑣步驟中解脫出來(lái)协饲!
三大MVVM框架
Vue
React
Angular
Vue
Vue框架誕生于2014年畏腕,其作者為中國(guó)人——尤雨溪,也是新人最容易入手的框架之一茉稠,不同于React和Angular,其中文文檔也便于大家閱讀和學(xué)習(xí)描馅。
React
React起源于Facebook的內(nèi)部項(xiàng)目,因?yàn)樵摴緦?duì)市場(chǎng)上所有JavaScript MVC框架而线,都不滿意铭污,就決定自己寫(xiě)一套,用來(lái)架設(shè)Instagram的網(wǎng)站膀篮。做出來(lái)以后嘹狞,發(fā)現(xiàn)這套東西很好用,就在2013年5月開(kāi)源了誓竿。
Angular
Angular是谷歌開(kāi)發(fā)的 Web 框架刁绒,具有優(yōu)越的性能和絕佳的跨平臺(tái)性。通常結(jié)合TypeScript開(kāi)發(fā)烤黍,也可以使用JavaScript或Dart知市,提供了無(wú)縫升級(jí)的過(guò)渡方案。于2016年9月正式發(fā)布速蕊。
目前國(guó)內(nèi)使用人數(shù)最多嫂丙、最火的框架是Vue
webpack
如今對(duì)于每一個(gè)前端工程師來(lái)說(shuō),webpack已經(jīng)成為了一項(xiàng)基礎(chǔ)技能规哲,它基本上包辦了本地開(kāi)發(fā)跟啤、編譯壓縮、性能優(yōu)化的所有工作。
它的誕生意味著一整套工程化體系開(kāi)始普及隅肥,并且讓前端開(kāi)發(fā)徹底告別了以前刀耕火種的時(shí)代「妥啵現(xiàn)在webpack之于前端開(kāi)發(fā),正如同gcc/g++之于C/C++腥放,是一個(gè)無(wú)論如何都繞不開(kāi)的工具泛啸。
TypeScript(TS)
TypeScript 是 Microsoft 開(kāi)發(fā)和維護(hù)的一種面向?qū)ο蟮木幊陶Z(yǔ)言。它是JavaScript的超集秃症,包含了JavaScript的所有元素候址,可以載入JavaScript代碼運(yùn)行,并擴(kuò)展了JavaScript的語(yǔ)法种柑。 TypeScript 具有以下特點(diǎn):
TypeScript是Microsoft推出的開(kāi)源語(yǔ)言岗仑,使用Apache授權(quán)協(xié)議
TypeScript增加了靜態(tài)類(lèi)型、類(lèi)聚请、模塊荠雕、接口和類(lèi)型注解
在開(kāi)發(fā)大型項(xiàng)目時(shí)使用TS更有優(yōu)勢(shì)
NodeJs
Node.js是一個(gè)Javascript運(yùn)行環(huán)境(runtime environment),發(fā)布于2009年5月驶赏,由Ryan Dahl開(kāi)發(fā)舞虱,實(shí)質(zhì)是對(duì)Chrome V8引擎進(jìn)行了封裝。Node.js對(duì)一些特殊用例進(jìn)行優(yōu)化母市,提供替代的API矾兜,使得V8在非瀏覽器環(huán)境下運(yùn)行得更好。嚴(yán)格的來(lái)說(shuō)患久,Node.js其實(shí)是一個(gè)后端語(yǔ)言椅寺。
特點(diǎn): *單線程 *非阻塞IO *事件驅(qū)動(dòng) *V8引擎
現(xiàn)在的前端能做什么?
游戲開(kāi)發(fā)(Egret Layabox coco2d-js)
web開(kāi)發(fā)(pc 移動(dòng)端設(shè)備)
webApp開(kāi)發(fā)(Dcloud RN weex ionic)
圖形開(kāi)發(fā)WebGl(three.js)
小程序/快應(yīng)用
后端(nodejs)
桌面應(yīng)用(electron)
嵌入式開(kāi)發(fā)(Ruff)
前端的未來(lái)
現(xiàn)在基于Web的前端技術(shù)蒋失,將演變?yōu)槲磥?lái)所有軟件的通用的GUI解決方案返帕。 所以前端有可能會(huì)變成一名端工程師。 *PC端 *手機(jī)端 *TV端 *VR端
......
一名合格的前端需要掌握哪些技能
photoshop切圖(必修)
html css js(特別是html5 css3 es6)(必修)
三大前端框架至少精通一個(gè)(必修)
nodejs(選修)
自動(dòng)化構(gòu)建工具webpack(必修)
http協(xié)議(必修)
瀏覽器渲染流程及原理(必修)
TypeScript(選修)
技能會(huì)過(guò)時(shí) 計(jì)算機(jī)基礎(chǔ)知識(shí)不會(huì)過(guò)時(shí)
算法
編譯原理
建議學(xué)習(xí)編譯原理和算法這兩門(mén)課程
算法的好處相信大家都懂 在這里簡(jiǎn)單說(shuō)一下
懂算法的人善于計(jì)算時(shí)空復(fù)雜度篙挽,相當(dāng)于在你做事情前荆萤,懂得怎么去衡量效率和開(kāi)銷(xiāo)
編譯原理:將源語(yǔ)言轉(zhuǎn)化為目標(biāo)語(yǔ)言,也就是將一門(mén)語(yǔ)言轉(zhuǎn)化為另一門(mén)語(yǔ)言
編譯原理在前端中的應(yīng)用
babel
TypeScript
Vue的VNode
......
參考資料:http://software.cnw.com.cn/software-application/htm2009/20091013_183968.shtml
參考資料:https://github.com/ruanyf/jstraining/blob/master/docs/history.md
參考資料:https://www.liaoxuefeng.com/wiki/00
轉(zhuǎn)載:https://zhuanlan.zhihu.com/p/53211263