SmartJS 系列規劃分享和背景介紹

發佈了smartjs後，有朋友問：「沒看懂到底是幹嗎的」。唉，打擊了，每次我都想高唱其實你不懂個人心。

今天把相關的東西都整理了一遍，給你們介紹一下。裏面絕大多數都已經實現過，有些則是有新的思路重作或者是增強。哈哈，應該也算不上從新造輪子，

 

smartjs產生的背景

---

 

這幾年一直在之前端顧問的身份外包給國內某大型h公司作企業級的框架，而後提供給h公司內部項目使用。先後經歷過三個這樣項目，都是擔任前端架構師，其中一個是移動web類，是支援過去的，沒有深刻，搭了個架子子就被拉回原來項目。只惋惜該公司沒有開源的文化，因此不少東西都沒法分享出來。

同時，我本身的smartui2.0的內容也籌備的差很少了，因此順勢就在框架上面引入了很多smartui2.0思想和實現。而由於項目的忙碌，我本身的smartui2.0卻進度緩慢。

今年，之前作的框架在h公司使用率很是搞，獲得不少好評，同時頗有意思的東西也搞的差很少了，而後…………，就沒有而後了。h公司結構調整，框架與另一個合體，又要從新搞出一個高大上的cloud app engine.

藉此機會，我恰好把一些新的思路和以往作的東西都梳理了一遍，這就有了smartjs。

 

什麼是SmartJS

---

是一個js庫，提供了一些前端開發支持，作的事情與jquery，zepto這些基礎庫不重合，而是補充. 主要提供了一些（aop，promise，oop，lifecycle）編程方式的輔助和一些數據的管理控制，提倡以鬆耦合，注入，插件式開發。目前版本基於Jquery，後續會提供獨立版本。

 

Smart系列是指的基於Smartjs而實現的前端產品，有mvvm框架，web ide等等

 

Smart規劃

---

 

 smart 思想

搭架子，封裝一些特有的東西。引入有用的第三方庫。

全部系列都是一套體系。但同時每塊也都保持獨立。每塊也都是模塊化的。

aop，promise，oop始終貫穿。

模型驅動，從建模 - ui - service - db

 　　（…………還有些高大上的詞不記得了，就不咧了）

Smart 核心庫

　　就是目前發佈的smartjs的內容。完成了aop，oop，dataManager的第一版；util則是部分；

• util ：工具庫，經常使用工具

 

• aop ： aop編程支持庫

 

• oop ： oop編程支持庫

 

• dataManager ： 基於策略的數據管理對象；簡單來講就是管理數據衝那裏來，到哪裏去；如何來，怎麼去；

 

• dataManager-object ：object結構的數據管理

 

• dataManager-table ：table結果的數據管理

 

• dataManager-tree ：tree結構的數據管理

 

• exception ： 異常處理

 

• dataUtil ：數據工具庫，數據的轉換和格式化

 

• validator ：驗證器

 

• i18n : 國際化

 

smart-mvvm

　　基於模型驅動的mvvm引擎。之前是mvc如今實現爲mvvm；

 

smart - ui

　　ui庫的封裝策略是創建一個widget工廠，使用feature應用公共特性，使用plugin作擴展。由於ui的控件會比較多，前面都會以引入一些第三方的控件爲主，而後統一出入口。

• widget-factory : widget工廠，管理widget的註冊，初始化，feature的應用，plugin的擴展

 

• widget-plugin : 插件管理器；smartui內置widget開發的都是以插件形式開發；

 

• ui-feature : ui特性，封裝一些ui共有的特性；widget和dom元素均可以應用這些特性；

 

• ui-compileEngine : ui的編譯引擎；定義規則掃描dom，作自動初始化（widget）

 

• layoutBuilder : 佈局生成器

 

• uiUtil : ui的工具庫

 

smart - assist

　　輔助開發的工具庫，定位錯誤，日誌注入，調試管理等；

• logger ： 使用aop的方式，將各個模塊的日誌進行注入；在編碼過程當中，必不可少的會產生大量的日誌信息，而發佈後，用戶是不須要這些信息的，所以既增長了js的大小，絕大多數又沒有用處；那麼smartjs的作法是將正常庫中的一部分日誌提取出來（並非全部的日誌，不是全部的位置均可以注入），單獨定義一個爲改模塊服務的日誌js，當須要查看日誌的時候，在加載日誌js，注入日誌；同時logger能夠經過模塊，日誌類型來控制輸出；

 

• debugger ： 調試管理；各位攻城師有沒有碰到過，有時想調試的時候，跟蹤起來很費勁，尤爲是第三方，並且是壓縮以後的js，是否是有種飛的感受。debugger也是跟logger相似的策略，使用直接和注入的方式進行預設斷點。在開啓模塊的debug模式後，進入調試。

 

• assist-panel：在頁面上面提供浮動的panel來設置debugger和和查看logger。上面logger和debugger只有使用了assist-panel才使用纔會更加方便。另外還會針對其餘模塊提供一些通用接口來註冊到panel上面使用，好比：結合mvvm會有模型和視圖的一些信息查詢和控制；datamanager的數據信息和流向等等。

 

smart-desinger

　　一個Web IDE;

• modal-desinger ：模型設計器；

 

• ui-desinger ：web ide的基礎引擎，提供經過拖拽，配置來生成頁面；

 

• behaivor-desinger：行爲編輯器，經過拖拽來配置行爲和動做，也能夠當作是圖形化的code編輯器。

 

• theme-designer : 主題設計器

 

smartAS

　　這個不屬於smartjs的內容，是我一個同事（陳大師）力做。一個後臺的開源項目。是經過前端圖像配置來生成服務的引擎。到時會與smart的designer結合，提供完成的設計器功能。

 

——————————————————————————————————————————————————————————————————————————————————————————

　　就介紹到這，還有一些細節和其餘的模塊不是特別重要就沒列在裏面。一不當心又畫了個又圓又大的餅，不知道很年何月才能得償所望。如今白天基本抽不出時間來弄，所有都是業餘時間。按這個節奏是計劃是在十一以前把smartjs核心庫完成和第一版smart-mvvm。

 

　　另外文章的排版很爛，沒時間詳細整理，請各位見諒。