Javascript 创建jQuery插件的多个实例

下面是一个简单视差插件的源代码：

/*
Plugin: jQuery Parallax
Version 1.1.3
Author: Ian Lunn
Twitter: @IanLunn
Author URL: http://www.ianlunn.co.uk/
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/

(function( $ ){
    var $window = $(window);
    var windowHeight = $window.height();

    $window.resize(function () {
        windowHeight = $window.height();
    });

    $.fn.parallax = function(xpos, speedFactor, outerHeight) {
        var $this = $(this);
        var getHeight;
        var firstTop;
        var paddingTop = 0;

        //get the starting position of each element to have parallax applied to it
        $this.each(function(){
            firstTop = $this.offset().top;
        });

        if (outerHeight) {
            getHeight = function(jqo) {
                return jqo.outerHeight(true);
            };
        } else {
            getHeight = function(jqo) {
                return jqo.height();
            };
        }

        // setup defaults if arguments aren't specified
        if (arguments.length < 1 || xpos === null) xpos = "50%";
        if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
        if (arguments.length < 3 || outerHeight === null) outerHeight = true;

        // function to be called whenever the window is scrolled or resized
        function update(){
            var pos = $window.scrollTop();
            $this.each(function(){
                var $element = $(this);
                var top = $element.offset().top;
                var height = getHeight($element);

                // Check if totally above or totally below viewport
                if (top + height < pos || top > pos + windowHeight) {
                    return;
                }

        console.log(firstTop + " " + pos);

                $this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
            });
        }

        $window.bind('scroll', update).resize(update);
        update();
    };
})(jQuery);

我到底在干什么？创建插件的多个实例

---

可以看到插件本身的演示

不，您没有创建插件的多个实例

您所做的是多次调用此函数：

$.fn.parallax = function(xpos, speedFactor, outerHeight) {

---

这非常好。

您真正看到的是jQuery扩展方法。此方法将对象的内容合并到jQuery原型上，以提供新的jQuery实例方法。 每当看到

fn

属性时，都会看到jQuery原型属性的别名

让我们检查要嵌入的视差脚本中的一些行：

$.fn.parallax = function(xpos, speedFactor, outerHeight) {

这一行是一个新的jQuery原型扩展方法的开始，该扩展方法接受三个参数

下面是一个使用新方法扩展jQuery的更简单的示例

$(function () {
    // declare the new method greenify
    $.fn.greenify = function() {
        // The element that this method is used on will have the color green by using jQuery .css();
        this.css( "color", "green" );
    };

    // Then to use your brand new jQuery extension method simply do this
    $( "a" ).greenify();
    $('.myElem').greenify();
    $('#someElemId').greenify();

});

我们正在使用相同的方法，并将其应用于dom中的不同元素

---

我希望这能让你更清楚地了解到底发生了什么以及扩展方法是如何工作的。

你的“插件”并不是一个插件。它似乎没有保留任何实例信息（通常在元素的data（）上）。您似乎拥有一个基本的jquery扩展方法。您在更新单独的元素时遇到问题了吗？@TrueBlueAussie，不，我没有问题，只是好奇下面的调用

。parallax（）

调用

$.fn.parallax

方法，您有完整的源代码。你认为它的哪一部分会“创建多个实例”？这到底是什么意思？@charlietfl不，不是！因为我在理解code@charlietfl这绝对不是代码审查的问题。关于CodeReview的问题有3个主要要求：1）代码是OP的，2）代码是功能性的，3）代码嵌入问题中。这将立即在第1点上失败。此外，关于理解代码的问题对于CodeReview来说也是离题的。基于您的问题，您似乎没有这样做，因为您清楚地询问您是否正在创建多个实例，但您真正做的是在不同的元素上多次运行相同的扩展方法。“非常好”？毫无疑问，浪费时间反复调用冗余操作不是“完全好的”。我想你是说它没有明显的副作用：）

$(function () {
    // declare the new method greenify
    $.fn.greenify = function() {
        // The element that this method is used on will have the color green by using jQuery .css();
        this.css( "color", "green" );
    };

    // Then to use your brand new jQuery extension method simply do this
    $( "a" ).greenify();
    $('.myElem').greenify();
    $('#someElemId').greenify();

});