jquery 创建 插件

用户自定义方法扩展jquery。

扩展jquery 有2种形式:

    即给jquery添加新的全局函数,相当于给jquery类本身添加方法,在$(jquery的别名)上直接定义的实用工具函数jQuery.extend(Object);   // jQuery 本身的扩展方法 

    即给jQuery对象添加方法。对jQuery包装集进行操作的方法(所谓的jQuery的命令)。

jQuery.fn.extent(Object);    // jQuery 所选对象扩展方法

1、创建插件的基本准则:

  1、命名规则: jquery开头+插件的名称+ js     jquery.pluginName.js

     min版的: jquery+插件的名称+min+js    jquery.pluginName.min.js

  2、$符号 冲突问题

  3、参数问题:如果插件的参数很多,有的参数不是必须的,简化:

//p1,p2都是必须的参数,不是必须的参数可以放到options中
      $.complex = function(p1,options,p2){
          var settings = $.extend({
            op1:defalutValue,
            op2:defalutValue,
            op3:defalutValue
          },options||{});
      //传来的参数 覆盖默认的值

      }

2、类级别的插件(全局插件)开发:

通过 jQuery.方法名 =function()  即给jquery添加新的全局函数,相当于给jquery类本身添加方法

$.say = function(value){
        alert("hello "+ value);
      }
      //但是,当使用jquery.noCanflict()后,就会出问题,一般用jQuery.say = function(),
      //这样书写不方便,解决方法:用闭包。
      (function($){
          $.say = function()
      })(jquery);

3、对象级别的插件(包装集插件)

jquery的所有方法,都是放在jquery.prototype (jquery原型)中,jquery 源代码中: jquery.fn = jquery.prototype = {----}

所以 jquery 中一般使用 $.fn.方法名 = function(){ - - - };

 $.fn.setColor = function(){
        //此时的this对象指的是整个包装集对象,已经被封装为包装集,
        //就不再使用$()来进行封装了
        this.css("color","#ff0");
        //基于包装集的函数,一定要支持链式编程,
        return this;
      }

      $(".ccc").setColor();

4、插件的一些优化:

1、在jquery名称空间中职位插件声明单个名称:

例如:jQuery.fn.bestPluginEverInit = function(){   //init    };

jQuery.fn.bestPluginEverFlip= function(){   //flip    };

jQuery.fn.bestPluginEverFlop= function(){   //flop    };

jQuery.fn.bestPluginEverFly = function(){   //fly   };

改成:

 (function($){
        var methods = {
          init:function(){      },
          flip:function(){      },
          flop:function(){      },
          fly:function(){       }
        };

        $.fn.bestPluginEver = function(method){
          if(methods[method]){
            return methods[method].apply(this,arguments);
          }
        };

      })(jQuery);
原文地址:https://www.cnblogs.com/a-lonely-wolf/p/5656576.html