發布了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。
另外文章的排版很爛,沒時間詳細整理,請各位見諒。
