JavaScript

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() on.

show() 方法只是更改显示属性。

然而，只有一个祝酒词出现了。

我研究了实例化对象的不同方法，但无济于事。

我也移动了 "new" 关键字，同样无济于事。

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

我喜欢实例化 toasts 的方式，所以我希望 $(document).ready() 中的代码尽可能保持不变。

Any/all 感谢您的帮助，因为我可能需要正确的方向。

干杯。

Answer 1

在getToast中，你有这块：

        getToast = function(){

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

            ...
        }

这 returns 一个现有的 $toast（如果有的话），并且当创建第一个 toast 时，这样的对象存在并随后返回。据我所知，这似乎是问题所在。

Answer 2

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

var getToast = function(){
};

Answer 3

将函数定义更改为return唯一的toast 不相同的toast getToast().show();

(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();

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

JavaScript - 实例化同一个 class 的多个对象

JavaScript - instantiate multiple objects of the same class

jquery

javascript-objects