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。

 

　　另外文章的排版很烂，没时间详细整理，请各位见谅。