jquery ui 源码分析

jquery ui 是jquery 官方维护的一个开源库

jquery ui都是继承自jquery.ui.widget.js这个文件的。这个文件提供了一个工厂方法来创建widget对象。其方法是$.widget(String name, Options prototype).下面简单介绍下这个类提供的方法和属性。在创建widget的时候将重写这些。

_create() 这个方法就是创建widget的方法，在页面调用widget的时候，就会执行此方法，来构建widget。Widget的绝大大多数行为和结构都是在这里创建的。这个方法只会创建一次。

  _init() 这个方法大多数时候不会被重写，这个方法在构建widget的时候在_create后执行。如写有此方法，每次运行都会执行此方法。

   destroy()：将widget实例从dom对象上移除，在开发widget的时候一般此方法是必须的。就是移除你自己在dom element上添加的样式和行为以及dom结构

   options：在这里面保存的是widget的配置信息，在创建widget的时候需要设置一些配置参数。

   element：就是widget作用的dom对象。

   enable()和disable()这两个方法就是禁用和启用widget的。其实是修改options.disabled。

   下面以创建一个简单的对象为例：

 

 

 (function ($, window, undefined) {
            $.widget("ui.test", {
                options: {
                    width: 400
                },
                _create: function () {
                    alert("第一次运行创建对象")
                },
                _init: function () {
                    alert("每次运行实例化对象")
                },
                getWidth: function () {
                    return this.options.width;
                }, 
                _getWidth: function () {
                    return this.options.width;//私有方法
                },
                destroy: function () {
                    alert("对象从dom 中删除前")
                }
            });
        })(jQuery, window, undefined)

  其中ui.test  中 ui为命名空间， test为对象名  如果页面有元素<div  id="test"/>

  运行$("#test").test() 这时候会执行 

 alert("第一次运行创建对象")

 alert("每次运行实例化对象")

实例化一次就可以运行里面的方法$("#test").test("getWidth") 当方法有参数时可以用 $("#test").test("getWidth",参数1,参数2)
其中 options 中的值不给将取默认值 如本例中的400 可以在第一次运行的时候给定 如$("#test").test({width:500}),当初始化没有设置参数就可以用
$("#test").test("option","width",500) 改变其参数值。
 以_开头的是私有方法，外部不能调用如本例中运行$("#test").test("_getWidth") 将会出错。

  如运行$("#test").remove() 将执执行 alert("对象从dom 中删除前")