Question

我一直在尝试更好地组织我的JavaScript / jQuery，但遇到了对象的问题。

请查看此JSFiddle

基本部分如下：

(function($){

    $.toast = function(params) {
         return new toast(params)
    }

    var toast = (function(params){
        var params = params;
         var show = function()  {
            // getToast() returns jQuery DOM object
            getToast().show();
        }

        // Public API
        return {
            show : show
        }

    });

}(jQuery));

$(document).ready(function(){
    var toast1 = $.toast(params);
    var toast2 = $.toast(params);
    toast1.show();
    toast2.show();
});

麻烦在于我在创建的对象上调用函数。在$(document).ready()函数中，我实例化了2个对象，然后我将其称为show（）。

show（）方法只是更改display属性。

然而，只有一个祝酒词显示出来。

我已经研究过不同的实例化对象的方法无济于事。

我也在＆＃34; new＆＃34;关键字，也无济于事。

我开始使用对象文字来访问更清洁的IS，但我无法将事件绑定到正确的对象。在将绑定函数应用于所有对象的地方发生了奇怪的事情。

我喜欢我实例化祝酒词的方式，所以如果可能的话，我希望$(document).ready()中的代码保持不变。

感谢任何/所有帮助，因为我可能需要朝着正确的方向摇晃。

干杯。

Answer 1

您将getToast定义为全局函数，因为您错过了前面的var语句。所以它应该是：

var getToast = function(){
};

Answer 2

在getToast中，您有这篇文章：

        getToast = function(){

            if ( $toast !== undefined ) return $toast;

            ...
        }

如果存在，则返回现有的$ toast，并且在创建第一个toast时，此类对象存在并随后返回。从我收集的内容来看，这似乎是个问题。

Answer 3

更改功能定义以返回独特的吐司而不是相同的吐司 getToast().show();

＆＃13;

(function($){

    $.toast = function(params) {
         return new toast(params)
    }

    var toast = (function(params){
        var params = params;
         var show = function()  {
            // getToast() returns jQuery DOM object
           //getToast().show();
             alert(params)
        }

        // Public API
        return {
            show : show
        }

    });

}(jQuery));


    var toast1 = $.toast('params1');
    var toast2 = $.toast('params2');
    toast1.show();
    toast2.show();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

JavaScript - 实例化同一个类

3 个答案: