jQueryUI widget原理

_createWidget :  function( options, element ) {
        element  = $( element  ||  this.defaultElement  ||  this )[  0 ];
         this.element  = $( element );
         this.uuid  = uuid ++;
         this.eventNamespace  =  "."  +  this.widgetName  +  this.uuid;
        ......
         this._create();
         this._trigger(  "create", null,  this._getCreateEventData() );
         this._init();
},

destroy: function() {

this._destroy();

}

编写jquery ui widget时默认需要实现_create,_init,_destroy等方法，以'_'开头的方法是组件的私有方法，其他的为公共方法

示例：

( function ($, undefined) {
  $.widget( "spy.fuck", {
    options : {},
 
     /***
     * 创建元素时使用
     * @private
     */
    _create :  function () {
      console.log( '_create');
      console.log( this);
      console.log( this.element);  //jQuery对象
 
       this.element.css( 'background',  'red');
    },
 
     /**
     * 初始化
     * @private
     */
    _init :  function () {
      console.log( '_init');
 
    },
 
     /**
     * 销毁
     * @private
     */
    _destroy :  function () {
 
      console.log( '_destroy');
       this.element.css( 'background',  'blue');
    },
 
    say :  function () {
      console.log( 'say method');
      alert( 'fuck');
    }
  })
 
})(jQuery);

HTML

<! DOCTYPE  html>
< html>
< head>
  < meta http-equiv= "content-type"  content= "text/html;charset=UTF-8"/>
  < title>jQuery UI 插件原理</ title>
</ head>
< body>

< div  id= "fuck"  style= "height: 30px"></ div>

< script  type= "text/javascript"  src= "../../jquery-1.10.2.js"></ script>
< script  type= "text/javascript"  src= "../../ui/jquery.ui.core.js"></ script>
< script  type= "text/javascript"  src= "../../ui/jquery.ui.widget.js"></ script>

< script  type= "text/javascript"  src= "index.js"></ script>
< script  type= "text/javascript">

  $('#fuck').fuck();

</ script>
</ body>
</ html>