jQuery源码探索之路(3)--extend的实现

  1. 自己最近在学习一些js的插件的写法,那么当然就绕不开jquery,于是自己就学习中遇到的一些问题做些总结和记录
  1. 自己也是在学习过程中,有问题请各位指出,希望大伙能多多支持,给给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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,552评论 25 709
  • 自己最近在学习一些js的插件的写法,那么当然就绕不开jquery,于是自己就学习中遇到的一些问题做些总结和记录 自...
    酱油_阅读 4,728评论 3 7
  • 早上好,清醒的一天,耳边听着优美的英文歌曲,很喜欢never say never。这周开始尝试自己的学习计划,即是...
    小马克Wel阅读 1,378评论 0 0
  • 大家好,在这里给大家推荐一部漫画,既幽默又暖心,书名为《你今天真好看》,下面是我的临摹~(别嫌弃哈) 求赞!
    子衿颐阅读 2,361评论 1 2
  • 觉醒期:学习任何新技巧的初始阶段必定是“开始觉醒”。你首先学到的一定是“哇!这里有一种更棒而且更新的沟通方法” 笨...
    从心出发_Amy阅读 2,472评论 0 0

友情链接更多精彩内容