Присвоение объекта элементу dom и получение его в функции - PullRequest
Новая
       11

Присвоение объекта элементу dom и получение его в функции

0 голосов
/ 01 июля 2018

Я пытаюсь создать плагин параллакса самостоятельно, используя vanilla js. По сути, я настроил все так, чтобы он работал, но я хотел бы добавить некоторые вспомогательные функции, которые будут использоваться позже для каждого раздела параллакса.

Я пытаюсь написать что-то вроде: 

document.getElementById('test').parallax.getImage();

В моем плагине JS я определил: 

var parallax = {

getImage : function(element, event){
    var img = null;
    var section = element;

    for (var i = 0; i < section.childNodes.length; i++) {
        if (section.childNodes[i].className == "parallax-image") {
          img = section.childNodes[i];
          break;
        }        
    }
    return img;
},

}

и позже при инициации я назначаю объект элементу dom: 

function setupParallax(){
    // this get all sections
    var sections = self.methods.getSections();

    for (var i = sections.length - 1; i >= 0; i--) {
        sections[i].parallax = parallax;
    }
}

Итак, в функции getImage() объекта параллакса я хочу получить элемент, которому назначен объект параллакса. Как мне это сделать?

1 Ответ

0 голосов
/ 13 октября 2018

Чтобы расширить собственный Element на parallax пространство имен объекта, который имеет методы, такие как .getImage() 

document.getElementById('test').parallax.getImage()

Вы можете использовать Fn .prototype.call () для пересылки текущей секции Элемент в набор (_parallax) методов, которые будут доступны при использовании Element.parallax

const Parallax = (selector) => {

  const
    _el = document.querySelector(selector),
    _sections = _el.querySelectorAll('.parallax-section'),
    _parallax = section => ({
      getImage() {
        return section.querySelector('.parallax-image');
      },
      // more section parallax methods here
    }),
    methods = {};


  methods.getSections = () => _sections;
  methods.someOtherMethod = (arg) => {
    return arg;
  }

  // Init
  [..._sections].forEach(section => section.parallax = _parallax.call(null, section));

  // Expose methods
  return methods;

};


// Init Parallax on some parent
const myPar = Parallax('#container');

// Testing stuff:
console.log( document.getElementById('test').parallax.getImage() );
console.log( myPar.getSections() )
<div id="container">

  <div class="parallax-section">
    <img class="parallax-image" src="//placehold.it/20x20/0bf">
  </div>

  <div id="test" class="parallax-section">
    <img class="parallax-image" src="//placehold.it/20x20/f0b">
  </div>

</div>

Вышеуказанный getImage() является более простым способом вашего getImage() метода. Если section.querySelector('.parallax-image') не найдет изображение, оно вернет null - так же, как ваш код.

...