这个JavaScript模式是如何调用的，如何正确使用它？

我已经接管了一个现有的项目，该项目以以下方式使用JavaScript。我想了解如何/为什么这样做，并获得关于如何有效使用它的更多信息。这个模式有没有名字，我可以做更多的研究

index.html（在

之前）

navigation.js（缩写…）

除了了解这种模式是什么以及为什么要使用它之外，我还有一个实际问题：

navigation.js控制器负责我们的元素

.navigation

。现在，如果有多个.navigation，则与一个.navigation元素交互会导致所有.navigation元素对交互做出反应

如何启动控制器来控制每个导航元素？（我希望我的词汇在这里是正确的）

如果我使用jQuery以以下方式调用控制器（inside index.html），它会起作用，但感觉不对劲：

$('.navigation').each(function() {
    var navigation = new window.Navigation();
    window.App.navigation = navigation;
    window.App.navigation.init(this);
});

---

这是一个JavaScript对象文本或单例模式。下面是一个非常基本的例子：

<script>

var exampleObj = {

    settings : {
        'test' : 'example'
    },

    alertSettings : function(){
        alert(this.settings.test);
    },

    gotCha : function(){
        var self = this;
        $('body').animate({"background-color":"red"},2000,function(){
            alert(self.settings.test);
            self.alertSettings();
        });
    },

    init : function() {
        this.alertSettings();
        this.gotCha();
    }

}

exampleObj.init(); // triggers the events

</script>

变量exampleObj={
设置：{
“测试”：“示例”
},
alertSettings:函数（）{
警报（this.settings.test）；
},
明白了：函数（）{
var self=这个；
$（'body'）。动画（{“背景色”：“红色”}，2000年，函数（）{
警报（自我设置、测试）；
self.alertSettings（）；
});
},
init:function（）{
此参数为.alertSettings（）；
这个。明白了（）；
}
}
例如obj.init（）；//触发事件

Init触发

alertSettings（）

方法，然后

gotCha（）

。您会注意到

gotCha（）

将

重新声明为
self
。这是因为
gotCha（）
中的函数中有一个函数，而
此
仅限于它所包含的函数。因此，内部函数引用的是
self
别名（或clojure），因为它要提醒的变量位于外部函数
this
中

又快又脏。我希望这有帮助。*需要jQuery
someMethod
通过引用
此
看起来有一个bug，也建议不要使用
窗口。
而直接引用变量。你确定这样做有效吗？在脚本中插入一些警报或控制台日志，以查看是否触发了JS。是的，它可以工作。我刚刚简化了代码，因为原来的东西在这里发布的时间太长了。回答得好。对于其他点，
$（'.navigation'）。每个（function（）
每个都是不必要的。一个类命令将自动为所述类的所有元素触发。如果您只想调用一个，请给它一个id，或使用遍历选择器，如
：n子（n）
或
：first（）
etcIf我想将事件附加到我将使用的单个元素上。bind（），然后引用被单击的元素，如so
$（'.classString'）.bind（'click'，function（e）{$（e.target）.css（'background-color'：'red'）；alert（'woot'）；}）
假设我有两个元素。导航…我希望它们的行为相同。例如，如果我单击.open按钮，我想滑动.navigation打开或其他任何内容。但是，如果我想打开导航A，我当然不想同时打开导航B。但这正是目前正在发生的事情，除非我使用jqueryy方法。使用
$（''）.bind（）
将事件附加到元素。请参阅前面的注释。
window.Navigation = (function () {
return function () {
    return {
        scope: undefined,
        someElement:undefined,

        init: function (pScope) {
            this.scope = pScope;
            this.someElement = $(this.scope.querySelectorAll('.some-element'));
            this.someMethod();
        },
        someMethod: function() {
            // some jQuery
            if($(this).hasClass('some-class')) {
                self.anotherMethod();
            }
        },
        anotherMethod: function() {
            // some jQuery
            $(this.someElement).show();
            this.yetAnotherMethod();
        },
        yetAnotherMethod: function() {
            // some jQuery
            $(this.someElement).stop().animate({duration:200});
        }
    };
};
}());

$('.navigation').each(function() {
    var navigation = new window.Navigation();
    window.App.navigation = navigation;
    window.App.navigation.init(this);
});

<script>

var exampleObj = {

    settings : {
        'test' : 'example'
    },

    alertSettings : function(){
        alert(this.settings.test);
    },

    gotCha : function(){
        var self = this;
        $('body').animate({"background-color":"red"},2000,function(){
            alert(self.settings.test);
            self.alertSettings();
        });
    },

    init : function() {
        this.alertSettings();
        this.gotCha();
    }

}

exampleObj.init(); // triggers the events

</script>