這是一個(gè)演講稿,mark一下

1文留、前端的發(fā)展史

1、前端

這是從維基百科上找到的關(guān)于前端的定義竭沫，一般來說燥翅，計(jì)算機(jī)程序的界面樣式，視覺呈現(xiàn)屬于前端蜕提。
也就是網(wǎng)站mvc結(jié)構(gòu)中的view部分森书，但是現(xiàn)在說的view層和原來的view層含義已經(jīng)不一樣了，這個(gè)待會(huì)我們?cè)诮榻Bangular的時(shí)候說谎势。

2凛膏、前端/互聯(lián)網(wǎng)的上古時(shí)代

前段時(shí)間找到了世界上的第一張網(wǎng)頁，現(xiàn)在還可以訪問脏榆，他 http://info.cern.ch/ 猖毫，可以看到，所謂網(wǎng)站就和現(xiàn)在的world類似须喂，只有標(biāo)記語言和超鏈接吁断，完全沒有動(dòng)效和樣式可言。更不用說代碼的復(fù)用性坞生，以及局部加載仔役。
這是一個(gè)偉大的時(shí)刻，標(biāo)志著萬維網(wǎng)的誕生是己，不過站在歷史中往前看又兵，就會(huì)覺得那個(gè)時(shí)代簡(jiǎn)直是洪荒時(shí)期，只是把簡(jiǎn)單的信息傳達(dá)出去卒废，連刀耕火種的能力都沒有達(dá)到沛厨，。

3摔认、前端的統(tǒng)一與分割

html/css/js

刀和火什么時(shí)候才到的呢逆皮？一直到96年，css的出現(xiàn)级野，同年页屠，網(wǎng)景公司推出了javascript 之后微軟也推出了vbscript 前端屆的刀和火出現(xiàn)了粹胯，同時(shí)意味著正式開始出現(xiàn)前段，這個(gè)時(shí)候前端的html負(fù)責(zé)頁面結(jié)構(gòu)辰企，決定著網(wǎng)頁的結(jié)構(gòu)和內(nèi)容风纠，是整個(gè)網(wǎng)頁的軀殼，css負(fù)責(zé)樣式部分牢贸，他決定了網(wǎng)站看起來是什么樣子竹观，屬于前段的皮膚吧，js控制網(wǎng)頁的行為潜索，決定做什么一般來說臭增，js負(fù)責(zé)調(diào)用一些前端計(jì)算與動(dòng)態(tài)加載，應(yīng)該屬于整個(gè)網(wǎng)頁的靈魂竹习。只有這三個(gè)同時(shí)具備的誊抛，才能算是一個(gè)真正的網(wǎng)站前端。
但是這個(gè)時(shí)后的網(wǎng)頁還有些許的缺陷整陌，不能局部加載拗窃，復(fù)用性比較差。就拿我們的網(wǎng)銀舉例子：可看到泌辫，基本上所有的界面的頭部随夸，底部還有菜單部分，都基本上是一樣的震放，我沒道理同樣的代碼在每個(gè)頁面上都要寫一遍宾毒，所以不久，微軟就推出了ifram標(biāo)簽殿遂，實(shí)現(xiàn)了異步的局部加載诈铛，就是相當(dāng)于在網(wǎng)頁中嵌套一個(gè)網(wǎng)頁，切換目錄只是切換ifram中的網(wǎng)頁勉躺，像我們的驗(yàn)印系統(tǒng)和CRM中的局部加載就是這樣實(shí)現(xiàn)的癌瘾。

ajax

再之后99年W3C發(fā)布了第四代HTML標(biāo)準(zhǔn)，同年微軟推出用于異步數(shù)據(jù)傳輸?shù)腁ctiveX饵溅，意味著ajax的誕生，這在前端史上同樣是個(gè)里程碑的事件妇萄，之前的iframe中部分加載蜕企，其實(shí)還是直接加載某個(gè)完整的html界面。但是如果這個(gè)界面中冠句，如果之前的交易想實(shí)現(xiàn)這個(gè)功能轻掩，需要兩個(gè)頁面，第一個(gè)頁面輸入我們需要添加的查詢字段懦底，然后點(diǎn)擊查詢唇牧，進(jìn)行form表單提交，然后我們就跳轉(zhuǎn)到 form表單返回結(jié)果頁面，從頭開始渲染這個(gè)頁面丐重。如果網(wǎng)速很慢的話腔召，這中間會(huì)出現(xiàn)點(diǎn)擊搜索，然后一個(gè)白屏扮惦，之后才出現(xiàn)結(jié)果頁面臀蛛。而ajax則可以讓我們?nèi)缇W(wǎng)銀這般實(shí)現(xiàn)真正意義上的局部加載，點(diǎn)擊查詢的時(shí)候崖蜜，只對(duì)下半部分進(jìn)行刷新浊仆，而不用對(duì)整個(gè)界面重新進(jìn)行渲染，極大的優(yōu)化了用戶體驗(yàn)豫领。再一點(diǎn) 之前的方法從數(shù)據(jù)庫查回列表數(shù)據(jù)抡柿，需要在服務(wù)端重新將數(shù)據(jù)拼裝到頁面上，使用ajax技術(shù)等恐，這部分的操作被挪到了客戶端瀏覽器上沙绝，所以ajax的出現(xiàn)，并不僅僅優(yōu)化了用戶體驗(yàn)鼠锈，他將很大一部分計(jì)算從服務(wù)器挪到了前端闪檬，使前端能夠完成了更多的工作。為日后的前后端分離提供了技術(shù)支持购笆。

jquery

然后一直到09年的時(shí)候粗悯，前端一直穩(wěn)定發(fā)展，沒有進(jìn)行什么大的改變同欠，這段時(shí)間市面上主要有兩款瀏覽器样傍，我們稱之為IE瀏覽器和非ie瀏覽器，所謂神仙打架凡人遭殃铺遂，ie瀏覽器為了搶奪網(wǎng)景公司的市場(chǎng)衫哥，開發(fā)出了javascript的變種，jscript襟锐。雖然兩個(gè)基本上完全一樣撤逢，但是語法糖上可能還是有些許的差別，所以粮坞，那個(gè)時(shí)代的前端工程師他們的主要工作就是畫頁面和踩各種坑蚊荣，那個(gè)時(shí)代一個(gè)閱歷豐富的程序員的一個(gè)標(biāo)志就是熟練掌握兩種瀏覽器之間的差別，且能找到兼容的方法莫杈，
jquery的出現(xiàn)在一定程度上緩解了這個(gè)問題互例，正如jquery的logo顯示的一樣，他封裝了write less do more 他致力于用更少的代碼實(shí)現(xiàn)更多的功能筝闹。
jquery其實(shí)是一個(gè)腳本庫媳叨，jQuery抽象了復(fù)雜的代碼和瀏覽器怪異模式腥光，兼容不同的瀏覽器，用簡(jiǎn)短的代碼實(shí)現(xiàn)動(dòng)效糊秆，用鏈?zhǔn)秸Z法風(fēng)格減少了程序員的代碼量武福。使我們有時(shí)間做重要的事情.雖然現(xiàn)在市面上的各種框架都能實(shí)現(xiàn)jquery的各種功能，但是他憑借較低的學(xué)習(xí)成本以及多少年來積攢的用戶量扩然，依然在現(xiàn)如今的前端圈中占有一席之地

2另患、大前端與Anaular

1氏捞、前端的大爆炸時(shí)代

從99年到09年附近基本上沒有什么大的變化，一直到谷歌發(fā)布了v8瀏覽器引擎，這個(gè)引擎極大的提升了瀏覽器的計(jì)算效率松却，然后同年ECMA組織標(biāo)準(zhǔn)又發(fā)布了第五版javascript標(biāo)準(zhǔn)辕近，馬上得益于v8引擎高速的計(jì)算效率介褥，有人將vx引擎從客戶端搬上了服務(wù)端吮廉，用于做服務(wù)器的軟件。
Node.js是一個(gè)讓JavaScript運(yùn)行在服務(wù)器端的開發(fā)平臺(tái)说铃，它讓JavaScript的觸角伸到了服務(wù)器端访惜，他的特點(diǎn)是單線程，非阻塞腻扇，事件驅(qū)動(dòng)機(jī)制债热，由于單線程非阻塞的，所以在進(jìn)行高并發(fā)處理的時(shí)候還是蠻有利的幼苛，node屬于極客追求性能極致的產(chǎn)物窒篱，所以缺少服務(wù)器健壯性的考慮，就比如由于單線程舶沿，沒有給每個(gè)客戶分配線程所以一處崩潰全線崩潰墙杯，也就不適合銀行這種安全要求比較高的企業(yè)。
也許他在服務(wù)端的作用并不是十分的完美括荡，但是他的出現(xiàn)對(duì)前端的影響類似于蒸汽機(jī)對(duì)于人類的的影響高镐。09年開始，前端進(jìn)入工業(yè)時(shí)代畸冲。在這之前可能沒有真正的前段工程師這個(gè)職位嫉髓，只是個(gè)寫頁面的，切頁面的召夹。node的出現(xiàn)岩喷，標(biāo)志這前端工程師職位的正式確立，為什么這么說呢监憎？只有node之后，前端原來做不到的事情婶溯，我們可以做到了鲸阔，就比如代碼混淆合并壓縮甚至包括css代碼的預(yù)處理偷霉。也因?yàn)閚odejs的出現(xiàn)，前段自動(dòng)化測(cè)試工具才得以存在褐筛。這些我們?cè)谝郧笆亲霾坏降睦嗌伲琻ode出現(xiàn)以后，也出現(xiàn)了大量的基于node的工具渔扎，
如這張圖所示硫狞，我們可依次了解一下
npm是一個(gè)模塊管理器，在前端環(huán)境工程化開發(fā)的時(shí)候晃痴，用來添加一些依賴的組件残吩。下頭的這些工具，如果我們需要用的話倘核，可將使用的文件配置好泣侮，然后當(dāng)前目錄下直接運(yùn)行npm命令就可以安裝上。
express是在進(jìn)行nodejs開發(fā)時(shí)候的一個(gè)框架紧唱，應(yīng)該是類似于jquery之于js吧活尊，現(xiàn)階段，我們的服務(wù)器開發(fā)都是java所以也用不到這個(gè)框架漏益，有機(jī)會(huì)的話可以了解了解
grunt 是一個(gè)比較早的也比較成熟的對(duì)代碼進(jìn)行合并壓縮混淆這樣一個(gè)工具蛹锰。js用grunt腳本做整個(gè)項(xiàng)目的編譯，你把源代碼的目錄以及要壓縮哪些文件绰疤，不壓縮哪些文件铜犬，然后將生成的文件放在哪里在配置文件中配置好。然后編譯就可以得到最終的代碼峦睡，讀取代碼壓縮解析編譯輸出的過程實(shí)際上就是在node上完成的翎苫，網(wǎng)銀系統(tǒng) 的壓縮就是用這個(gè)工具構(gòu)建的，他可以將網(wǎng)銀初次加載的一百多個(gè)文件能減少一半左右榨了。而瀏覽器每次請(qǐng)求文件的并發(fā)量一般允許量是6個(gè)文件過多的時(shí)候必然會(huì)增大請(qǐng)求時(shí)間煎谍，至于為啥首次加載會(huì)有這么多的文件，待會(huì)講后我會(huì)詳細(xì)描述

gulp 然后這個(gè)可樂一樣的logo叫做gulp他是在grunt問世不久之后出現(xiàn)的龙屉，grunt的基礎(chǔ)上進(jìn)行了一定的改進(jìn)呐粘，在grunt如日中天的時(shí)候開出了一片天地，他和grunt最直觀的差別就是grunt的配置化转捕，在gunt中主要是修改配置文件就好作岖，而gulp則是以代碼的形式配置，據(jù)說相比較grunt的學(xué)習(xí)成本更低五芝，還有一點(diǎn)是gulp的是以文件流的形式操作痘儡，相比較grunt是先讀取文件，然后進(jìn)行合并枢步，合并之后再寫成臨時(shí)文件沉删，然后讀取臨時(shí)文件渐尿，進(jìn)行混淆再寫，然后再把臨時(shí)文件讀取出來矾瑰，寫到你要輸出的文件的地方砖茸，而gulp則是讀取文件然后直接壓縮合并再輸出到目標(biāo)文件上。

webpack 編譯處理的殴穴，前邊說過凉夯，我們的瀏覽器目前只支持html css和js這些東西，但是有時(shí)候?yàn)榱吮阌陂_發(fā)采幌，我們會(huì)用新的語言就比如js的超類typescript進(jìn)行處理劲够，但是typescript的語法特性瀏覽器并不支持，所以在部署到瀏覽器之前需要先把ts也就是前邊說的typescript解析成js語言植榕，這樣瀏覽器才能識(shí)別出來再沧。他和上邊兩個(gè)工具聽起來好像比較類似，其實(shí)是不一樣的尊残，上邊主要是用來壓縮混淆的炒瘸，webpack則是用來將瀏覽器不能識(shí)別的抽象類語言編譯成瀏覽器能識(shí)別的語言。

karam作為一個(gè)平臺(tái)出現(xiàn)的寝衫，類似于tomecat和jsp的關(guān)系一樣顷扩，他可以運(yùn)行各種各樣的測(cè)試案例，jasmine則是一種語法慰毅，方便測(cè)試隘截，用來寫斷言式的測(cè)試。

看一下右邊的這三個(gè)是css的預(yù)處理器 大家知道css是一種圖靈不完備的語言汹胃，相當(dāng)與只是把樣式放到了對(duì)應(yīng)的選擇器下邊婶芭，而預(yù)處理器定義了一種新的語言，他在css的基礎(chǔ)上添加了變量 函數(shù)以及基本的邏輯判斷着饥，這樣來處理樣式犀农，然后再編譯成正常的css文件，供瀏覽器識(shí)別宰掉，還有一個(gè)好處是呵哨，不用太考慮瀏覽器之間的差別，就比如css這個(gè)樣式火狐是這種寫法轨奄，然后ie是另一種寫法孟害，這個(gè)他會(huì)自動(dòng)生成，但是你用的是ie11的特性挪拟，在ie8上依然是沒有效果的挨务。目前市面上的css預(yù)處理器有很多，但是討論最多的還是這三個(gè)，sass less stylus
sass是最早最成熟的css預(yù)處理器語言耘子，可用變量常量混入函數(shù)等語功能果漾，能夠更有效的寫出這些語言來球切。
less的出現(xiàn)受sass的影響比較大谷誓，但是在語法上比較類似于css，所以對(duì)于設(shè)計(jì)人員和開發(fā)人員來說吨凑，開發(fā)相對(duì)比較容易『赐幔現(xiàn)階段很多流行的框架中已經(jīng)能看到他的影子了。
stylus出現(xiàn)的最晚鸵钝，普及率不如前邊兩個(gè)高糙臼，但也是挺好用的，他的特點(diǎn)是能夠高效動(dòng)態(tài)使用表達(dá)式的方式生成css共瀏覽器使用

這就是node出現(xiàn)之后衍生出來的一系列產(chǎn)品恩商，還有很多变逃，他們不一定是前段開發(fā)所必須用到的，但卻能使前段開發(fā)更加的系統(tǒng)便捷

h5

前段時(shí)間怠堪，有一個(gè)名詞特別的火揽乱，叫h5,作為一個(gè)前端，覺的h5的不就是是html的第五代標(biāo)準(zhǔn)粟矿，html5簡(jiǎn)稱么凰棉，技術(shù)而已，怎么會(huì)這么火陌粹？然后我百度了一下h5搜索結(jié)果都是ppt上的這種單頁程序撒犀，不得不說騰訊確實(shí)成功，用自己的產(chǎn)品重新定義了h5的含義掏秩。所以說起h5的時(shí)候或舞，最好要先判斷一下他的意圖，到底是業(yè)務(wù)所說的這種程序還是技術(shù)上的html5
html5和h5也不是毫無關(guān)系的蒙幻，畢竟h5的出現(xiàn)要依賴于html5的技術(shù)當(dāng)然html5的出現(xiàn)也是為了適應(yīng)手機(jī)端而推出的新的標(biāo)準(zhǔn)映凳。

html有自己的規(guī)范標(biāo)準(zhǔn)，那js有沒有呢杆煞？其實(shí)也是有的魏宽，96年的時(shí)候網(wǎng)景公司推出了javascript語言，然后當(dāng)年的就提交國際標(biāo)準(zhǔn)化組織决乎，也就是ECMA队询，希望這種語言成為國際標(biāo)準(zhǔn)，但是由于java的商標(biāo)歸sun公司所有构诚，然后js商標(biāo)歸網(wǎng)景公司所有蚌斩，同時(shí)為了凸顯國際標(biāo)準(zhǔn)化組織，所以javascript的版本號(hào)范嘱，我們稱之位ES送膳，ES6是04年提出來的员魏，在ES5也就是我們?nèi)粘Ｓ玫膉s的基礎(chǔ)上增加了不少的新特性，方便了工程化開發(fā)叠聋。但是由于在ie低版本上兼容不是很好撕阎，所以同html5和css3一樣，主要面向的是手機(jī)市場(chǎng)碌补。

而typescript是微軟開發(fā)的一款語言虏束，他是js的超集合，在es6的基礎(chǔ)上添加了靜態(tài)類型和基于類的面向?qū)ο缶幊滔谜隆Ｒ部梢哉f镇匀，他就是未來js的模型。目前三大框架之一的angular2就是在用這種語言袜啃，由于他能夠?qū)崿F(xiàn)依賴注入面向?qū)ο箝_發(fā)的屬性汗侵，可以使得java程序員幾乎能夠無縫上手，只是他是去年才出來的群发，主要是面對(duì)的是手機(jī)市場(chǎng)晰韵，而且比較激進(jìn)，所以ie11之前的版本兼容性都不怎么好也物。但是在可兼容到安卓4.1

SPA的意義

spa也就是single page application 單頁程序
在我們大部分人的印象中宫屠，前段只是mvc的view部分，對(duì)不對(duì)滑蚯，瀏覽器發(fā)送請(qǐng)求的時(shí)候浪蹂，服務(wù)端進(jìn)行mvc處理，利用jsp/php之類告材，動(dòng)態(tài)生成html語言坤次，然后在瀏覽器上渲染出來。這樣有個(gè)不好的地方就是基本上服務(wù)端把所有的東西都給做完了斥赋，1缰猴、服務(wù)器的壓力過大，2疤剑、前后端分工并不明確滑绒，3、每次加載渲染時(shí)間相對(duì)較長隘膘。尤其是手機(jī)端疑故，在4g出現(xiàn)以前加載一個(gè)頁面是一件十分感人的事情，用戶體驗(yàn)特別差弯菊。angularJs等框架出現(xiàn)后解決了這個(gè)問題纵势，他會(huì)在首次加載的時(shí)候加載大部分依賴的js然后我們就可以在前段實(shí)現(xiàn)控制，類似于mca和核心溝通一樣，瀏覽器和服務(wù)端的的溝通也只是報(bào)文的處理钦铁，這樣服務(wù)端和前段的開發(fā)就不再形成阻塞软舌，約定好接口形式，然后同時(shí)開發(fā)牛曹，都開發(fā)好都在進(jìn)行接口調(diào)試佛点，這樣也提升了效率，
這是一個(gè)余額查詢的調(diào)用形式躏仇，

操作交易其實(shí)也類似恋脚，我向特定的接口發(fā)送json串，然后后臺(tái)返回操作成功與否焰手，我們根據(jù)返回報(bào)文的情況做不同的處理或彈出錯(cuò)誤信息或跳轉(zhuǎn)到對(duì)應(yīng)界面，或者是跳轉(zhuǎn)到錯(cuò)誤界面上怀喉。這樣前端就負(fù)責(zé)了網(wǎng)站的頁面域用戶的一切交互书妻，而后臺(tái)負(fù)責(zé)對(duì)數(shù)據(jù)進(jìn)行安全處理，把視圖與視圖的控制交由前端管理躬拢，同時(shí)當(dāng)我們跳轉(zhuǎn)頁面的時(shí)候也不是重新加載一個(gè)新的界面躲履，而是加載一個(gè)頁面片段，然后將其嵌套進(jìn)當(dāng)前界面中聊闯，這個(gè)過程中避免了頁面的重新加載與渲染工猜，js的那些全局變量也不需要重新賦值