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

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

1、前端

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

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

前段時(shí)間找到了世界上的第一張網(wǎng)頁(yè)，現(xiàn)在還可以訪問(wèn)，他 http://info.cern.ch/ ，可以看到，所謂網(wǎng)站就和現(xiàn)在的world類似，只有標(biāo)記語(yǔ)言和超鏈接，完全沒(méi)有動(dòng)效和樣式可言。更不用說(shuō)代碼的復(fù)用性，以及局部加載。
這是一個(gè)偉大的時(shí)刻，標(biāo)志著萬(wàn)維網(wǎng)的誕生，不過(guò)站在歷史中往前看，就會(huì)覺(jué)得那個(gè)時(shí)代簡(jiǎn)直是洪荒時(shí)期，只是把簡(jiǎn)單的信息傳達(dá)出去，連刀耕火種的能力都沒(méi)有達(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é)頁(yè)面結(jié)構(gòu)，決定著網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容，是整個(gè)網(wǎng)頁(yè)的軀殼，css負(fù)責(zé)樣式部分，他決定了網(wǎng)站看起來(lái)是什么樣子，屬于前段的皮膚吧，js控制網(wǎng)頁(yè)的行為，決定做什么一般來(lái)說(shuō)，js負(fù)責(zé)調(diào)用一些前端計(jì)算與動(dòng)態(tài)加載，應(yīng)該屬于整個(gè)網(wǎng)頁(yè)的靈魂。只有這三個(gè)同時(shí)具備的，才能算是一個(gè)真正的網(wǎng)站前端。
但是這個(gè)時(shí)后的網(wǎng)頁(yè)還有些許的缺陷，不能局部加載，復(fù)用性比較差。就拿我們的網(wǎng)銀舉例子：可看到，基本上所有的界面的頭部，底部還有菜單部分，都基本上是一樣的，我沒(méi)道理同樣的代碼在每個(gè)頁(yè)面上都要寫一遍，所以不久，微軟就推出了ifram標(biāo)簽，實(shí)現(xiàn)了異步的局部加載，就是相當(dāng)于在網(wǎng)頁(yè)中嵌套一個(gè)網(wǎng)頁(yè)，切換目錄只是切換ifram中的網(wǎng)頁(yè)，像我們的驗(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è)頁(yè)面，第一個(gè)頁(yè)面輸入我們需要添加的查詢字段，然后點(diǎn)擊查詢，進(jìn)行form表單提交，然后我們就跳轉(zhuǎn)到 form表單返回結(jié)果頁(yè)面，從頭開始渲染這個(gè)頁(yè)面。如果網(wǎng)速很慢的話，這中間會(huì)出現(xiàn)點(diǎn)擊搜索，然后一個(gè)白屏，之后才出現(xiàn)結(jié)果頁(yè)面。而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ù)庫(kù)查回列表數(shù)據(jù)，需要在服務(wù)端重新將數(shù)據(jù)拼裝到頁(yè)面上，使用ajax技術(shù)，這部分的操作被挪到了客戶端瀏覽器上，所以ajax的出現(xiàn)，并不僅僅優(yōu)化了用戶體驗(yàn)，他將很大一部分計(jì)算從服務(wù)器挪到了前端，使前端能夠完成了更多的工作。為日后的前后端分離提供了技術(shù)支持。

jquery

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

2、大前端與Anaular

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

從99年到09年附近基本上沒(méi)有什么大的變化，一直到谷歌發(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ù)器健壯性的考慮，就比如由于單線程，沒(méi)有給每個(gè)客戶分配線程所以一處崩潰全線崩潰，也就不適合銀行這種安全要求比較高的企業(yè)。
也許他在服務(wù)端的作用并不是十分的完美，但是他的出現(xiàn)對(duì)前端的影響類似于蒸汽機(jī)對(duì)于人類的的影響。09年開始，前端進(jìn)入工業(yè)時(shí)代。在這之前可能沒(méi)有真正的前段工程師這個(gè)職位，只是個(gè)寫頁(yè)面的，切頁(yè)面的。node的出現(xiàn)，標(biāo)志這前端工程師職位的正式確立，為什么這么說(shuō)呢？只有node之后，前端原來(lái)做不到的事情，我們可以做到了，就比如代碼混淆合并壓縮甚至包括css代碼的預(yù)處理。也因?yàn)閚odejs的出現(xiàn)，前段自動(dòng)化測(cè)試工具才得以存在。這些我們?cè)谝郧笆亲霾坏降?，node出現(xiàn)以后，也出現(xiàn)了大量的基于node的工具，
如這張圖所示，我們可依次了解一下
npm是一個(gè)模塊管理器，在前端環(huán)境工程化開發(fā)的時(shí)候，用來(lái)添加一些依賴的組件。下頭的這些工具，如果我們需要用的話，可將使用的文件配置好，然后當(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)目的編譯，你把源代碼的目錄以及要壓縮哪些文件，不壓縮哪些文件，然后將生成的文件放在哪里在配置文件中配置好。然后編譯就可以得到最終的代碼，讀取代碼壓縮解析編譯輸出的過(guò)程實(shí)際上就是在node上完成的，網(wǎng)銀系統(tǒng) 的壓縮就是用這個(gè)工具構(gòu)建的，他可以將網(wǎng)銀初次加載的一百多個(gè)文件能減少一半左右。而瀏覽器每次請(qǐng)求文件的并發(fā)量一般允許量是6個(gè)文件過(guò)多的時(shí)候必然會(huì)增大請(qǐng)求時(shí)間，至于為啥首次加載會(huì)有這么多的文件，待會(huì)講后我會(huì)詳細(xì)描述

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

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

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

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

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

h5

前段時(shí)間，有一個(gè)名詞特別的火，叫h5,作為一個(gè)前端，覺(jué)的h5的不就是是html的第五代標(biāo)準(zhǔn)，html5簡(jiǎn)稱么，技術(shù)而已，怎么會(huì)這么火？然后我百度了一下h5搜索結(jié)果都是ppt上的這種單頁(yè)程序，不得不說(shuō)騰訊確實(shí)成功，用自己的產(chǎn)品重新定義了h5的含義。所以說(shuō)起h5的時(shí)候，最好要先判斷一下他的意圖，到底是業(yè)務(wù)所說(shuō)的這種程序還是技術(shù)上的html5
html5和h5也不是毫無(wú)關(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有沒(méi)有呢？其實(shí)也是有的，96年的時(shí)候網(wǎng)景公司推出了javascript語(yǔ)言，然后當(dāng)年的就提交國(guó)際標(biāo)準(zhǔn)化組織，也就是ECMA，希望這種語(yǔ)言成為國(guó)際標(biāo)準(zhǔn)，但是由于java的商標(biāo)歸sun公司所有，然后js商標(biāo)歸網(wǎng)景公司所有，同時(shí)為了凸顯國(guó)際標(biāo)準(zhǔn)化組織，所以javascript的版本號(hào)，我們稱之位ES，ES6是04年提出來(lái)的，在ES5也就是我們?nèi)粘Ｓ玫膉s的基礎(chǔ)上增加了不少的新特性，方便了工程化開發(fā)。但是由于在ie低版本上兼容不是很好，所以同html5和css3一樣，主要面向的是手機(jī)市場(chǎng)。

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

SPA的意義

spa也就是single page application 單頁(yè)程序
在我們大部分人的印象中，前段只是mvc的view部分，對(duì)不對(duì)，瀏覽器發(fā)送請(qǐng)求的時(shí)候，服務(wù)端進(jìn)行mvc處理，利用jsp/php之類，動(dòng)態(tài)生成html語(yǔ)言，然后在瀏覽器上渲染出來(lái)。這樣有個(gè)不好的地方就是基本上服務(wù)端把所有的東西都給做完了，1、服務(wù)器的壓力過(guò)大，2、前后端分工并不明確，3、每次加載渲染時(shí)間相對(duì)較長(zhǎng)。尤其是手機(jī)端，在4g出現(xiàn)以前加載一個(gè)頁(yè)面是一件十分感人的事情，用戶體驗(yàn)特別差。angularJs等框架出現(xiàn)后解決了這個(gè)問(wèn)題，他會(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)站的頁(yè)面域用戶的一切交互，而后臺(tái)負(fù)責(zé)對(duì)數(shù)據(jù)進(jìn)行安全處理，把視圖與視圖的控制交由前端管理，同時(shí)當(dāng)我們跳轉(zhuǎn)頁(yè)面的時(shí)候也不是重新加載一個(gè)新的界面，而是加載一個(gè)頁(yè)面片段，然后將其嵌套進(jìn)當(dāng)前界面中，這個(gè)過(guò)程中避免了頁(yè)面的重新加載與渲染，js的那些全局變量也不需要重新賦值