将javascript对象应用于多个实例的干净方法答案

【问题标题】：Clean way to apply javascript object to multiple instances将javascript对象应用于多个实例的干净方法
【发布时间】：2017-03-15 21:54:05
【问题描述】：

真的希望通过这个来更好地理解面向对象的 javascript，并为这个场景找到一些最佳实践。假设我有一个 javascript 对象，例如：

SideSlider = {
        rightArrow: '.controls i.right',
        dot: '.controls .dot',
        slide: '.slide',
        init: function() {
            $(this.rightArrow).click(this.nextSlide.bind(this));
            $(this.leftArrow).click(this.prevSlide.bind(this));
            $(this.dot).click(this.dotClick.bind(this));
        },
        nextSlide: function() {
            var activeSlide = $('.slide.active-slide'),
                firstSlide = $(this.slide).first(),
                lastSlide = $(this.slide).last(),
                nextUp = activeSlide.next(),
                activeDot = $(".active-dot"),
                nextDot = activeDot.next();
            activeSlide.removeClass("active-slide");
            nextUp.addClass("active-slide");
            activeDot.removeClass("active-dot");
            nextDot.addClass("active-dot");
            $(this.leftArrow).removeClass("inactive");
            if ( lastSlide.hasClass("active-slide")) {
                $(this.rightArrow).addClass("inactive");
            }

        }
    }

在 DOM 模块的多个实例上使用该对象的正确方法是什么？换句话说，在同一个 DOM 中的两个“幻灯片”实例上使用该对象的功能的“最佳实践”方式是什么

【问题讨论】：

“最佳实践”实际上是基于意见的。这取决于如何使用代码。看起来你实际上是在尝试制作一个 jQuery 插件，互联网上有很多教程。
@JordanBarber 您是否要复制该对象并将其用于不同的 DOM 元素？如果是这样，您可以使用var newSideSlider = Object.assign({}, SideSlider);
@ajaiJothi 我正在尝试在滑块元素的两个 DOM 实例（相同的类）上使用该单个对象

标签： javascript jquery html class oop

【解决方案1】：

您可以为您的对象创建一个构造函数，然后将一个容器元素传递给该构造函数，因此它将仅作用于该 DOM 滑块。在您执行 jQuery 选择器以检索某些元素的任何地方，您都应该将范围设置为给定的容器元素。您可以通过将该容器作为第二个参数提供给 $(..., ...) 来做到这一点。

对象实例是用new SideSlider(container) 创建的。它可能看起来像这样：

function SideSlider(container) {
    // Perform the jQuery selections with the second argument
    // so that the selection returns only elements within the container:
    this.$rightArrow = $('.controls i.right', container);
    this.$dot = $('.controls .dot', container);
    this.$slide = $('.slide', container);
    this.container = container;
    // ... etc
    // Perform init-logic immediately
    this.$rightArrow.click(this.nextSlide.bind(this));
    this.$leftArrow.click(this.prevSlide.bind(this));
    this.$dot.click(this.dotClick.bind(this));
    // ... etc
}

// Define methods on the prototype    
SideSlider.prototype.nextSlide = function() {
    var activeSlide = $('.slide.active-slide', this.container),
        firstSlide = $(this.slide, this.container).first(),
        lastSlide = $(this.slide, this.container).last(),
        nextUp = activeSlide.next(),
        activeDot = $(".active-dot", this.container),
        nextDot = activeDot.next();
    activeSlide.removeClass("active-slide");
    nextUp.addClass("active-slide");
    activeDot.removeClass("active-dot");
    nextDot.addClass("active-dot");
    $(this.leftArrow, this.container).removeClass("inactive");
    if (lastSlide.hasClass("active-slide")) {
        $(this.rightArrow, this.container).addClass("inactive");
    }
    // ... etc
};

// Create & use the two objects:
var slider1 = new SideSlider($('#slider1'));
var slider2 = new SideSlider($('#slider2'));
// ...
slider1.nextSlide();
// ...etc.

如果您支持 ES6，请使用 class 表示法。

【讨论】：

【解决方案2】：

看起来您正在使用 jQuery，我建议您考虑将您的项目变成一个 jQuery 插件。这将允许您为每次使用分配代码，并且滑块和其他类型的 JavaScript 驱动的小部件的开发人员非常普遍地使用它。 jQuery 网站上有一个很棒的教程来说明如何完成这个，可以在这里找到：

https://learn.jquery.com/plugins/basic-plugin-creation/

【讨论】：