jQuery 扩展（）中的扩展（）

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 扩展（）中的扩展（）

jQuery extend() in extend()

jquery

plugins

extend