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" }

  • 相关阅读:
    WPF之感触
    C# WinForm 给DataTable中指定位置添加列
    MyEclipse 8.6 download 官方下载地址
    将博客搬至CSDN
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
  • 原文地址:https://www.cnblogs.com/guozhe/p/2831399.html
Copyright © 2011-2022 走看看