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

  • 相关阅读:
    Java中的线程安全问题
    谈谈你对Spring的理解
    Word 2016问题导致无法创建其他博客账号
    JS中 Cookie、 LocalStorage 与 SessionStorage
    CSDN代码块显示颜色
    Java中创建线程的两种方式
    毕业设计每日博客——第五周1
    毕业设计每日博客--第四周5
    毕业设计每日博客--第四周4
    毕业设计每日博客--第四周3
  • 原文地址:https://www.cnblogs.com/xinchuang/p/2736299.html
Copyright © 2020-2023  润新知