javascript - 在每个循环内创建对象实例

Question

在为(简单)网站编写 Javascript 时，我试图变得更加面向对象。我想为页面上的每个视频元素创建一个新对象 vidyo，同时循环浏览它们。这就是我现在所拥有的。这实现了我的功能目标，但我知道必须有更好的方法来组织此代码。

我希望能够在循环后调用 $('video') 上的 vidyo 。我还想让它更像插件，这样我就可以添加选项。

我尝试使 vidyo 成为合法对象，并尝试在循环内创建它的新实例，但这不起作用。

关于如何将这些行变成更强大的东西有什么建议吗？谢谢。

var $win = $(window),
    top = $win.scrollTop(),
    $videos   = $('video');

var vidyo = {
    play: function(video) {
        video[0].play();
    },
    pause: function(video) {
        video[0].pause();
    },
    check: function(vid) {
        var top = $win.scrollTop();
        var videoHeight    = $(vid).outerHeight(true),
            videoHitTop    = $(vid).offset().top,
            videoOffTheTop = videoHeight + videoHitTop;

        if ( top >= videoHitTop && top <= videoOffTheTop ) {
            vidyo.play($(vid));
        } else {
            vidyo.pause($(vid));
        }
    }
}

var checkVideoPosition = function() {
    $videos.each( function( index, el ) {
        vidyo.check(el);
    })
}

$win.on('scroll', checkVideoPosition);

Answer 1

MDN 有一份写得非常好的 Javascript 面向对象编程指南。左侧的链接也是非常有帮助的阅读页面。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

这是一个可以帮助您入门的模板。我不会为您重写所有功能，我只是想引导您走向正确的方向。

function Vidyo (el) {
    this.element = el && el.tagName === "VIDEO" ? el : document.createElement("video");
}

Vidyo.prototype = {

    play: function() {
        this.element.play();
    },

    pause: function () {
        this.element.pause();
    },

    check: function () {
        // ...
    }
}

var $videos = $("video"),
    vidyos = [];

$videos.each(function (i, el) { vidyos.push( new Vidyo(el) ); });

希望这有帮助。我不知道 jQuery 是否有更简单的方法来进行此设置——我从未使用过该库。祝你好运，玩得开心!