文档章节

5个例子说明jQuery.extend(...)对象扩展工具方法

secondriver
 secondriver
发布于 2015/09/17 09:26
字数 1319
阅读 16
收藏 0

    jQuery工具中提供了extend(...)方法,实现一个或者多个其它对象扩展一个对象并且返回扩展后的对象。

   下面的示例来演示jQuery.extend()是如何扩展对象的。

   1.准备3个对象

    

var target = {
            container: 'container'
        };

        var src1 = {
            chart: {
                type: 'column'
            },
            xAxis: {
                categories: ['1月', '2月', '3月', '4月', '5月'],
                name: "xAxis"
            },
            yAxis: {
                min: 0
            },
            data: {
                key: {

                }
            }
        };

        var src2 = {
            chart: {
                type: 'area'
            },
            title: {
                text: '未命中率'
            },
            xAxis: {
                categories: ['1月', '2月', '3月', '4月', '5月', '6月'],
                enable: true
            },
            yAxis: {
                min: 0,
                max: 10
            }
        };


   说明:

   target:要扩展的目标对象,src1 src2:用来扩展目标对象的对象。

  2. jQuery.extend(target, src1, src2)

  

var rs1 = jQuery.extend(target, src1, src2);
        console.info(target);
        console.info(rs1);
        console.info(target === rs1);

   运行的结果是:target === rs1 为true, 说明对target扩展成功,这个时候target发生改变,且结果为:

  wKioL1N7NjvBHM-8AAFj6mM_Mf8333.jpg

   如上图target对象的值,和1中准备的3个对象(target,src1,src2)仔细对比会发现一个问题,aAxis对象的中没有了name属性。这个问题的产生要归到extends()方法的第一个可选参数deep,默认为false,意思是不进行递归扩展。

   如果将上述扩展改为:

jQuery.extends(true, target, src1, src2)


  测试结果如下:

  wKioL1N7ONCBUiq1AAGe43BDxYs235.jpg

   如上图红色框可以看出对target进行了递归合并。

3.只想获取一个合并后的对象,并不想改变原始目标

    

var rs1 = jQuery.extend(true, {}, target, src1, src2);

  

    这样进行扩展,将{}对象作为目标对象,target对象作为扩展目标对象的对象。这样target对象不会发生变化,同时返回的结果rs1和2中deep设置为true的结果是相等的。


4. 小心3中用{}作为目标对象合并

    2中的结果表明target对象确实被src1,src2进行了扩展,注意一个问题在对target对象进行扩展的时候,如果src(源)存在目标对象的属性则进行覆盖,不存在则保持target对象属性值不变。deep的取值是针对src(扩展目标对象的对象)是否进行递归合并而言的,因此可以根据实际情况比较清楚的选择deep的取值。

  

  3中的测试将deep不设置或设置为false,则rs1的结果将和2中第一个测试结果是相等的。

  下面来说明一下3中的小心之处:如果target对象是一个嵌套对象,src1,src2保持不变。

 

var target = {
            container: 'container',
            xAxis: {
                version: '1.0'
            }
        };

   我们可以看到target对象现在是一个嵌套对象,且xAxis对象中的属性在src1,src2中都不存在。

   进行jQuery.extend({},target, src1,src2), jQuery.extend(false,{}, target, src1,src2)操作之后发现返回的结果是:

  wKioL1N7QG3AZ3llAAF3IIR5XTU794.jpg

   这个问题产生不是方法的问题,只是在实际应用中很可能碰到,主要因为人为设置{}为目标对象的时候,忽略的本质上的目标对象target,因此在使用3中的方式来避免修改目标对象的同时应该显式的将deep设置true。

   使用jQuery.extend(true, {}, target, src1, src2)结果如下:

   wKioL1N7QUixseo1AAHLRxUOPjE120.jpg

       这样扩展的结果才能够保证目标对象的完整。不过,如果实际中并不需要对src1, src2进行递归合并的话,这个时候可以将target对象复制一份在进行操作。


5. 无(隐式的,目标对象肯定是有的)target扩展$.extend(src), $.fn.extend(src)

  

$.extend(src1)

  将src1扩展到$(jQuery)全局对象中。通过Firebug查看如下图:

  wKiom1N7RF_i0HcwAAEq01wSEq8346.jpg

 

$.fn.extend(src1);

  将src1扩展到$(jQuery)实例对象中。通过Firebug查看如下图:

 wKiom1N7RVfwtsHLAAF79fW2aC0933.jpg


   通过上面两个示例清楚的看到src1分别扩展到了jQuery全局对象和实例对象中去,值得注意的是这正是jQuery插件常用方法。


    最后一个小扩展,对命名空间进行扩展。

   

$.namespace = {

        }

   为了避免JavaScript的全局变量命名污染,经常会用到一个变量名作为一个库或者一个组件的命名空间,如jQuery就是jquery库的全局变量名也可以说是命名空间。

   我们可以通过jQuery.extend()对命名空间进行扩展,注意事项和用法同文中2,3介绍相同,这里命名空间作为了target对象。

  

$.extend($.namespace, src1);

  这里namespace作为jQuery全局对象的一个属性,属性的值是一个对象,在这个对象里可以可以对代码进行组织,封装。namespace可以看作是被封装和组织的这些代码的命名空间。

  如下图所示,可以看出src1对象扩展到$.namsespace对象中:

 

wKiom1N7SrWQ7BSAAAG0FNGV3mY472.jpg

   写到这里,可以看到JavaScript一切是对象的强大之处,可以将对命名空间的扩展方法定义为:

 

jQuery.extend([deep], namespace, src1, src2, ... , srcN)

 

   PS:今天用到jQuery.extend()方法的时候,手头有个文档加上网上的一些文章看了看,不过还是费了一点神,虽说解释起来并没有太多难点,实际开发中却能发现好多东西。一句jQuery.extend()方法用来对目标对象进行扩展的方法的说明,简单,却并不易懂,毕竟JavaScript的对象实在强大。


本文出自 “野马红尘” 博客,谢绝转载!

© 著作权归作者所有

secondriver
粉丝 10
博文 229
码字总数 233821
作品 0
广州
程序员
私信 提问
$.fn.extend 和$.extend函数

区别和详解:jQuery extend()和jQuery.fn.extend() 首先是简单的概述区别:$.extend()是类方法 $.fn.extend()是原型方法 对象方法和原型方法类似 可参考 :我的 js的protype (1)(2) 1、认...

ke_ry
2016/09/29
0
0
jQuery.extend和jQuery.fn.extend的区别

jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来。很多地方说的也不详细。这里详细说说之间的区别. 工具/原料 jQuery库。 javascript 方法/步骤 我们先把jQuer...

zwjjap
2015/07/23
58
0
JQuery.extend函数使用详解 $.extend

jQuery为开发插件提供了两个方法,分别是: 1. jQuery.fn.extend():给jQuery对象提供方法。 2. jQuery.extend():为扩展jQuery类本身添加方法。 先看源码是怎么实现的,截取自JQuery-1.11.0...

Josean_Luo
2014/04/11
132
1
理解jquery的$.extend

理解jquery的$.extend 今日在写js插件过程中需要使用扩展对象的方法,便想到了jQuery.extend这个方法,但又不甚了解,故去查了下官方API文档,自己也进行了相应尝试,现将所得总结如下: $....

胡洋
2017/02/28
0
0
前端知识 | 论jQuery如何编写插件

一. jQuery的插件机制 为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法 jQuery.extend(object) ,一个参数的用于扩展jQuery类本身,也就是用来在jQuery类/命名空...

海说软件
2018/08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
15
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部