将对象分配给 dom 元素并在函数中检索它

Question

我正在尝试使用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()函数中，我想检索视差对象分配到的元素。我该怎么做？

Answer 1

通过具有类似.getImage()的parallax命名空间对象扩展本机Element

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- 就像您的代码一样。