Question

到目前为止，这些是我的jQuery插件参数：

function lightbox( options )
{
 // setting default parameters
 var params = $.extend(
 {

    // show/hide & enable/disable options
    keyNav : true,                      // boolean
    objClickNav: false,                 // boolean
    showNav : true,                     // boolean
    showTitle : true,                   // boolean
    showPagination : true,              // boolean
    debugMode : false,                  // boolean
    disableScrolling : true,            // boolean
    fullscreen : false,                 // boolean

    autoScale : true,                   // boolean
    staticHeight: 'auto',               // integer or 'auto'
    staticWidth: 'auto',                // integer or 'auto'

    // content options
    contentType : 'image',              // defines the type of content shown in the lightbox
                                        // options: 'image'
    animationType : 'default',          // defines the type of animation when switching objects
                                        // options: 'default', 'slide'

 }, options);
}

我无法在互联网上的任何地方找到答案，这就是我在这里问的原因。我希望在当前extend()中有一个extend()，所以我可以像这样声明我的插件：

lightbox({
  keyNav : true,
  showNav : false,
  scale({
    autoScale : false,
    staticHeight : 800,
  })
  content({
    contentType : 'image',
    animationType : 'slide',
  })
});

这样做的正确方法是什么？

Answer 1

$.extend记录 deep 标记。 scale和context通常是对象，深层标志会告诉extend克隆。

另请注意，第一个条目应该是要扩展的对象，您通常不希望成为默认对象。（虽然在你的情况下，你每次都在重新创建默认值，所以没关系。）

所以：

var params = $.extend(
    true, // <=== The `deep` flag
    {},   // <=== The new object that will be stored in `params`
    {/*...your big defaults object...*/},
    options
);

简单示例：

(function($) {
  var fooDefaults = {
    text: "coolness",
    style: {
      color: "green",
      fontWeight: "bold"
    }
  };
  
  $.fn.foo = function(options) {
    var params = $.extend(true, {}, fooDefaults, options);
    this.data("params", params); // Just so we can look at them
    return this.each(function() {
      $(this).text(params.text).css(params.style);
    });
  };
  
})(jQuery);

var a = $("#a");
var b = $("#b");
a.foo({text: "I'm a"});
b.foo({style: {color: "blue"}});
console.log("a's text: " + a.data("params").text);
console.log("a's color: " + a.data("params").style.color);
console.log("b's text: " + b.data("params").text);
console.log("b's color: " + b.data("params").style.color);

<div id="a"></div>
<div id="b"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

扩展（）中的jQuery extend（）

1 个答案: