首页 > Web开发 > 详细

jQuery源码分析(6) - $.xxx()和$().xxx()幕后

时间:2019-09-11 17:05:39      阅读:65      评论:0      收藏:0      [点我收藏+]

把以前看的jQuery源码的分析笔记搬到博客上,重温经典,也是为了方便查询。

 

众所周知,jQuery有二种方法调用形式,$.xxx()和$().xxx()。
$.xxx():可以给jQuery对象和原生js对象用,也就是俗称的工具方法;
$().xxx():只能给jQuery对象使用。
 
工具方法常用的有:
$.type():  判断类型,功能更强,可以具体区分出数组、json、正则、时间、null;
$.trim():  去除空格
$.noConflict(): 防止冲突
$.ajax():发起ajax请求
...
 
jQuery对象常用的方法就太多啦,css(), html(), append()... 
 
那这二种方法分别如何定义呢?先来看工具方法:
<script src="jquery-1.9.1.min.js"></script>
<script>
$.extend({
  leftTrim:function (str) {
    return str.replace(/^\s+/,‘‘);
  }
});
</script>
<script>
$(function () {
  var str = ‘ hello ‘;
  alert(‘(‘+$.leftTrim(str)+‘)‘);
});
</script>

 

再看jQuery对象的实例方法:

<script src="jquery-1.9.1.min.js"></script>
<script>
$.fn.extend({
  drag:function () {
  var disX = 0;
  var disY = 0;
  var This = this;
  this.mousedown(function (ev) {
    disX = ev.pageX - $(this).offset().left;
    disY = ev.pageY - $(this).offset().top;
    $(document).mousemove(function (ev) {
      This.css(‘left‘,ev.pageX-disX);
      This.css(‘top‘,ev.pageY-disY);
    });
    $(document).mouseup(function () {
      $(this).off();
    });
    return false;
  });
 }
});
</script>
<script>
$(function () {
  $(‘div‘).drag();
});
</script>

 

背后实现的原理:
jQuery.extend = jQuery.fn.extend = function() {};

可以看到,jQuery.extend和jQuery.fn.extend其实是同指向同一方法的不同引用。

jQuery.extend 对jQuery本身的属性和方法进行了扩展, jQuery.fn.extend 对jQuery.fn的属性和方法进行了扩展。
 
针对fn与jQuery其实是2个不同的对象:
1)调用jQuery.extend,this指向jQuery对象,所以这里的方法是扩展在jQuery上。
2)  调用jQuery.fn.extend,this指向fn对象,扩展fn就是扩展jQuery.prototype原型对象。

jQuery源码分析(6) - $.xxx()和$().xxx()幕后

原文:https://www.cnblogs.com/easonw/p/11506739.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!