• JQueryUI分析(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,好吧,就是这么构造的。。。

  • 相关阅读:
    InnoDB和MyISAM区别总结
    jquery判断checkbox是否被选中
    手机网站重构经验分享(S60V3篇)
    域名A记录、MX记录、CNAME、TTL
    ubuntu apache2配置详解(含虚拟主机配置方法)
    IP分片攻击
    Linux+Apache+Mysql+PHP典型配置
    apache配置优化测试
    PHP 正则表达式资料
    人人网UGC技术广播站
  • 原文地址:https://www.cnblogs.com/xinchuang/p/2736299.html
Copyright © 2020-2023  润新知