Nodejs in Visual Studio Code 12.構建單頁應用Scrat實踐

1.開始

　　隨着前端工程化深刻研究，前端工程師如今碉堡了，甚至搞了個本身的前端網站http://div.io/須要邀請碼才能註冊，不過裏面的技術確實牛。距離頂級的前端架構，目前博主應該是far away，幸運的是如今有不少前端大神積極的分享本身的經驗，好比百度這位https://github.com/fouber/blog/issues/4。

　　將iframe項目使用多頁HTML與FIS重構之後，前端已經獲得了極大的優化，然而多頁HTML帶來的狀態丟失（登陸信息，菜單信息），仍然對優化形成阻礙。

　　單頁應用能夠很好的解決多頁HTML面臨狀態丟失的尷尬，感受單頁HTML與iframe十分像，只有一個HTML頁面，全部Contents內容動態加載進來。

名詞解釋

　　Scrat : https://github.com/scrat-team/scrat

　　AMD,CMD ： 兩種編程規範，不是指CPU。。，AMD能夠參考requirejs。

　　Combo ：聚合服務，如今互聯網帶寬這麼大，若是合併多個HTTP請求爲單一HTTP請求將極大提高效率，若是使用AMD規範編程，那麼能夠找到js模塊之間的互相依賴，好比a.js依賴b.js,c.js，那麼客戶端經過框架（如scrat.js）將會自動發起Combo?b.js,c.js,a.js這個請求，服務器在一個請求以內把這三個JS都返回回來，顯然效率上要比請求三個JS高得多。

 

2.Scrat構建單頁HTML的實踐

爲何須要構建單頁HTML？

　　若是你還在使用iframe做爲前端框架，那麼是時候放棄了，如今有多種成熟的單頁HTML框架應用於一些小型中型項目並取得了成功，Scrat就是其中之一。

　　然而對於一些大中型網站好比說獵娉網、京東之類的仍然使用多頁HTML的SEO技術，爲毛個人項目就必定要用單頁HTML呢？

　　個人理解是，多頁HTML已經可以解決大多數問題了，可是當咱們開發移動APP或者企業應用時，一個須要爲流量考慮，一個與用戶狀態強相關，在這個時候單頁HTML技術是最優的選擇之一。

　　然而單頁HTML這個叫法不太拉風，我更喜歡稱之爲Blink技術。想象一下一眨眼系統就加載好了，這估計就是單頁HTML的最終目標吧。

　　總之爲了性能也好，爲了XX也罷，我就這麼開始學習Blink技術了。

　　iframe就像在守家的近衛，多頁HTML就像逼高的天災擁有巨大的優點，若是將iframe升級成單頁HTML，那就是近衛潮汐出了把跳刀，忽然Blink出去完虐天災一波打出優點，奠基勝果。

 

Blink與Combo？

　　潮汐跳大後後麪醬油連招要接好，必然能贏且看起來也是賞心悅目，若是接很差Combo，這，我去.....

　　Combo服務(HTTP請求聚合)並非必備的，主要是一堆.Net程序員，忽然多出個Node.js服務各類恐慌，使用Scrat構建的單頁系統能夠在配置中關閉Combo，這樣構建的項目將是一個僅包含靜態文件的純前端項目。（能夠先學習blink搞懂核心，後面再學Combo）

 

如何構建純前端單頁？

　　首先下載示例代碼

 

git clone https://github.com/scrat-team/scrat-site.git

 

　　修改scrat/components/menu.js

　　修改scrat/components/menu.handlebars

　　以上兩個修改就是去掉/#!/最前面的斜槓/，將絕對地址變成相對地址方便發佈。

　　打開CMD，進入Scrat目錄執行命令

scrat release -mod ../output

　　

　　打開output輸出目錄查看public文件夾下文件，自動完成了靜態文件指紋，關閉了Combo服務。

　　將public目錄發佈在IIS中

　　打開瀏覽器輸入http://localhost/public/scrat-site/0.1.0/index.html，這就是個人第一個Blink單頁

　　整個頁面只有一個入口index.html，全部其餘模塊都是使用ajax技術異步加載，純前端。

 

3.結束

　　scrat表明一個前端開發體系，若是須要進一步瞭解與學習，這個官方示例還有不少東西能夠挖掘。