JQuery-UI分析（1）

   想拿jquery官方的UI和JQuery easyui做个对比，就翻了翻它的源码。看的浮浅，先写一些。

  JQuery UI的组件似乎不是声明式产生的，要使用一个widget，需要用JS代码生成。比如：

$( "input[type=submit], a, button" ).button()；

这句JS是把选择到的标签，包装成jquery对象，调用button()方法--很像一个构造函数哦，把他们生成button。

而Jquery-easyUI 也支持调用构造函数，还支持声明式的， 是这样：

<p class="easyui-panel"></p>

 

 我找到jquery.ui.button.js。搜索button()这个构造函数，没有发现，抓狂了。。

 

 通过阅读Demo，分析代码，终于管中窥豹。。终于搞明白了widget怎么构造的。

 

 Jquery UI  核心文件：jquery.ui.core.js 和jquery.ui.widget.js，其他文件就是每一个widget了。

 我用button做实验，单步调试js。写上必要的JS文件

<script src="jquery-1.8.2.js"></script>
<script src= "jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.button.js"></script>

浏览器加载jquery.ui.button.js时，执行了一段：$.widget（"ui.button", {button对象必要的属性和方法};

代码跳到jquery.ui.widget.js 中执行$.widget()方法.

这个方法的最后一句：$.widget.bridge( name, constructor );

而bridge方法中

$.widget.bridge = function( name, object ) {
    var fullName = object.prototype.widgetFullName;
    $.fn[ name ] = function( options ) {
        var isMethodCall = typeof options === "string",
            args = slice.call( arguments, 1 ),
            returnValue = this;
//....

这个name参数就是"button",于是乎，$.fn[name]就是$.fn["button"]喽，

于是乎$("#xxx").button()  就等于$("#xxx")["button"]() 喽。。。。

ok，好吧，就是这么构造的。。。