$.extend()与$.fn.extend()区别

原创 2016年05月30日 23:39:06
/****************************************
标签: JQuery 函数扩展
参考:博客园文章
时间:2016-05-30
浏览器:chrome| firefox 
编辑器:WebStrom
****************************************/
一、写在前面的话
昨天通过微信加入了“先行者计划”这个活动,感觉很有意义,之前的迷茫似乎也找到了方向。我清楚的意识到,想要技术过硬,就要通过扎实的理论基础和大量的实践来获得。我的前端学习也有一段时间了,但是感觉还是没有达到自己理想的状态,看到一些功能觉得很简单,却不敢动手去敲,一敲就出错,各种粗心大意,基础不扎实。所以,希望自己能在这个平台的监督下,在大家的互相学习和帮助下,形成一个良好的学习习惯,坚持学习,坚持总结,坚持分享交流。
二、$.extend()与$.fn.extend()区别
目前公司做的项目是SPA(Single Page Application)项目,里面写的东西我还看不太懂,暂时处于帮别人修复一些简单的bug的阶段。今天在学习其他同事之前写的代码的时候,看到了一些预定义的方法,产生了一些疑惑,我通过上博客学习,基本理清楚了,下面分享给大家。
首先,我看到了这样一种用法:
<span style="font-size:18px;">$.extend({
     foo:function(){...}
     bar:function(param){...}
});</span>
这个方法写在一个单独的文件中,通过$.foo();直接调用方法。
其次,我看到了这样一种用法:
<span style="font-size:18px;">(function($){
       $.fn.pluginName=function(opt,callback){


            }
       })
})(JQuery);</span>

这个方法写在一个初始化页面的文件中,直接调用。


看到这里我就比较疑惑了,都是对JQuery函数的扩展,怎么有两种方式出来了?其实之前也有了解过,但是了解的不清楚,所以印象不是很深刻。于是我就立马百度并且认真学习总结了以下内容(含参考)。
1.类级别的插件开发

        1.1 添加一个新的全局函数 

JQuery.foo=function(){...};

        1.2 添加多个新的全局函数
           JQuery.foo=function(){...};
           JQuery.bar=function(param){...};
           调用:JQuery.foo();JQuery.bar();或者$.foo(),$.bar('param');

        1.3使用JQuery.extend(object);(本项目用到)

JQuery.extend({
       foo:function(){...}
       bar:function(param){...}
});

  1.4使用命名空间
JQuery.myPlugin={


        foo:function(){...}
        bar:function(param){...}
};

调用:$.myPlugin.foo();$.myPlugin.bar('param');

2.对象级别的插件开发(在JQ对象上可以调用--在JQ这个类的原型上添加方法)

在JQ源码中,是这样写的:
--------------------------------------------------
jQuery.fn = jQuery.prototype ={ 
   init: function( selector, context ){//....  
   //...... 
}; 
--------------------------------------------------

方式一:

(function($){
<span style="white-space:pre">	</span>$.fn.extend({
<span style="white-space:pre">	</span>pluginName:function(opt,callback){


<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>})
})(JQuery);

方式二:

(function($){
<span style="white-space:pre">	</span>$.fn.pluginName=function(opt,callback){
<span style="white-space:pre">		</span>(本项目用到)
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>})
})(JQuery);
<span style="font-size:18px;">$.fn.hilight=function(){</span><br style="font-size:18px;" /><br style="font-size:18px;" /><br style="font-size:18px;" /><span style="font-size:18px;">};</span><br style="font-size:18px;" /><br style="font-size:18px;" /><span style="font-size:18px;">$('#myDiv').hilight();</span>

---------接收参数的插件-----------

// plugin definition 
$.fn.hilight = function(options) { 
<span style="white-space:pre">	</span>var defaults = { 
<span style="white-space:pre">	</span>foreground: 'red', 
<span style="white-space:pre">	</span>background: 'yellow' 
<span style="white-space:pre">	</span>}; 
<span style="white-space:pre">	</span>// Extend our default options with those provided. 
<span style="white-space:pre">	</span>var opts = $.extend(defaults, options); 
<span style="white-space:pre">	</span>// Our plugin implementation code goes here. 
}; 
我们的插件可以这样被调用: 
$('#myDiv').hilight({ 
foreground: 'blue' 
});

综上所述,我觉得主要理解两点就清楚了。
1.jQuery.extend(object);为扩展jQuery类本身,为类添加新的方法,我们将这类方法看成是静态方法,可以直接调用。
2.$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery每一个实例对象有效。$对象可以通过“.”的方式调用这些方法及属性。

三、结束语
1.第一次写笔记,写的不是很好,请大家见谅。希望大家能批评指正,谢谢。
2.这里的编辑器插入代码不是很好用,不能自动排版,求教一下,哪位大神是否有能更好排版的写笔记的方法。
版权声明:本文为博主原创文章,欢迎转载和发表评论,转载请注明出处。

jquery $.fn.extend

  • 2016年09月04日 20:07
  • 32KB
  • 下载

JQuery添加扩展方法(理解$.extend(),与$.fn.extend()方法区别)

理解$.extend(),与$.fn.extend()方法区别 1.$.extend()方法 $.extend()方法在JQuery中有两个用法,第一次是扩展方法, 第二个方法是 ...

jq插件的机制,$.extend()和$.fn.extend()的区别及闭包的相关简单案例

1111 苹果 梨子 香蕉 橙子

jQuery的$.extend和$.fn.extend作用及区别【整理】

ObjectjQuery.extend( target, object1, [objectN]) 用一个或多个其他对象来扩展一个对象,返回被扩展的对象 var settings = { validat...

jQuery.extend和jQuery.fn.extend的区别

我们先把jQuery看成了一个类,这样好理解一些。 jQuery.extend(),是扩展的jQuery这个类。 假设我们把jQuery这个类看成是人类,能吃饭能喝水能跑能跳,现在我们用jQuery....

【探究jQuery】jQuery.extend 和 jQuery.fn.extend 的区别

jquery在拓展方面,提供了两个很强大的方法:jquery.extend和jquery.fn.extend。 接下来我们来深究一下这兄弟俩的具体区别。 其实从字面上我们就可以看出,一个是对jqu...

jquery的$.extend和$.fn.extend作用及区别

概述 jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); 虽然 javascript 没有明确的类的概念,但是用类来理解它...

jQuery插件( jquery.extend 与 jquery.fn.extend的区别)

开源社区:http://www.oschina.net/project/tag/273/jquery/ jQuery插件网:https://www.jq22.com/...

Jquery $.fn.extend与 $.extend区别

$.extend(obj);是为了扩展jquery本身,为类添加新的方法    $.fn.extend(obj);给JQUERY对象添加方法。 如(1):    $.extend({ ...

jQuery.fn.extend与jQuery.extend到底区别在哪?

原文:http://www.cnblogs.com/liu-l/p/3928373.html
  • Joyhen
  • Joyhen
  • 2014年08月22日 09:30
  • 1687
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:$.extend()与$.fn.extend()区别
举报原因:
原因补充:

(最多只允许输入30个字)