日期:2014-05-16  浏览次数:20378 次

【分享】[FDUI] 一个基于面向对象设计的JS控件库
本帖最后由 thc1987 于 2012-11-23 14:23:43 编辑
·什么是FDUI?
    FDUI,是一个javascript控件库,采用面向对象设计方式编写。FD是Freedom的缩写。
该控件库包含了常用的form控件,日历,Tips,Tab,window,验证,还有一些基本的工具类。

·为什么要写这个控件库?
    原因有很多,最重要的一个原因是因为自己写JS也有些年头了,手头始终拿不出一件像样的东西。
这次是下了狠心要写个东西出来,算是对自己这些年学习JS的一个交代吧。

·为什么要采用面向对象?
    JS可以利用各种手段来模仿面向对象,总的来说是7分像了。面向对象的好处有一点可以提高代码的重用性。
比如一些控件的功能都是一样的,TextBox和TextArea都有赋值、取值的操作,这样就可以把这些操作封装在一个父类中,
让它们来共同调用。
    关于这点我在写代码的过程中深有体会,有些控件只需要5分钟就可以搞定。一天可以写2-3个控件。因为大部分功能都
封装在父类里面了。
    功能的模块化:每一个类实现自己特有的功能,这样在以后修改功能的时候直接找到这个类就可以。不用东改一点西改一点了。
    除此之外,还用到了一些设计模式。FDGrid我就采用了MVC的设计模式,还有装饰器模式。

PS:为什么要面向对象?其实我一个Java程序员我会乱说?

·不足之处
    1. 不支持IE6(为什么要支持?)
    2. 样式有点单调,因为没有用到图片
    3. 有些功能还没有实现或者还不够完善
    4. 没有做过很好的性能测试,不过一般的CRUD操作是没问题的

·持续改进
    以后有时间的话会把Tree控件做起来,然后完善Grid的一些功能(列隐藏,本地数据排序等...)


---------------------------------------
界面效果图:


文档效果图:


总体架构图:




面向对象这玩意是在是太强大了,不到10行代码就完成了一个TextBox控件呢 
不信看代码:
var FDTextBox = function(options) {
FDTextBox.superclass.constructor.call(this,options);
this.options = FDLib.util.apply(this.getOptions(),options);
}
// 继承FDFieldComponent类
// 其实主要功能都封装在父类当中了
FDLib.extend(FDTextBox,FDFieldComponent);

FDTextBox.prototype.getControlHtml = function() {
return '<input type="text" name="'+this.options.name+'" />';
}


继承方式我采用了雅虎YUI的继承体系,觉得这个跟传统的继承比较相像.

------------------------------------------
这个东东目前还不能投入生产环境中
因为还不是很成熟哦
主要的目的还是和大家一起分享,学习.

可以肯定的说代码里面有大家用的到的地方,比如一些工具类.希望可以帮助到更多的人.

基本上每个方法我都写了注释,而且写得很全,因为我的文档就是很据这些注释生成的.

最后,祝大家周末愉快~



下载地址:
点我下载(含:源码,demo,文档)

------解决方案--------------------
最近少写JS了;原创支持一下,不错,写个东西可以把自己的能力展现出来,同时可以检查,总结自己过去技术问题,很好,谢谢分享。
------解决方案--------------------
呵呵。。。。支持下,兼容下IE6还是不错的,毕竟在CN。。。
------解决方案--------------------

------解决方案--------------------
好强大的 太好了 不错啊啊啊
------解决方案--------------------
   准备学习JavaScript.
------解决方案--------------------

------解决方案---