Question

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

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

我尝试将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是否有更简单的方法来设置 - 我从未使用过库。祝你好运，玩得开心！

Answer 2

删除所有全局变量并保持简单。你真的不需要插件或花哨的面向对象的方法。

$(window).on('scroll', function () {
    var top = $(this).scrollTop(),
        $videos = $('video'),
        $inView = $videos.filter(function () {
            var height = $(this).outerHeight(true),
                hitTop = $(this).offset().top,
                offTheTop = height + hitTop;
            return top >= hitTop && top <= offTheTop;
        });
    $inView.each(function () {
        if (this.paused) this.play();
    });
    $videos.not($inView).each(function () {
        if (!this.paused) this.pause();
    });
});

编辑：通过在闭包中定义固定的实用程序函数，可以使这更好一些。这样，每次触发滚动事件时都不会重新定义函数。

$(window).on('scroll', (function () {
    function isInView() {
        var top = $(window).scrollTop(),
            height = $(this).outerHeight(true),
            hitTop = $(this).offset().top,
            offTheTop = height + hitTop;
        return top >= hitTop && top <= offTheTop;
    }
    function playConditionally() {
        if (this.paused) this.play();
    }
    function pauseConditionally() {
        if (!this.paused) this.pause();
    }
    return function () {
        var $videos = $('video'),
            $inView = $videos.filter(isInView);
        $inView.each(playConditionally);
        $videos.not($inView).each(pauseConditionally);
    };
})());

在每个循环中创建对象实例

2 个答案: