jQuery 插件初始化绑定事件到窗口滚动 - 如何传递 $this？

Question

我的第一个插件使用适当的架构完成，但我一直坚持如何将事件侦听器应用于 $(window).scroll 以将 globalMessage 固定到窗口顶部。可以在此处查看完整的插件：https://gist.github.com/937792，但相关位是下面的 init。

设置修改目标元素的 css 属性的窗口事件侦听器的最佳方法是什么？

(function($){

    var methods = {
        init: function(options) {

            var $this = this;
            var opts = $.extend({}, $.fn.globalMessage.defaults, options);
            var data = $this.data('globalMessage');

            // init global data
            if ( ! data ) {
                $this.data('globalMessage', {
                    settings : opts
                });

                $(window).bind("scroll.globalMessage", function() {

                    // ----------
                    // HOW TO ACCESS both $this (defined outside this context)
                    // and the scrollTop value to change top css val?
                    //-----------
                    $this.css("top", $(window).scrollTop());

                });

                $this.bind('click.globalMessage', methods.hide);

            }

            return $this;
        },
        ...[other funcs]...
    }

    ...[main entry point etc]...

})(jQuery);

Answer 1

以正确的方式将变量传递给事件：

$(window).bind("scroll.globalMessage", {foo:'bar'}, function(e) {
   alert(e.data.foo); // alert 'bar'
});

Answer 2

如果您考虑一下，您的 methods 对象的上下文中没有 this。所以你需要通过init()调用传入：

(function($){

    var methods = {
        init: function(sel, options) {

            var $this = $(sel);

然后，当您调用插件时，将 this 传递给您的 init() 方法：

$.fn.yourPlugin = function(method) {
    if (!this.length) {
        return this;
    }
    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return methods.init(this, arguments);
    } else {
        $.error('Method ' +  method + ' does not exist on jQuery.yourPlugin');
    }
};

我唯一要注意的是，在设置 $this 变量时，它实际上是一个 jQuery 对象，而不是特定元素。所以我用过：

(function($){

    var methods = {
        init: function(sel, options) {

            var $sel = $(sel);

而且，就在事件处理程序中使用 $this 而言，您需要重新定义它：

$(window).bind("scroll.globalMessage", function() {
    $this = $('#the_selector_for_your_element'); // Maybe $(this)?
    $this.css("top", $(window).scrollTop());
});