JQuery.extend()详解

JQuery 源码解析 · extend()详解

1. $.extend(src)

　该方法将src合并到jquery的实例对象中去　

1. jQuery.extend( target [, object1 ] [, objectN ] )

   下面是一个例子：

    var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dtarget 目标参数

   这样就可以将src1,src2,src3…进行合并，然后将合并结果返回给newSrc了。如下例：

    var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

   那么合并后的结果,同名属性会被后面的对象所覆盖

     result={name:"Jerry",age:21,sex:"Boy"}

2. jQuery.extend( [deep ], target, object1 [, objectN ] )

   第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致,看下面这个例子
   .(深层拷贝和浅层拷贝,可以参考这篇文章)

   var object1 = {
   apple: 0,
   banana: { weight: 52, price: 100 },
   cherry: 97
   };
   var object2 = {
   banana: { price: 200 },
   durian: 100
   };
   
   // Merge object2 into object1
   $.extend( object1, object2 );
   
   //console.log(JSON.stringify( object1 );
   {"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

   我们再看一下，如果是深度拷贝，则输出结果为：

   $.extend( true, object1, object2 );
   //console.log(JSON.stringify( object1 );
   {"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

2. $.fn.extend(src)

该方法就是将src合并到jquery的全局对象中去

```javascript
jQuery.fn.extend({
 check: function() {
   return this.each(function() {
     this.checked = true;
   });
 },
 uncheck: function() {
   return this.each(function() {
     this.checked = false;
   });
 }
});

// Use the newly created .check() method
$( "input[type='checkbox']" ).check();
```

扩展,进阶
利用这个函数，我们可以来写JQuery插件

  var Dropdown= function(element) {
      var self=this;
      var target=$(element).data("target");
      self.$element=$(element);
      self.$target=$(target);
      self.$element.on('mouseleave',function(){
         self.close(self.$target);
      });
      self.$element.on('mouseenter',function(){
       self.open(self.$target);
      });
  }
  //定义haorooms的方法
  Dropdown.prototype = {
      open: function($target) {
          return  $target.show();
      },
      close:function($target){
        return $target.hide();
      }
  }

  $.fn.myPlugin = function() {
      //创建Dropdown的实体
      var dropdown= new Dropdown(this);
  }

插件的使用

  $(function() {
      $('.dropdown').myPlugin();
  })

然后用一个即使匿名函数，将我们的代码包裹起来,防止污染全局环境、防止其他地方使用到了 我们自定义插件的对象。

  ;(function($,window,document,undefined){
    //我们的代码。。
    })(jQuery,window,document);