jquery插件 开发插件

jquery封装的插件，是为了日后调用起来方便，只需要输入参数即可实现我们需要的效果。
jquery为我们提供了$.extend和$.fn.extend的方法，一个是全局封装一个是局部封装，

$.extend为jQuery类添加类方法

$.fn.extend是对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”，我们基本也这么写

// 1,第一个参数不写布尔值，默认是false浅拷贝，意思就是对象里面还有对象的话，那么就以最后一个覆盖前面一个https://sdeno.com/?p=3055
// 2,如果有2个对象的话，2个对象会进行合并，至于深拷贝还是浅拷贝看第一个参数的设置。
// 3,如果就一个对象的话，则会根据你使用的是$.extend还是$.fn.extend，进行jQuery类的扩展，还是为jQuery添加成员”属性和方法了，一般为jQuery扩展插件也是以这样的方法，也就是只传入一个对象，则就会把jQuery当作目标和传入的对象合并。

$.extend(false,{},{},{},…);

不管$.fn.extend还是$.extend，如果里面的参数只有一个对象的话，那么目标对象就会是jQuery.fn或者jQuery。参数对象就会被合并到jQuery中。所以我们常用这种方式去扩展jQuery插件。

例如：

;(function($){
   $.fn.extend({
      'color':function(value1,value2){
       $(this).css({'color':value1,'background':value2});
   }
 });
 })(jQuery);
 调用只需要：
 $('div').color('red','yellow');

还有另一种调用方式:$('#wo').color({fc:'#000',bg:'yellow'},function(){ //回调 });
;(function($){
    $.fn.extend({
 
        'color':function(opt,fn){ //opt 新值
             var oldvalue={//默认值
                bg:'yellow',
                fc:'pink',
                bor:'1px solid red'
             } 

             var resule=$.extend({},oldvalue,opt||{});//设置新信就会覆盖久值，没有设置就使用默认值
             var _this=$(this);
-----------------------------------------------------------------------------------------------以下是完成回调部分代码
             var wait = function(dtd){
 　　 　        var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象
 　　　         var tasks = function(){
 　　　         　 _this.css({'color':resule.fc,'background':resule.bg,'border':resule.bor});
 　　　　 　　      dtd.resolve(); // 修改$.Deferred()状态为成功
 　　　         };
 　　　         tasks();
 　　　         return dtd.promise(); // 返回promise对象，防止外面随意修改$.Deferred()状态
             };

             $.when(wait())
 　　          .  done(function(){ 
                    if(typeof fn == 'function'){
                        fn();
                  }
              }) //成功之后的回
------------------------------------------------------------------------------------------------------
          }//color
 
    })
})(jQuery);

案例下载：http://pan.baidu.com/s/1bntuZi3

还有另一种封装代码的形式：

(function($) { 
    $.fn.watch = function(callback) { 
          return $(this).each(function() { 
         //缓存以前的值 
        $.data(this, 'originVal', $(this).val()); //代码初始化先执行了这里
 
        //event 
       $(this).on('keyup paste', function() { 
              var originVal = $.data(this, 'originVal'); 
             var currentVal = $(this).val(); 
            console.log('之前值:'+originVal);
            console.log('现在值:'+currentVal);
 
 
           if (originVal !== currentVal) { 
               $.data(this, 'originVal', $(this).val()); 
               callback(currentVal); 
           } 
       }); 
   }); 
 } 
})(jQuery);

调用：
$(function(){
  $(".tx").watch(function(value) { 
      document.title=value;
  });
});

两种代码封装效果都是一样的，我跟人比较倾向于第一种。

以上是局部封装，全局封装只需要修改成$.extend即可。

封装在$.extend里面如果调用就使用

调用：

$.liu()  //这样就能调用，类似$.ajax();

为jQuery类添加添加类方法，可以理解为添加静态方法。如：
$.extend({ 
   add:function(a,b){return a+b;} 
}); 
便为　jQuery　添加一个为 add　的　“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了，$.add(3,4); //return 7

http://jingyan.baidu.com/article/fec4bce259ef67f2608d8b10.html

jquery_fz

——————————————————————————————————-

http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html

jQuery.extend 函数详解