1

好的，所以我是 jQuery 插件游戏的新手，我读了很多书，似乎有 2700 万种方法来编写 jQuery 插件。我想要在我的插件中做的是使用最干净的方式来处理事件。

以这个基本插件模式为例：

;(function ( $, window, document, undefined ) {

    var pluginName = 'MyPlugin';
    var defaults = {
            propertyName: "value"
    };

    function Plugin( element, options ) {
            this.options = $.extend( {}, defaults, options );
            this._defaults = defaults;
            this._name = pluginName;
            this.element = element;
            this.init();
    }

    Plugin.prototype = {
            init: function() {
                    // SOME INIT FUNCTION
            },
            someMethod: function(el, options) {
                    // DO SOMETHING ELSE
            }
    }

    $.fn[pluginName] = function(options) {
            return this.each(function() {
                    if (!$.data(this, 'plugin_' + pluginName)) {
                            $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
                    }
                    else if ($.isFunction(Plugin.prototype[options])) {
                            $.data(this, 'plugin_' + pluginName)[options]();
                    }
            });
    }

})( jQuery, window, document );

然后我们有这个简单的html：

<a href="a link to somewhere">My Link</a>

假设在我们的插件中，我们希望在单击链接时提醒 href 并阻止默认操作。显然，这是一个非常愚蠢的例子，我想做的事情更加激烈，所以请不要说“你不需要插件”，因为这不是重点。

所以我们在我们的链接上初始化我们的插件：

$(document).ready(function(){
    $('a').each(function(){
        $(this).MyPlugin();
    });
});

我不知道是否有办法添加 click: 方法并自动调用它。或者也许有某种内部事件绑定？

4

2 回答 2

1

我只想在 init 函数上添加一个点击事件，所以它更干净

Plugin.prototype = {
    init: function() {
        // DO INIT

        $(this.element).on("click", function(e){
            e.preventDefault();
            alert($(this).attr("href"));
        });
    },
    someMethod: function(el, options) {
        // DO SOMETHING ELSE
    }
};

或者，

你可以把它放在一个单独的方法上：http: //jsfiddle.net/nashio/PDyEd/4/

;(function ( $, window, document, undefined ) {

    var pluginName = 'MyPlugin';
    var defaults = {
        propertyName: "value"
    };

    function Plugin( element, options ) {
        this.options = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.element = element;
        this.init();
        this.attachEvents(this.element, this.options);
    }

    Plugin.prototype = {
        init: function() {
            // DO INIT
        },
        attachEvents: function(el, options) {
           $(el).on("click", function(e){
                e.preventDefault();
                alert($(this).attr("href"));
            });
        }
    };

    $.fn[pluginName] = function(options) {
        return this.each(function() {


            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }
            else if ($.isFunction(Plugin.prototype[options])) {
                $.data(this, 'plugin_' + pluginName)[options]();
            }
        });
    }

})( jQuery, window, document );

$(document).ready(function() {
    $('a').MyPlugin(); 
});
于 2013-03-27T07:30:18.430 回答
0

编辑2：我第一次是对的，呵呵。我以前没有使用过这种模式，但我喜欢它。

所以在你的插件原型方法中，你可以访问each循环中的元素，所以你可以在那里绑定一个点击，或者你想要的任何其他东西！

$.fn[pluginName] = function(options) {
    return this.each(function() {
        $(this).click(function(event) {
            event.preventDefault();
            alert($(this).attr('href'));
        });

        if (!$.data(this, 'plugin_' + pluginName)) {
            $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
        }
        else if ($.isFunction(Plugin.prototype[options])) {
            $.data(this, 'plugin_' + pluginName)[options]();
        }
    });
}

此外，您的代码中缺少{该function Plugin行。

看到它在这个小提琴中工作：http: //jsfiddle.net/PDyEd/

于 2013-03-27T06:24:25.810 回答