javascript - 如何以OO方式编写jquery插件

Question

我写了以下jquery插件。我想做的是，当用户单击链接时，使相关的 div 显示:基于数据属性的 block 。但这个插件不起作用。过去两天我让 bn 试图解决这个问题。但我失败了。

我的 HTML

<div class="container1">
    <a href="#" class="link1" data-link="a">asd</a>
    <div class="window1" data-window="a">
           asd         
    </div>
</div>

<hr>

<div class="container2">
    <a href="#" class="link2" data-link="b">asdf1</a>
    <a href="#" class="link2" data-link="c">asdf2</a>
    <a href="#" class="link2" data-link="d">asdf3</a>
    <div class="window2" data-window="b">
           asdf1         
    </div>
    <div class="window2" data-window="c">
           asdf2        
    </div>
    <div class="window2" data-window="d">
           asdf3         
    </div>
</div>

<script src="jquery-1.11.0.min.js"></script>
<script src="script.js"></script>

<script>

    $('.container1').myPlugin({
        link: $('.link1'),
        container : $('.window1')
    });
    $('.container2').myPlugin({
        link: $('.link2'),
        container : $('.window2')
    });

</script>

插件

   (function ($, window, document, undefind) {

   MyPlugin = {


    init : function (options, element) {
        $.fn.myPlugin.config = $.extend({}, $.fn.myPlugin.config, options);
        var link = $.fn.myPlugin.config.link;                

        link.on('click', this.secondFunc);
    },

    secondFunc : function () {
        var dataLinkId = $(this).data('link'),
            container = $($.fn.myPlugin.config).filter('[data-section="' + dataLinkId + '"]'); 
        container.show();
    }

};

$.fn.myPlugin = function(options) {
   return this.each(function () {
        var rezG = Object.create(MyPlugin);
        rezG.init(options, this);
    });
}; 

$.fn.myPlugin.config = {
    link: $('.link'),
    container : $('.container')
};

   })(jQuery, window, document);

CSS

.window1, .window2 {
    display: none;
}

DEMO

Answer 1

您需要使用 var 来确保您的变量都是本地变量而不是全局变量。

var MyPlugin = {
    // ...
};

此外，在 init 函数中，您正在执行以下操作:

$.fn.myPlugin.config = $.extend({}, $.fn.myPlugin.config, options);

这是覆盖 $.fn.myPlugin.config 这是默认选项。这意味着调用 myPlugin() 的所有元素都将使用相同的配置。您只需在一个实例上设置配置。

this.config = $.extend({}, $.fn.myPlugin.config, options);

您的 secondFunc 没有对对象 (rezG) 实例的引用，因此它无法访问配置。您需要将其传递给 secondFunc()。一种方法是使用闭包来捕获实例。

secondFunc: function (rezG) {
    return function(){
        var dataLinkId = $(this).data('link'),
            container = $(rezG.config.container).filter(function(){
                return $(this).data('window') == dataLinkId;
            });
        container.show();
    };
}

然后你像这样绑定(bind)它:

link.on('click', this.secondFunc(this));

请注意，在 secondFunc 中，您需要使用 config.container(不仅仅是作为对象的 config)，以及您的属性是数据窗口，而不是数据部分。

更新的演示:http://jsfiddle.net/K82gg/7/