jquery扩展以及jquery ui插件开发

1. 在jquery命名空间添加全局函数，与普通类添加全局函数一样，定义一个立即调用函数表达式，接受jQuery作为参数并将参数命名为$保证在jQuery.noConflict()调用的情况下也能在内部使用$

   (function ($) {
     $.sum = function (array)
     {
       var total = 0;
       $.each(array, function (index, value) {
         value = parseFloat(value) || 0;
         total += value;
       });
       return total;
     }; // end sum()
     
     $.average = function (array)
     {
       if ($.siArray(array))
       {
         return $.sum(array) / array.length;
       } // end if
       return "";
     }; // end average()
   }(jQuery));
   
   var data = [3, 4, 3, 4, 3, 4, 3, 4];
   console.log("sum: " + $.sum(data)); // 28
   console.log("avreage: " + $.average(data)); // 3.5

    

2. 为jQuery对象添加方法，与普通类添加对象方法一样，
   1. 普通类通过默认为prototype添加方法，jQuery的prototype起了个简单的名字：fn，
   2. 函数调用上下文this为当前调用该方法的jQuery对象，
   3. 为适当方法返回this可支持链式调用
   4. 方法采用对象式传递更加方便
   5. 为方法设置可配置默认参数
   6. 下面是一个例子，用来说明基本思路，功能实现方法不推荐用于实际开发

      (function ($) {
        $.fn.shadow = function (opts)
        {
          var options = $.extend({}, $.fn.shadow.defaults, opts);
          return this.each(function () {
            var $originalelement = $(this);
            for (var i = 0; i < options.copies; ++i)
            {
              var offset = options.copyOffset(i);
              $originalElement.clone()
                .css({
                  position: "absolute",
                  left: $originalElement.offset().left + offset.x,
                  top: $originalElement.offset().top + offset.y,
                  margin: 0,
                  zIndex: -1,
                  opacity: options.opacity
                }).appendTo("body");
            } // end for
          }); // end each()
        }; // end shadow()
        
        // define comfigurable defaults for shadow
        $.fn.shadow.defaults = {
          copies: 5,
          opacity: 0.1,
          copyOffset: function (index)
          {
            return {x: index, y: index};
          } // end copyOffset()
        }; // end defaults
      }(jQuery));
      
      
      // test case
      $.fn.shadow.defaults.copies = 10;
      $("h1").shadow({
        copyOffset: function (index)
        {
          return {x: -index, y: index};
        } // end copyOffset()
      });

       

3. jquery ui插件开发比扩展jquery稍微复杂，但是jQuery UI包含了一个控件工厂$.widget()帮我们做了很多工作，通过这个工厂方法可以保证我们的代码遵守API标准，也就方便用户使用
   1. 插件具有stateful特性，这样可以通过检查状态，修改状态完成各种需求
   2. 用户选项和可配置默认选项自动归并
   3. 多个插件方法可以通过传递字符串为方法调用简单jQuery方法实现无缝连接，
   4. 自定义事件监控可以访问控件实例的数据
4. jQuery UI插件通过调用$.widget()创建。这个函数接受两个参数
   1. 第一个是一个字符串，这是一个包含了命名空间的插件名如"ljq.tooltip"这样我们的插件就可以通过在jQuery对象上调用.tooltip()来安装了
   2. 第二个参数是一个对象，其属性包含一些widget()预定义属性，根据约定完成空间初始化、销毁等
5. 为第二个参数设置_create，这是在插件初始化时控件工厂自动调用的函数：

   (function ($) {
     $.widget("ljq.tooltip", {
       _create: function ()
       {
         this._tooltipDiv = $("<div></div>")
           .addClass("ljq-tooltip-text ui-widget "
             + "ui-state-highlight ui-corner-all")
           .hide().appendTo("body");
         this.element.addClass("ljq-tooltip-trigger")
           .on("mouseenter.ljq-tooltip", $.proxy(this._open, this))
           .on("mouseleave.ljq-tooltip", $.proxy(this._close, this));
       }, // end _create()
       _open: function ()
       {
         var elementOffset = this.element.offset();
         this._tooltipDiv.css({
           position: "absolute",
           left: elementOffset.left,
           top: elementOffset.top + this.element.height()
         }).text(this.element.data("tooltip-text"));
         this._tooltipDiv.show();
       }, // end _open()
       _close: function ()
       {
         this._tooltipDiv.hide();
       } // end _close()
     }); // end widget.toolip()
   }(jQuery));

    

   1. 其中_create()调用上下文this为当前创建的控件实例，可以给它添加所需的属性，例如：this._tooltipDiv
   2. 控件实例包含一些有用的属性： this.element是创建空间的jQuery对象
   3. 通过为this.element绑定mouseenter和mouseleave事件监听器，控制tooltip的出现
6. 销毁控件，上面的方法创建了一个jQuery新方法，在jQuery对象上调用即可创建tooltip，如$("a").tooltip()，同样也可以通过传入一个字符串作为参数，用于指定需要调用的方法，其中内建的destroy方法会将控件取消，.tooltip("destroy")可以调用，控件工厂可以帮我们做大多数工作，但是如果我们像tooltip一样创建的新的dom节点，我们必须自定义方法来完成清理

   (function ($) {
     $.widget("ljq.tooltip", {
       _create: function ()
       {
         this._tooltipDiv = $("<div></div>")
           .addClass("ljq-tooltip-text ui-widget "
             + "ui-state-highlight ui-corner-all")
           .hide().appendTo("body");
         this.element.addClass("ljq-tooltip-trigger")
           .on("mouseenter.ljq-tooltip", $.proxy(this._open, this))
           .on("mouseleave.ljq-tooltip", $.proxy(this._close, this));
       }, // end _create()
       destroy: function ()
       {
         this._tooltipDiv.remove();
         this.element.removeClass("ljq-tooltip-trigger")
           .off(".ljq-tooltip");
         $.Widget.prototype.destroy.apply(this, arguments);
       }, // end destroy()
       _open: function ()
       {
         var elementOffset = this.element.offset();
         this._tooltipDiv.css({
           position: "absolute",
           left: elementOffset.left,
           top: elementOffset.top + this.element.height()
         }).text(this.element.data("tooltip-text"));
         this._tooltipDiv.show();
       }, // end _open()
       _close: function ()
       {
         this._tooltipDiv.hide();
       } // end _close()
     }); // end widget.toolip()
   }(jQuery));

    

7. 使用和禁用控件：控件内建了enable和disable方法，这样就可以设置this.options.disabled在true和false之间切换，我们只需要在方法之间检查这个值即可，例如在_open中检测

       _open: function ()
       {
         if (this.options.disabled)
         {
           return;
         } // end if
         var elementOffset = this.element.offset();
         this._tooltipDiv.css({
           position: "absolute",
           left: elementOffset.left,
           top: elementOffset.top + this.element.height()
         }).text(this.element.data("tooltip-text"));
         this._tooltipDiv.show();
       }, // end _open()

   调用.tooltip("disable"); tooltip("enable");可以达到控制this.options.disabled的目的

8. 控件接受参数：为控件添加options属性并配置所需的默认参数，控件工厂会判断用户调用控件时传递的参数并覆盖默认参数：

   (function ($) {
     $.widget("ljq.tooltip", {
       options: {
         offsetX: 10,
         offsetY: 10,
         content: function () {
           return $(this).data("tooltip-text") + " default option";
         }
       },
       _create: function ()
       {
         this._tooltipDiv = $("<div></div>")
           .addClass("ljq-tooltip-text ui-widget "
             + "ui-state-highlight ui-corner-all")
           .hide().appendTo("body");
         this.element.addClass("ljq-tooltip-trigger")
           .on("mouseenter.ljq-tooltip", $.proxy(this._open, this))
           .on("mouseleave.ljq-tooltip", $.proxy(this._close, this));
       }, // end _create()
       destroy: function ()
       {
         this._tooltipDiv.remove();
         this.element.removeClass("ljq-tooltip-trigger")
           .off(".ljq-tooltip");
         $.Widget.prototype.destroy.apply(this, arguments);
       }, // end destroy()
       _open: function ()
       {
         if (this.options.disabled)
         {
           return;
         } // end if
         var elementOffset = this.element.offset();
         this._tooltipDiv.css({
           position: "absolute",
           left: elementOffset.left + this.options.offsetX,
           top: elementOffset.top + this.element.height() + this.options.offsetY
         }).text(this.options.content.call(this.element[0]));
         this._tooltipDiv.show();
       }, // end _open()
       _close: function ()
       {
         this._tooltipDiv.hide();
       } // end _close()
     }); // end widget.toolip()
   }(jQuery));

   调用控件时.tooltip({offsetX: 0, offsetY: 1});会自动覆盖默认参数

9. 自定义子方法，系统提供了默认的如destroy子方法。我们可以提供自定义子方法供用户调用，控件工厂会保证我们的方法支持链式调用

       open: function ()
       {
         this._open();
       }, // end open()
       close: function ()
       {
         this._close();
       }, // end close()

   .tooltip("close");  tooltip("open");即可调用，自定义子方法可接受参数，通过控件调用子方法的字符串后传入参数如：

   close: function (msg)
   {
     console.log(msg);  
   }
   
   $("a").tooltip();
   $("a").tooltip("close", "this is argument");

    

10. 触发控件事件：在控件函数中调用this._trigger("eventname");会在添加了该控件的元素上触发一个自定义事件，事件名带有控件名作为前缀如this._trigger("open");会在元素上触发tooltipopen，这样就可以在元素上添加监听器了

        _open: function ()
        {
          if (this.options.disabled)
          {
            return;
          } // end if
          var elementOffset = this.element.offset();
          this._tooltipDiv.css({
            position: "absolute",
            left: elementOffset.left + this.options.offsetX,
            top: elementOffset.top + this.element.height() + this.options.offsetY
          }).text(this.options.content.call(this.element[0]));
          this._tooltipDiv.show();
          this._trigger("open");
        }, // end _open()
        _close: function ()
        {
          this._tooltipDiv.hide();
          this._trigger("close");
        } // end _close()

     

11. 了解了为jQuery和jQuery UI添加扩展的常见内容，可以总结如下：
    1. 通过使用立即调用函数表达式保证$在自定义模块内不会失效
    2. 无论扩展$全局函数或者jQuery对象方法，最多在$定义一个属性。多余的公共方法和属性应该添加到控件名字空间($.myPlugin.publicMethod或者$.fn.myPlugin.pluginProperty)
    3. 为控件提供一个默认选项设置：$.fn.myPlugin.defaults = { size: "large"};
    4. 允许控件用户覆盖默认设置：$.fn.myPlugin.defaults.size = "medium"; $("div").myPlugin({size: "small"})
    5. 扩展jQuery对象原型时，返回this提供链式调用： $("div").myPlugin().find("p").addClass("foo")
    6. 扩展jQuery原型时，内部需要调用this.each()确保内部调用
    7. 适当提供回调函数增加控件灵活性
    8. jQuery UI控件通过控件工厂定义并且执行操作时检查控件状态
    9. 为控件提供自动单元测试，如使用QUnit框架
    10. 使用版本控制工具，如Git，把代码放到GitHub允许其他人对代码贡献
    11. 给控件选择一个合适的license
    12. 给控件提供完善的文档
13. 完整代码

    <!doctype html>
    <html lang="zh">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        
        <title>Template Index</title>
      <style>
      </style>
    
        
    </head>
    <body>
      <table id="inventory">
        <thead>
          <tr class="one">
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
          </tr>
        </thead>
        <tfoot>
          <tr class="two" id="sum">
            <td>Total</td>
            <td></td>
            <td></td>
          </tr>
          <tr id="average">
            <td>Average</td>
            <td></td>
            <td></td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td><a href="span.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>
            <td>4</td>
            <td>2.50</td>
          </tr>
          <tr>
            <td><a href="egg.html" data-tooltip-text="Fram fresh or scrambled!">Egg</a></td>
            <td>12</td>
            <td>4.32</td>
          </tr>
          <tr>
            <td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermans's recipe">Gourmet Span</a></td>
            <td>14</td>
            <td>7.89</td>
          </tr>
        </tbody>
      </table>
    
        <script src="js/jquery.js"></script>
      <script src="js/jquery-ui-core.js"></script>
      <script>
      (function ($)
      {
        $.sum = function (array)
        {
          var total = 0;
          $.each(array,
            function (index, value)
            {
              value = $.trim(value);
              value = parseFloat(value) || 0;
              total += value;
            } // end function
          );
          return total;
        }; // end sum()
        
        $.average = function (array)
        {
          if ($.isArray(array))
          {
            return $.sum(array) / array.length;
          } // end if
          return "";
        }; // end average()
        
      }(jQuery));
      
    (function ($) {
      $.widget("ljq.tooltip", {
        options: {
          offsetX: 10,
          offsetY: 10,
          content: function () {
            return $(this).data("tooltip-text") + " default option";
          }
        },
        _create: function ()
        {
          this._tooltipDiv = $("<div></div>")
            .addClass("ljq-tooltip-text ui-widget "
              + "ui-state-highlight ui-corner-all")
            .hide().appendTo("body");
          this.element.addClass("ljq-tooltip-trigger")
            .on("mouseenter.ljq-tooltip", $.proxy(this._open, this))
            .on("mouseleave.ljq-tooltip", $.proxy(this._close, this));
        }, // end _create()
        destroy: function ()
        {
          this._tooltipDiv.remove();
          this.element.removeClass("ljq-tooltip-trigger")
            .off(".ljq-tooltip");
          $.Widget.prototype.destroy.apply(this, arguments);
        }, // end destroy()
        open: function ()
        {
          this._open();
        }, // end open()
        close: function ()
        {
          this._close();
        }, // end close()
        _open: function ()
        {
          if (this.options.disabled)
          {
            return;
          } // end if
          var elementOffset = this.element.offset();
          this._tooltipDiv.css({
            position: "absolute",
            left: elementOffset.left + this.options.offsetX,
            top: elementOffset.top + this.element.height() + this.options.offsetY
          }).text(this.options.content.call(this.element[0]));
          this._tooltipDiv.show();
          this._trigger("open");
        }, // end _open()
        _close: function ()
        {
          this._tooltipDiv.hide();
          this._trigger("close");
        } // end _close()
      }); // end widget.toolip()
    }(jQuery));
      </script>
      <script>
      $(function (){
        var inventory = $("#inventory tbody");
        var quantities = inventory.find("td:nth-child(2)")
          .map(function (index, qty){
            return $(qty).text();
          }).get();
        var sum = $.sum(quantities);
        $("#sum").find("td:nth-child(2)").text(sum);
        
        var prices = inventory.find("td:nth-child(3)")
          .map(function (index, qty){
            return $(qty).text();
          }).get();
        var average = $.average(prices);
        $("#average").find("td:nth-child(3)").text(average.toFixed(2));
      
      var data = [3, 4, 3, 4, 3, 4, 3, 4];
    console.log("sum: " + $.sum(data));
    console.log("avreage: " + $.average(data));
    $("a").tooltip();
      
      });
      </script>
    </body>
    </html>