jQuery源码探索之路（3）--extend的实现

1. 自己最近在学习一些js的插件的写法，那么当然就绕不开jquery，于是自己就学习中遇到的一些问题做些总结和记录

2. 自己也是在学习过程中，有问题请各位指出，希望大伙能多多支持，给给star，点点赞呗，github地址

在JQ中,extend是个一个很强大的功能，实际的源码中很多模块方法都是通过extend扩展方法加入到JQ原型对象上去的，同时extend给后续的开发者提供了很好的接口，使得层出不穷的JQ插件出现，极大的丰富了JQ的使用场景。

先写个最简单的

extend其实说白了就是复制，但在js中对象作为参数的传递是直接传递而不会重新构建一个对象再传过去，比如

var a = {
  name:'aaa'
};
var b = a;
b.name = 'bbb';
console.log(a.name); //bbb

所以我们为了复制一个对象，一般需要自己创建一个新对象，然后通过遍历，赋值来达到复制效果，例：

function copy(target,source){
  for(var name in source){
    target[name] = source[name];
  }
  return target;
}

简单的JQ extend方法

Ye.extend = function(){
  //我们这里通过arguments来获取传进来的参数
  var source = arguments[0];
  for(var name in souce){
    //复制到实例本身上
    this[name] = source[name];
  }
}
Ye.extend({
  add:function(){
    console.log('add');
  }
})

但是我们不仅要扩展静态方法，还要扩展实例上的方法，所以

Ye.prototpye.extend = Ye.extend = function(){
   //...代码
}

然后就可以扩展JQ插件了

$.prototype.extend({
  test:function(){
    console.log('实例方法');
  }
})
$.extend(){
  test:function(){
    console.log('静态方法');
  }
}
$.test();  //静态方法
$("#id").test();//实例方法

当做复制方法使用

有时候我们并不是想扩展JQ对象，而是想将一个对象整合到另一个对象上去，所以我们可以对extend方法做一个判断

Ye.prototype.extend = Ye.extend = function(){
    if(arguments.length == 1){
       var source = arguments[0];
       for(var name in souce){
          //复制到实例本身上
          this[name] = source[name];
      }
    }else {
      var target = arguments[0];
      var source = arguments[1];
      for(var name in source){
        target[name] = source[name];
      }
      return target;
    }
}

//做复制方法调用时
$.extend(target,source);

这样我们的extend方法就完善啦！！

附：既然看都看完了，麻烦各位看官老爷点个赞，给个star呗，源码地址：https://github.com/LY550275752/my-js-plug/blob/master/Ye.js