筆者的學(xué)習(xí)進(jìn)度比較慢,直到兩年以前寫(xiě)的網(wǎng)站都還是以服務(wù)端為主導(dǎo)的,即網(wǎng)站的所有視圖都由服務(wù)器視圖模板來(lái)渲染,筆者使用的是 DotNet MVC,開(kāi)發(fā)套路就是在Controller里面寫(xiě)Action,在Views里寫(xiě)對(duì)應(yīng)的Action.cshtml,使用ajax發(fā)起請(qǐng)求已經(jīng)是比較前端的事情了。這種時(shí)候由于DotNet MVC框架繼承的微軟風(fēng)格的懶人模式,甚至不需要去知道其路由是如何實(shí)現(xiàn)的,給人一種感覺(jué)是只要在瀏覽器里敲進(jìn)去Controller名與Action名,就訪問(wèn)到視圖了。
后來(lái)筆者開(kāi)始使用ng1前端框架,起初的開(kāi)發(fā)完全放棄其路由功能,而使用服務(wù)端MVC路由來(lái)區(qū)分頁(yè)面,在各自頁(yè)面內(nèi)寫(xiě)ng1代碼。現(xiàn)在想來(lái)這樣做實(shí)在是浪費(fèi)了ng1的能力,因?yàn)?Net MVC的視圖能力雖說(shuō)有布局頁(yè)這些概念,但其仍然是多頁(yè)面的應(yīng)用,視圖間的切換都會(huì)造成頁(yè)面的刷新,這會(huì)導(dǎo)致每切換一個(gè)頁(yè)面都會(huì)重新加載一次ng1近兩萬(wàn)行的代碼。根本原因是沒(méi)有利用這個(gè)強(qiáng)大的前端框架的精髓之一——前端路由。
拋開(kāi)前端路由的底層,其所做的事情就是動(dòng)態(tài)操作DOM來(lái)模擬頁(yè)面的切換,帶來(lái)的好處是巨大的,首先是不用再頁(yè)面切換時(shí)重復(fù)加載大量的腳本依賴了,還有就是頁(yè)面切換不再是白屏讀條,而是可以加上接近原生應(yīng)用的切換效果。而使用了前端路由后要解決的最大問(wèn)題,自然是如何與服務(wù)端路由分離,至少不造成沖突。
前端路由有兩種形式,一種是Html5的pushState風(fēng)格,一種是使用#符號(hào)實(shí)現(xiàn)與服務(wù)端路由的分隔,筆者在基于微信公眾號(hào)開(kāi)發(fā)的時(shí)候涉及到了使用前端路由的SPA與微信API交互的各種情況,發(fā)現(xiàn)這兩種形式各有問(wèn)題,只能說(shuō)微信以及傳統(tǒng)的web服務(wù)器(至少IIS這個(gè)毒瘤)對(duì)現(xiàn)在這些前后端分離的SPA應(yīng)用還不怎么友好。
一、ng2項(xiàng)目的部署