【分享】[FDUI] 一个基于面向对象设计的JS控件库

猿敲月下码 2012-11-23 02:22:03

加精

·什么是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,文档)

...全文