jQuery以其良好的api设计在前端开发中造成了极大的影响力，他们的“write less do more”这个宗旨得到了充分的体现，但是他的UI库又是一个怎么样的体系结构呢，他们的UI库的api设计的怎么样呢？
我还是通过一段伪代码，来演示下如何来写一个jQuery UI组件：
(function($) {
//私有变量和方法
这里是代码
$.widget("ui.dialog", {//组件名称
//共有方法和属性，定义在prototype上
options: {//配置属性
},
_create: function() {
//dom操作
//绑定事件
},
//执行默认的动作
_init: function() {
if ( this.options.autoOpen ) {
this.open();
}
},
//销毁组件
destroy: function() {
},
//返回生成组件的dom元素
widget: function() {
return this.uiDialog;
},
//设置和获取配置项
option: function(key, value){
$.Widget.prototype._setOption.apply(self, arguments);
}
}
});
$.extend($.ui.dialog, {
//类属性和方法
});
}(jQuery));
如果用到继承
$.widget($.ui.Simpledialog, $.ui.dialog ,{
//共有属性和方法在这里定义
})
这里我们可以看到只要调用$.widget(String name, Options prototype).，就可以生成一个jQuery UI的组件，那么这个方法帮我们做了什么工作呢？
1. 如果仅仅生成一个独立的组件，我们直接调用$.widget(String name, Options prototype)，其中第一个方法就是组件的名称，第一个参数就是组件的一些共有属性和方法。
2. 如果需要用到继承，我们就用$.widget(String name, String baseName,Options prototype),这个的第二个参数就是基类的名称了。
3. $.widget向我们提供了create方法来生成dom和绑定事件，_init方法来执行一些默认的动作，_setOption来设置一个配置属性项，widget用来获取生成组件的外层dom元素，destroy用来销毁组件，option()用来获取和设置配置项，我们可以再自己写的组件中覆盖这些方法。
使用dialog控件:
$('#dialog').dialog({
autoOpen: false,
show: 'blind',
hide: 'explode'
});
初始化后设置配置项：
$( ".selector" ).dialog( "option", "autoOpen", false );
获取配置项：
$( ".selector" ).dialog( { autoOpen: false } );
初始化后绑定事件：
$( ".selector" ).bind( "dialogopen", function(event, ui) {});
初始化后调用方法：
$( ".selector" ).dialog( "open" )
Ok，现在为止我们已经会开发和使用用jQuery UI1.8开发的dialog,我们来总结下jQueryUI1.8库的一些特点：
1. 在API的使用上仍然秉承了jQuery核心库的特点，获取和设置属性使用同一个方法。
2. 在$.widget没有为控件绑定事件的接口，必须自己手工在create中进行绑定。
3. jqueryUI有着强大的自定制组件的功能，我们很方便你的自定义的自己的样式的组件，具体请看（http://jqueryui.com/themeroller/）
虽然JQueryUI1.8有很优秀的地方，但是由于它的组件都是第三方贡献的，代码的可维护性较差，也没有代码的管理结构，性能方面也比较牵强，因此组织大型的RIA应用的时候，如果您不是一个JavaScript ninja,您还是不要使用这个ui框架了，总之它的ui库还是比较年轻。但是可以使用jQuery核心库，核心库还是很风光的，欢迎大家看这边文章http://news.csdn.net/a/20100327/217617.html。