面向UI編程架構：ui.js架構思路詳細設計

標籤：一段   開發   思想   更新   網頁布局   卸載   路徑   .com   java   

由於上一次的靈光一閃，萌生了對面向UI編程的思想實現。經過一段時間的考慮和設計，現在將思想和具體細節記錄下來：

具體思路描述：

1. 在UI.config檔案中，配置所有參數，比如頁面模板、所有組件、組件控制、介面注入
2. ui.js根據設定檔中所選擇的模板，進入布局模板庫中找到所載入的模板
3. 將模板首先注入頁面之中。
4. ui.js分析頁面模板布局中所需要載入的組件以及其他動作，將這些組件資料注入到資料中轉池
5. 然後資料中轉池，將組件資訊傳遞給ui.js，需要哪些組件和操作
6. ui.js將中轉池傳過來的組件資訊通過設定檔從組件庫中去尋找
7. 尋找到模板所需組件注入頁面，資料中轉池配合組件的js，對組件進行初始化。直到頁面載入完成

 

設定檔的配置設計：

UI.config=({    //配置路徑    baseUrl:"/",    //注入模組    template:{        //布局模板名稱：模板地址+是否裝載        "layout1":["layout/layout1.tpl",true],        "layout2":["layout/layout1.tpl",false]    },    //注入介面    interface:{        "interface1":"www.123.com/interface1",        "interface2":"www.123.com/interface2",        "interface3":"www.123.com/interface3",        "interface4":"www.123.com/interface4",        "interface5":"www.123.com/interface5",    },    //注入組件    module:{        //組件名：組件地址+組件是否裝載+介面注入        "md1":["module/header.mold",true,["interface1","interface2"]],        "md2":["module/body.mold",true,["interface1","interface2"]]    },    //組件邏輯js    data:{        //js所需介面和其他資料都需資料中轉池配合        "md1_js":"modulejs/md1.js"    }});

　　

 資料中轉池設計思路：

具體思路描述：

1. 每個組件在設定檔中產生之後，匯入ui.js中處理後，會產生每個組件對應的uuid（唯一標識）
2. 在進行資料流轉和互連的時候，必須通過uuid進行儲存和使用
3. 對於只使用一次和永久存放的資料進行標記和回收
4. 配合組件進行變更，組件載入資料載入，組件卸載資料卸載
5. ...

 

面向UI思想架構優勢：

1. 高度複用html，如果一個更通用的模板，可以無限次複用（可以更換介面）
2. 靈活變更網頁布局。傳統頁面都是布局好了之後無法變更，UI引入布局模板，可以隨意進行布局，只要最後引入組件正確即可
3. 對所有介面進行了統一管理，每個組件進行分別注入，按需使用
4. 可進行全球分布協作開發，每個組件配置地址可以在互連網的任何角落，我只需要按著地址可以取到我的組件和處理js即可
5. 可一個項目，由互連網上各處的組件拼湊完成,如果後台可支援跨域，那麼一個項目前後台都可是互連網上的資源，而我們部署的伺服器只是提供一個展示入口
6. 開發只需要專註每個組件開發即可，一個一個組件開發，開發完成通過配置裝載上線
7. 對於項目局部進行更新，可直接卸載一個組件，不需要關閉整個伺服器。更新完成之後，更新群組件，重新裝載上線
8. 每個企業可維護自己的一套組件庫，高度複用。新項目如果遇到以前開發過的組件直接配置路徑和參數使用。
9. 可將設定檔參數通過後台擷取，動態維護所有組件。方便營運
10. 對於接盤俠（維護人員）來說，有更方便和快捷的方式進行處理（局部組件開發規範參考自我總結的高效開發和維護方案）
11. 更使用於單頁應用，因為只有針對於局部重新整理，載入速度比一般網頁速度更快
12. ...我唯一能想到的就這麼多，我會將這個項目開源，希望更多的志同道合的人，一起開發更強大的UI.js

 

 PS：現在只是對思路做一個詳細設計，在開發中可能會遇到各種各樣的問題，而且該思路是我的第一次起草，可能不是很完善，如果大家有更好的思想和靈感，希望大家不吝賜教。這段時間先把基礎版本寫好，然後公布成開源項目出去，以後歡迎大家一起完善。

下面是我的手稿：

 

 

我是碼農，我不喜歡被代碼玩弄，我喜歡用代碼去改變世界，希望這世界更美好！！！加油，共勉！！！！

 

面向UI編程架構：ui.js架構思路詳細設計