Web前端發(fā)展及應(yīng)用復(fù)習(xí)進程

1、Web 前 端 發(fā) 展 及 應(yīng) 用web前端的發(fā)展及應(yīng)用簡單明了的早期時代這個也稱為web 1.0時代，非常適合創(chuàng)業(yè)型不分前后端，經(jīng)常 3-5個人就可以搞 定所有的開發(fā)，基本上是服務(wù)端給什么，瀏覽器就展現(xiàn)什么（由web server層控制）好處：簡單明了，本地起一個Tomcat或者Apache就能開發(fā)了，只要業(yè)務(wù)不太復(fù) 雜就都還好。弊端：但業(yè)務(wù)太多了，變得復(fù)雜了， server越來越多，開發(fā)人員增多時，就會遇 到以下的一些問題1. Service越來越多，調(diào)用關(guān)系變復(fù)雜，前端搭建本地環(huán)境不再是一件簡單的事。2. Jsp等代碼的可維護性越來越差。jsp:非常強大，可以內(nèi)嵌 Java代碼。這種強大

2、使得前后端的職責(zé)不清晰，jsp就變成了一個灰色地帶，經(jīng)常會出現(xiàn)為了趕項目等各種緊急的需求，會在jsp里糅雜了大量業(yè)務(wù)代碼，這種積攢到一定程度，往往會打來大量的維護成本。1.0I I.jHTMLjvaSeiiptICSIJSPWebI | JavaScript| CSS HClient SideSrOApserSemiteApp Server.后端為主的 MVC時代為了降低復(fù)雜度，以后端為出發(fā)點，有了 web server層的框架升級，這就是后 端的MVC時代。從上面的圖可以看出來代碼的維護性得到了明顯的好轉(zhuǎn)，MVC是個非常好的協(xié)作模式，從框架層面讓開發(fā)者懂得什么是代碼，應(yīng)該寫在什么地方，這使得

3、模板里寫不了 Java代碼，但功能看起來變?nèi)趿?，正是這種限制使得了前后端分工更清晰，但任然會有問題存在：1. 前端開發(fā)重度依賴開發(fā)環(huán)境這種框架下，前后協(xié)作有兩種模式：一種是前端寫demo，寫好后讓后端去套模板。好處：很明顯，demo可以本地開發(fā)，很高效，不足是還要后端套模板，有可能 會套錯，而且還要前端確定，來回溝通調(diào)整的成本較大。另一種協(xié)作的模式是前端負責(zé)瀏覽器的所有開發(fā)和服務(wù)器端的view層模板開發(fā),支付寶是這種模式。好處：UI相關(guān)的代碼都是前端去寫就好，后端不用太關(guān)注，弊端：前端開發(fā)嚴重綁定后端的環(huán)境，環(huán)境成為影響前端開發(fā)效率的重要因素。2. 前后端職責(zé)依舊糾纏不清Velocity模板還

4、是挺強大的，變量邏輯，宏等特性，依舊可以通過拿到上下文變量來實現(xiàn)各種業(yè)務(wù)邏輯。這樣只要前端弱勢一點，往往會被后端要求拿到的上下 層寫出不少業(yè)務(wù)代碼，還有一個灰色地帶是controller，頁面路由等功能應(yīng)該前端最關(guān)注的，但是由后端來實現(xiàn)了。三Ajax的SPA時代2005年Ajax正式提出，加上CDN開始大量用靜態(tài)資源儲存，于是就出現(xiàn)了javascriptd 的 SPA 時代。特點：這種模式下，前后端的分工就非常清晰了，前后端的關(guān)鍵協(xié)作點是Ajax接口，看起開很好，但回頭看看，這與jsp時代區(qū)別不大。復(fù)雜程度從服務(wù)端的jsp里移到了瀏覽器得到JavaScript,瀏覽器變得復(fù)雜，類似 Sprin

5、g MVC， 這個時代開始出現(xiàn)瀏覽器端的分層架構(gòu):對于SPA，有幾個重要的挑戰(zhàn)1. 前后端接口的約定：如果后端的接口一趟糊涂，后端的業(yè)務(wù)模型不夠穩(wěn)定，那這樣前端開發(fā)會很 痛苦。2. 前端開發(fā)的復(fù)雜度調(diào)控：SPA應(yīng)用大多數(shù)以功能交互型為主，JavaScript代碼過十萬行很正常。大量js代碼的組織與view層的綁定等，都不是容易的事情。Single Page ApplicationClient SideBrowserServer S deApp SerFerLloifel鼻 |二StMceV aGCnlrol! &r四前端為主的MV時代為了降低前端開發(fā)的復(fù)雜度，例如:好處：1. 前后端職責(zé)很清晰

6、:前端在瀏覽器端工作，后端在服務(wù)端工作。2. 前端開發(fā)的復(fù)雜問題可控：前端代碼很重，但合理的分層，讓前端代碼各司其職。3. 部署相對獨立：產(chǎn)品可以快速改進。不足：4. 代碼不能復(fù)用，例如后端依舊需要對數(shù)據(jù)做出各種校驗。5. SPA不能滿足所有需求，依舊存在大量頁面應(yīng)用。五.Node帶來的全棧時代Node.js 興前端為主的MV*模式解決了很多很多問題，但依舊不足，然后起了，JavaScript開始有能力運行在服務(wù)端，這就研發(fā)了一種新的模式:Front-EndBack-EndBrowserServerServer在這種情況下，前后端職責(zé)很清晰。對前端來說，兩個UI層各司其職：1, Front-end UI layer處理瀏覽器層的展現(xiàn)邏輯。通過 CSS渲染樣式，通過JavaScript添加交互功能，HTML的生成也可以放在這層，具體看應(yīng)用場景。2，Back-end UI layre處理路由，模板，數(shù)據(jù)獲取等。通過路由，前端可以自主 把控URL Design，這樣無論是單頁面還是多頁面應(yīng)用，前端都可以自由調(diào)控， 后端也可以擺脫對展現(xiàn)的強關(guān)注，可以專心于業(yè)務(wù)邏輯的開發(fā)。與JSP比較，全棧模式看起來是一種回歸，也的確是一種原始的開發(fā)模式的回歸，不