Блог

Главная - Вопросы по программированию - jQuery extend() в extend()

jQuery extend() в extend()

#jquery #plugins #extend

#jquery #Плагины #расширить

Вопрос:

На данный момент это мои параметры плагина jQuery:

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

    // show/hide amp; 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',
  })
});

Каков правильный способ сделать это?

Комментарии:

1. Вы должны создавать объекты настроек по умолчанию с той же структурой, что и настройки, переданные плагину, тогда вы можете просто $.extend это сделать. То, что у вас есть сейчас, — это плоский объект по умолчанию, а затем внезапно передается вложенный объект, у вас будет много проблем с итерацией и выяснением, что куда идет, вместо того, чтобы просто создавать для них одинаковую структуру для начала.

2. Может быть, вы могли бы объяснить на примере?

Ответ №1:

$.extend документирует deep флаг. scale и context обычно это были бы объекты, которые флаг deep указывал 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>
Метки: