Блог

Главная - Вопросы по программированию - как бы я отправил значение из статической функции другому объекту?

как бы я отправил значение из статической функции другому объекту?

#javascript #jquery #class #plugins #static

#javascript #jquery #класс #Плагины #статический

Вопрос:

   (function ($, window, undefined) {
    'use strict';

    class Slider {

      static init(loop) {
        Slider.loop = loop;
        return Slider.loop;
      }

    };
    $.fn.blueSlider = function(loop, options) {
      var defaults = {

      }
      var loop = Slider.init(loop);
      console.log(loop);
      $.extend(defaults, options);
    };
  }(jQuery))

  $('div').blueSlider(true);  
 <div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Я новичок в создании кода с использованием class function поэтому, пожалуйста, извините за любые другие ошибки, которые я не упомянул в вопросе.

Я пытаюсь объединить class function и плагин jQuery. Эта строка: $.fn.blueSlider = function(loop, options) функция инициализации jQuery имеет 2 параметра, и loop параметр на самом деле является Slider.init() параметром ‘s. Итак, я должен объявить новую переменную, подобную этой, var loop = Slider.init(loop); для доступа к loop значению.

Я ожидаю поместить loop параметр внутри options , чтобы он мог быть вызван методом инициализации jQuery, когда я хочу изменить значение loop следующим образом: 

 $(className).blueSlider({
  loop: false,
  // etc.
})

Я пытался создать объект options и поместить его в loop параметр для передачи значения другому объекту, но это не сработало: 

 $.fn.blueSlider = function(options) {
  var defaults = {

  }
  var options = {
    loop: Slider.init(loop),
  }
  $.extend(defaults, options);
};

Есть ли какие-либо способы исправить эту проблему?

Ответ №1:

Если вы собираетесь использовать class синтаксис, вы не хотите предоставлять пользовательскую init функцию; вместо этого предоставьте конструктор и используйте new .

Также важно помнить, что jQuery основан на множествах, что означает, что this при вызове вызывается объект jQuery, содержащий набор элементов. В большинстве случаев плагину следует действовать так, как если бы он был вызван для каждого из этих элементов по отдельности. Например:

 (function ($, window, undefined) {
    'use strict';
    
    // Moved defaults out of the function, added
    // more for the example
    const defaults = {
      someOption: "foo",
      someOtherOption: "bar",
      color: "green"
    };

    // The class
    class Slider {
        constructor(loop = true, options) {
            // Handle initialization in the constructor
            this.options = defaults;
            this.setOptions(loop, options);
        }
        setOptions(loop, options) {
            this.loop = loop;
            this.options = Object.assign({}, this.options, options);
            // In ES2017 , you could use:
            // this.options = {...defaults, ...this.options};
        }
        // Use a method to handle applying the slider to an element
        apply($el) {
            // ...do slider's thing on $el...
            $el.css("color", this.options.color);
            $el.text("loop = "   this.loop);
        }
    }

    $.fn.blueSlider = function(loop, options) {
        // Loop through the elements
        this.each(function() {
            // Create or reuse an instance for each element
            const $el = $(this);
            let slider = $el.data("blueSlider");
            if (slider) {
                // Element already has a slider
                slider.setOptions(loop, options);
            } else {
                // Create slider for element, remember it
                slider = new Slider(loop, options);
                $el.data("blueSlider", slider);
            }
            slider.apply($el);
        });
    };
}(jQuery))

$('div.a').blueSlider(true, {color: "blue"});
$('div.b').blueSlider(false);
setTimeout(() => {
  $('div.a:first').blueSlider(false);
}, 800);  
 <div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="b"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

1. Спасибо за отличный пример. Я так долго искал в Google и github, пытаясь выяснить, как они работают.