TinyAdmin前端展现框架

jopen 9年前

一直在苦苦寻找一个合适的前端框架，少说也看了几十个。

ext太重，而且有内存泄露，在IE下就是个悲剧。
dhtmlx，速度比较好，开源是GPL不适合企业应用，商业的要钱，倒也不贵万把块钱，但是样式比较接近于传统管理台应用，另外一个弊端是比较小众
Dojo，其实架构比较好，但是比较小众
Semantic：非常好的一个框架，但是成熟度不太好，对IE支持尤其比较差，另外比较小众
easyui：相对来说，也是一个不错的框架了，但是样式有点接近ext，也存在内存泄露
wijmo：非常完善的前端框架，但是比较小众，对IE8兼容方面有些问题
kendoui：也是非常不错的前端框架，比较小众，后台应用开发包要收费
jqueryui：非常不错的前端框架，应用面够广，但是组件相对少一些
JQuery：本身只是个基础库，当然有许多的插件，但是不同插件之间的样式啥的不太一致，自己去整合费效比较差
Bootstrap，不错的框架，组件相当来说少一点
......还有许多知名不知名的前端框架，但是比较可用的，真的很难找

其实我的要求也不是太高，只要满足下面的就差不多了：

组件丰富些，自己不添加也足够用
兼容性好一点，最好IE8以上都能兼容的
修改容易点，我想要就要，不想要就不要
扩展方便点，我想增加就能增加，我想修改就能修改
性能能好点，即使在老旧如IE8，操作系统为XP的环境也，可以跑出不错的速度来。
内存回收能回一点，内存出现泄露，也可以但是可以简单一个刷新就比较彻底的回收掉，也是可以接受的。
界面好看点，让人最好能眼前一亮，再看，更亮的效果。
最好是免费的，如果不免费，费用要尽量低的，最好3、5$可以搞定，再不行几十$也可以接受
最好能支持更换皮肤啥的
最好能支持窗口小组件，可以由客户进行位置调整啥的
最好支持流式布局

也看了许多基于bootstrap做出来的，说实际的有一些还是不错的，但是总觉得有这样那样的遗憾或不足，直到有一天看到smartadmin，哇，眼睛一亮，这不就是我想要的么？赶紧去看，越看越喜欢，就是它了。
仔细研究下来，发现他与我要求的匹配度比较接近，但是还是有一些不足在的：

JS及CSS文件众多，稍有不慎就会出现错误，从而导致无法展示
对于IE8兼容性不太好，在IE8下无法使用
对皮肤啥的修改过之后，不能保存，下次进来的时候，还要重新设过
全是E文的，用起来上手慢一点

呵呵，想要一个100%满足要求的太难了，这个已经满足95%以上了，有不满足的自己动手丰衣足食吧。

对于问题1：进行组件化，对这些CSS,JS文件进行分别治理，这个工作量非常大，而且要胆大心细，这里消耗N多脑细胞，终于搞定了。
对于问题2：主要是CSS及JS兼容性相关的问题，这个已经超出本人能力范围，没得办法，找一外援搞定之。
对于问题3：这个相对于上面两个问题SoEasy，轻松搞定了。2014/11/1 发表博文 - 悠悠然然的个人页面 - 开源中国社区
对于问题4：汉化之，更方便国人使用

在对其进行重构及完善过程中，还修复了一些BUG。

现在使用起来就方便多了，不必引入js和css及图像文件，字体文件等等，直接进行Pom依赖即可，结合到Tiny框架中，还提供了更容易使用的宏，提供了样式文件合并压缩，JS文件压缩合并，做前端的小朋友们的好日子来了。

1.UI组件包抽取

org.tinygroup.calendar  org.tinygroup.jquery  org.tinygroup.bootstrap  org.tinygroup.bootstrapWizard  org.tinygroup.ckeditor  org.tinygroup.colorhelpers  org.tinygroup.colorpicker  org.tinygroup.component  org.tinygroup.datatables  org.tinygroup.delete-table-row  org.tinygroup.dropzone  org.tinygroup.easyPieChart  org.tinygroup.excanvas  org.tinygroup.fastclick  org.tinygroup.flot  org.tinygroup.FontAwesome  org.tinygroup.fueluxwizard  org.tinygroup.fullcalendar  org.tinygroup.ie-placeholder  org.tinygroup.ion-slider  org.tinygroup.jquery-form  org.tinygroup.jquery-nestable  org.tinygroup.jquery-touch  org.tinygroup.jstorage  org.tinygroup.js-migrate  org.tinygroup.knob  org.tinygroup.markdown  org.tinygroup.maskedInput  org.tinygroup.maxlength  org.tinygroup.morris  org.tinygroup.msieFix  org.tinygroup.multiselect  org.tinygroup.notification  org.tinygroup.noUiSlider  org.tinygroup.pace  org.tinygroup.prettify  org.tinygroup.raphael  org.tinygroup.select2  org.tinygroup.selectToUISlider  org.tinygroup.smartadmin-new  org.tinygroup.smartwidgets  org.tinygroup.sparkline  org.tinygroup.summernote  org.tinygroup.superbox  org.tinygroup.throttle-denounce  org.tinygroup.typeahead  org.tinygroup.vectormap  org.tinygroup.x-editable  org.tinygroup.jqueryvalidate  org.tinygroup.smartadmin  org.tinygroup.jqgrid  org.tinygroup.jqueryform  org.tinygroup.jquerystorage

SmartAdmin用到的Jquery插件真多。

2.UI组件宏封装

#macro(jui_hrefButton $id $caption $construct)   <a id="$id" href="#">$caption</a>  <script>  $(function() {      $( "#$id").button($!construct);  });  </script>  #end    #macro(jui_radio $id $groupId $caption)  <input type="radio" id="$id" name="$groupId" /><label for="$id">$caption</label>  #end

通过封装类似上面的宏，对于界面的编写就更容易了，要会的内容就更少了。

3.界面编写

#@juiTab("tabs")   #@juiTabHeader()   #@juiTabHeaderItem("tabs-a")标签1#end   #@juiTabHeaderItem("tabs-b")标签2#end   #@juiTabHeaderItem("tabs-c")标签3#end   #end      #@juiTabContentItem("tabs-a")   <p>此前，李克强和梅德韦杰夫共同主持了中俄总理第十九次定期会晤。会晤后，两国总理签署联合公报，并见证经贸、投资、能源、金融等领域近40项重要文件的签署。</p>   #end      #@juiTabContentItem("tabs-b")   <p>李克强是在和俄罗斯总理梅德韦杰夫共同会见记者时提到“套娃”的。这是一种俄罗斯特产的木制玩具，由多个一样图案的空心木娃娃一个套一个组成，最多可达十多个。</p>   #end      #@juiTabContentItem("tabs-c")   <p>中国总理回忆起在农村生活的经历。“我年轻时在中国农村生活多年，亲身经历过吃不饱饭的艰难岁月。”李克强说，吃一顿饱饭可能很快就会忘记，但饥饿留下的印象永生难忘。</p>   #end  #end

现在可以通过模板语言来写界面了，哦也

写出来的效果是怎么样的呢？