快速構建SPA框架SalutJS--項目工程目錄 一

原由

剛進公司那會兒，接的是一個微信APP應用，SPA是前人搭起來的，用到的技術主要是backbone和zepto。後來那人走了，就滷煮一我的把項目接了下來。項目越是到後面，愈加覺了諸多弊端，不停的增長界面和業務使得整個應用看起來臃腫不堪。因而以爲是時候重構了。那時也巧是正好認識requireJS，認爲界面嘛，總可像那模塊同樣，異步加載進來。因而就在舊瓶子裏裝了新酒，除了界面，代碼結構就徹底重寫了。後來私底下又接了別人的活，也是微信APP應用，覺着跟咱以前的差很少，也就把重構後的代碼一併用上，發現效果很不錯。完成後漸漸的生出本身寫框架的想法，因而便抽出代碼，修改，優化。積累起來一個基於backbone的快速開發的代碼庫。用來開發html的單界面應用。

簡介

目前就將它命名爲SalutJS吧。它的做用主要是讓開發人員關注具體的業務，快速的搭建基礎框架。若是你使用了Salut，你能夠在兩分鐘內搭建起來一個簡單的單頁應用。固然，所謂的單頁是指不刷新界面的狀況下切換視圖界面，是用戶感受整個應用的界面是流程的，無刷新的。咱們是利用瀏覽器的hash變化值和div隱藏切換實現的這個功能。經過檢測瀏覽器的hash值變化，從而改變div（一個完整的界面）的顯示和隱藏，從而達到無刷新切換界面的效果。一開始有個疑問，那就是若是界面愈來愈多，會不會影響加載性能呢？我想這是每一個作移動開發的人員都回去考慮的問題。SalutJS爲你解決了這個問題。界面是能夠拆分，組合，而且是異步加載的。你能夠在一開始只load出第一個界面，而後再須要的時候異步load其餘界面。資源文件（js，template）都是異步加載到客戶端的。這樣就解決了業務提示從而致使首屏加載速度慢的問題了。其次，SalutJS的全部節目幾乎是只須要幾行配置就能夠展現出來，等因而將界面開發配置化了，你須要作的事建的業務需求和界面css代碼的編寫。經過它的簡單的API，你能夠快速簡介地串聯起各個界面。

示例

滷煮將在之後幾篇博文中陸續介紹SalutJs。經過製做一個簡單的單頁應用，展現它的具體用法。下面是實例部分的截圖。能夠改變地址欄改變了hash值推進界面變化。

結語

SalutJS只爲快速開發SPA這個簡單的目的。固然，裏面的錯誤和欠考慮之處在所不免。你能夠去github上fork一下，經過閱讀代碼，發現問題而且@我提出你的寶貴意見，一塊兒完善它，將其造福於廣大的程序員。另外，雖然如今用的是requireJS，然而異步模塊加載的模塊滷煮已經重寫一次，用起來雖然差強人意，單比起requireJS，確實沒有其成熟，不過體積卻只有它的四分之一，爲了精簡代碼，滷煮後續會替換掉之。還有，滷煮到最後也是但願替換掉backbone的，真正實現本身的一套原生框架。這項工程較大，須要花不少時間。也須要諸位的慷慨相助。

源碼地址

https://github.com/constantince/Salut