$.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.这里的编辑器插入代码不是很好用,不能自动排版,求教一下,哪位大神是否有能更好排版的写笔记的方法。
版权声明:本文为博主原创文章,欢迎转载和发表评论,转载请注明出处。

相关文章推荐

微信小程序导航:官方文档+精品教程+demo集合(6月12日更新)

本帖最后由 微信小程序联盟管理员 于 2017-6-12 17:36 编辑(24个DEMO和47篇教程)1:微信小程序官方工具: https://mp.weixin.qq.com/debug/w …...

JS(高程)最佳实践

在阅读js高程最佳实践章节,将自己感触比较深的点记录下来,也就是自已以前没注意或者不知道的知识点。一、什么是可维护的代码? 可理解性 直观性 可适应性 可扩展性 可调式性 二、代码约定1.函数和方法都...

微信小程序-bindtap等事件传参

什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带...

前端学习方法总结

今天做了两件事。分别是学习了bootstrap和AngularJS的API文档,直接看文档。在看之前虽然早就听说了这两门技术,但是一直没有去学习他,今天在学习之后,我发现前端的技术学习是需要一定的学习...

微信小程序 视图控件与bindtap之间的问题

在微信小程序中 最常用的控件 可以用bindtap(冒泡反应) 如的形式绑定ItemOnclick事件并传递一个dataset,其包含一个名为mType的元素 值为123。 在某一次设计中 有如下...

小程序 view使用bindtap传值问题

如图,view标签 加 bindtap事件,用data-name传值,如果view中只有文字,点击整个view区域都可以接收到data-name的值,如果view里面加一个lable标签,那么点击la...

JS原型理解

说实话,一开始我对prototype和property是分不清的,我说的是单词分不清,不知道他们的意思,在强制自己记忆了一遍之后,我是这么记忆的,type(类型),跟“原型”差不多,所以prototy...

微信小程序三(设置页面标题)

页面写好了,总感觉哪里不爽,对,就是那,每个页面的标题都一样,都是 Wechat cou 呀 真cou, 那咱就单独说说,如何设置 页面标题。 设置页面标题 ,相当的简单, 找到所在页面...

Hdu1022(栈)

关于栈的简单应用,不难,我的思路一般是:让in()和out(j)比,不相等时,in(i)入栈,相等时,top和out(j)比较,相等时:top--,j++;不相等时,继续in()和out(j)的比较。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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