想拿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,好吧,就是这么构造的。。。