`
caibinghong
  • 浏览: 150868 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

jQuery继承的实现(extends)

阅读更多

jQuery中的extend方法通过不同的参数实现了几种不同的继承方法:

  • 1.extend(src)

将src对象的属性和方法逐一复制给jQuery或jQuery对象

  • 2.extend(dest,src1,src2,src3...srcN)
将src1、src2...对象的属性和方法逐一复制给dest对象,需要注意的是,在复制的过程中,排在后面的参数(对象)将会覆盖排在前面的参数的属性 和方法;实际上,该方法和后面的方法3都提供了一种“深度继承”的方法,即:参数一表示的对象可以通过该方法一次实现逐一按层次的父类继承。
如下图所示:
srcN
...
src3
src2
src1
dest
使用该方法,可以一次将”继承“dest的多个父类,需要注意的是src3提供的属性和方法由可能会被src2,src1重载。
  • 3.extend(boolean,dest,src1,src2...)
与 其他的类库不同的是,jQuery的extend方法提供了“深层拷贝”的功能,如果你传入的第一个参数为boolean型变量,则该变量为深层拷贝的标 志,第二个参数为extend方法的目标对象,其余参数为需要进行继承的“父类”。如果第一个参数的值为true(深层拷贝),并且dest和src元素 都包括相同名称的对象属性,则对该对象属性的方法和属性再进行一次复制。
  • 最后我们来通过分析源代码,来加深对该继承机制的理解:

jQuery.extend = jQuery.fn.extend = function() {
// copy reference to target object
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

// Handle a deep copy situation /*如果第一个参数为boolean值,则取第二个参数为目标对象*/
if ( target.constructor == Boolean ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}

// Handle case when target is a string or something (possible in deep copy)
/*如果目标参数不是object或者function,那么就有可能是深度copy,*/

if ( typeof target != "object" && typeof target != "function" )
target = {};

// extend jQuery itself if only one argument is passed /*如果参数长度为1,则将参数表示的对象的属性和方法复 制给jQuery本身*/
if ( length == i ) {
target = this;
--i;
}

for ( ; i < length; i++ )
// Only deal with non-null/undefined values当参数都为非空时,
if ( (options = arguments[ i ]) != null )
// Extend the base object
for ( var name in options ) {
var src = target[ name ], copy = options[ name ];

// Prevent never-ending loop /*防止死循环*/
if ( target === copy )
continue;

// Recurse if we're merging object values/*深度继承的实现*/
if ( deep && copy && typeof copy == "object" && !copy.nodeType )
target[ name ] = jQuery.extend( deep,
// Never move original objects, clone them
src || ( copy.length != null ? [ ] : { } )
, copy );

// Don't bring in undefined values /*正常情况下的继承实现*/
else if ( copy !== undefined )
target[ name ] = copy;

}

// Return the modified object
return target;
};

  • 注意:

在这里还有一个特殊的地方,就是在函数开头的地方有jQuery.extend = jQuery.fn.extend,而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了,所以在后面的调用中会出现jQuery.extend()和jQuery.fn.extend()的不同调用,这两个方法调用产生的结果也不一样,jQuery.extend()的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这是很重要的,在jQuery.js中到处体现这一点

分享到:
评论

相关推荐

    jquery+struts2实现文件上传

    在本文中,我们将深入探讨如何使用jQuery和Struts2框架实现文件上传功能。这是一个常见的需求,在Web应用中,用户可能需要上传图片、文档等文件。jQuery是一个轻量级的JavaScript库,提供了丰富的交互效果和API,而...

    Struts2+Jquery实现ajax并返回json类型数据

    在本教程中,我们将探讨如何结合使用Struts2和jQuery来实现一个使用Ajax发送请求并接收JSON类型数据的功能。 首先,我们需要在JSP页面中使用jQuery发起Ajax请求。jQuery的`$.ajax()`函数是实现这一功能的核心。例如...

    js继承.doc

    在JS中,对象可以直接通过原型链实现继承,而无需像Java那样使用`extends`关键字。本文档将探讨JavaScript中的继承实现方式及其优缺点。 首先,我们需要理解JS中的对象与类的区别。在JS中,对象可以直接通过字面量...

    jquery+struts2实现异步刷新实例

    本实例将详细讲解如何利用jQuery库与Struts2框架结合,实现异步刷新功能。jQuery以其简洁易用的API深受开发者喜爱,而Struts2作为Java Web开发中的MVC框架,提供了丰富的动作和结果类型,便于构建动态网站。 首先,...

    jquery与struts2整合

    通过以上步骤,我们成功地实现了jQuery与Struts2的整合,实现了前端与后端的数据交互。当你点击页面上的按钮时,jQuery会向服务器发送一个包含用户名和密码的请求,Struts2的Action会处理这些数据并返回结果,最后这...

    jquery的ajax传json对象数组到struts2的action

    你可以通过继承`org.apache.struts2.json.JSONResult`并覆盖`processType`方法,或者使用第三方库如Gson或Jackson来实现。 总结起来,将jQuery的AJAX与Struts2结合,可以通过JSON对象数组进行前后端的数据交互。在...

    使用Python的Django框架结合jQuery实现AJAX购物车页面

    总结来说,这个教程涵盖了Django中静态资源的管理、模板继承的概念以及如何结合jQuery使用AJAX实现动态购物车页面。通过这样的方式,我们可以提供更流畅的用户体验,让用户在浏览产品目录的同时,无需跳转就能查看和...

    struts2整合jquery

    在Struts2框架中整合jQuery,我们可以实现更高效和流畅的Web应用交互,尤其是通过Ajax进行异步数据提交和对象列表展示。以下是整合过程的详细步骤及知识点: 首先,我们需要确保具备以下环境: 1. Struts2框架版本...

    Servlet使用jquery.uploadify上传附件

    在这个场景中,我们将探讨如何使用Servlet结合jQuery的uploadify插件来实现附件的上传。Servlet是Java Web应用中的服务器端组件,用于接收客户端请求并返回响应。jQuery则是一种强大的JavaScript库,它简化了DOM操作...

    Struts2 JQuery 文件上传 进度条

    本教程将详细讲解如何在Struts2中集成JQuery File Upload插件,实现文件上传的进度条效果。 首先,我们需要在项目中引入Struts2和JQuery的相关库。Struts2提供了强大的Action支持,而JQuery则是一个强大的...

    jquery 插件ajaxfileupload与struts2结合 实现异步上传图片

    在本文中,我们将深入探讨如何将jQuery插件AjaxFileUpload与Struts2框架结合,以实现异步图片上传的功能。这种技术在现代Web应用中非常常见,它提升了用户体验,允许用户在不刷新整个页面的情况下上传文件,特别是...

    struts jquery 上传

    当我们结合Struts和jQuery进行文件上传操作时,可以实现更高效、用户体验更好的上传功能。 在Struts中,文件上传通常依赖于`struts2-convention-plugin`和`struts2-plugins`中的`struts2-file-uploading`插件。这些...

    SSH mybatis springmvc lucene Jquery oracle等笔记总结.docx

    5. **包配置**:Struts2的`package`用于组织Action,可以指定namespace、继承关系(extends)和是否为抽象包(abstract)。 【Spring框架】 Spring框架是Java开发的核心,它提供了DI和AOP,以及众多企业级服务如...

    JQuery getJSON() 调用Servlet简单例子

    在实际项目中,这种交互方式常用于实现动态数据加载、异步表单提交等功能。记住,确保Servlet和前端页面都在同一个域下,或者你可能需要处理跨域问题。同时,根据实际需求,你可能需要对发送的数据进行更复杂的序列...

    Struts2+jquery.form.js实现图片与文件上传的方法

    在本文中,我们将探讨如何使用Struts2框架与jQuery库中的jquery.form.js插件来实现图片和文件的异步上传。这种方法允许用户在不刷新整个页面的情况下上传文件,提高用户体验。 首先,我们要知道`jquery.form.js`是...

    Struts2之struts2自带插件实现异步调用案例struts015

    ACTION类需要继承自`ActionSupport`,并实现相应的业务逻辑方法。例如: ```java public class AjaxAction extends ActionSupport { private String result; public String execute() { // 业务逻辑 result ...

    servlet学习demo

    这是最常见的实现方式,通过创建一个新的类继承自`HttpServlet`,然后重写关键方法,如`doGet()`和`doPost()`。例如: ```java public class MyServlet extends HttpServlet { protected void doGet...

Global site tag (gtag.js) - Google Analytics