zoukankan      html  css  js  c++  java
  • jQuery的extend属性(非常好的用于封装插件,给出接口用)

    在一些html中常常看到插件的使用:

    例如:

    $('#slides').slides({

        preload: true,

        container:'slides_container',

        slidesLoaded: function() {

            jQuery('.caption').fadeIn(800);

        }

    });

    这个就是一个slides函数给出的api接口,它将一个js功能封装,给出一些接口:preload,container,slidesLoaded,

    这样只要按照接口说明传入相应的值就能正常运行这个功能函数。

    其中jQuery就是一个巨大的功能函数。

    这个简单的原理就是利用extend合并对象内容函数实现的

    在这个功能函数slides()里面还会有一个默认的对象:

    jQuery.fn.slides.option={

        preload:false,

        container:'slidesContainer',

        slidesLoaded:function(){},

    };

    在具体使用时,当外部没有传入值时,执行默认对象,传入内容,执行传入的参数:

    利用:option=jQuery.extend({},jQuery.fn.slides.option,option);

    对两个对象进行合并:

    jQuery.fn.slides.option 为设置的默认属性

    option是引用这个函数时传入的属性,option在后面,属性优先

    合并属性语法

    jQuery.extend( target, [ object1 ], [ objectN ] )

    target:一个对象,如果附加的对象被传递给这个方法将那么它将接收新的属性,如果它是唯一的参数将扩展jQuery的命名空间。

    object1:一个对象,它包含额外的属性合并到第一个参数

    objectN:包含额外的属性合并到第一个参数

    当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象。

    如果只有一个参数提供给$.extend(),这意味着目标参数被省略。在这种情况下,jQuery对象本身被默认为目标。这样,我们可以在jQuery的命名空间下添加新的功能。这可用于插件作者希望添加新的方法到jQuery。

    请记住,目标对象(第一个参数)将被修改,也将通过$.extend()返回。然而,如果我们想保留原对象,我们可以通过传递一个空对象作为目标:

    var object = $.extend({}, object1, object2);

    通过$.extend()合并执行默认不是递归的;如果第一个对象的属性本身是一个对象或数组,这将是完全用第二个对象相同的key重写一个属性。这些值是不合并。这可以看到在下面的例子通过检查香蕉的值。然而,true为第一个函数参数,对象将被递归合并。

    未定义的属性不会被复制。然而,从对象原型的继承属性被复制。

    实例:

    var empty = {}

    var defaults = { validate: false, limit: 5, name: "foo" };

    var options = { validate: true, name: "bar" };

    var settings = $.extend(empty, defaults, options);

    settings == { validate: true, limit: 5, name: "bar" }

    empty == { validate: true, limit: 5, name: "bar" }

  • 相关阅读:
    U盘PE系统下安装WIN2003和WINXP的方法(非GHOST版)
    自己做U盘急救杀毒
    Windows Server 2003 SP2 企业版 ISO 下载 629M
    解决开机关机慢问题
    一般处理程序
    [转]iframe自适应高度详解(希望对大家有用)非常经典,非同凡响
    ie6下position fixed的失效bug
    php文件上传MAX_FILE_SIZE不起作用的问题
    IE6测试网页显示空白页面
    自己写的面向过程php验证码
  • 原文地址:https://www.cnblogs.com/guozhe/p/2831399.html
Copyright © 2011-2022 走看看