如何调用此JavaScript模式，以及如何以正确的方式使用它? [英] How is this JavaScript pattern called and how do I use it in the right way?

问题描述

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

I have taken over an existing project which uses JavaScript in the following way. I would like to understand how/why this is done and get some more information on how to use it efficiently. Is there a name for this pattern so I can do some more research?

index.html(在</body>之前)

index.html (before </body>)

<script src="main.js"></script>
<script src="navigation.js"></script>
<script>
    var navigation = new window.Navigation();
    window.App.navigation = navigation;
    window.App.navigation.init(this);
</script>

main.js(已缩短...)

App = {};
$(document).ready(function(){
    console.log('doc ready');
});

navigation.js(缩短了...)

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

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

Besides understanding what this pattern is and why one would use it, I have a practical question:

navigation.js控制器负责我们的元素.navigation.现在，如果存在多个.navigation，则与一个.navigation元素进行交互会导致所有.navigation元素对交互做出反应.

The navigation.js controller is responsible for our element .navigation. Right now, if there is more than one .navigation, interacting with one .navigation element causes all .navigation elements to react to interaction.

我如何触发控制器自行控制每个.navigation元素? (我希望我的词汇是正确的)

How can I fire the controller to controll each .navigation element for itself? (I hope my vocabulary is correct here)

如果我使用jQuery以以下方式调用控制器(在index.html内部)，它将起作用，但是感觉不正确:

It works if I call the controller (inside index.html) in the following way with jQuery, but it doesn't feel right:

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

推荐答案

这是JavaScript Object Literal或Singleton模式.这是一个非常基本的示例:

That is a JavaScript Object Literal or Singleton pattern. Here's a really basic example:

<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>

Init触发alertSettings()方法，然后触发gotCha().您会注意到gotCha()将this重新声明为self.这是因为gotCha()内的函数内有一个函数，而this受限于(或范围内)包含在其中的函数.因此，内部函数引用self别名(或clojure)，因为它要警告的变量位于外部函数this中.

Init triggers the alertSettings() method and then gotCha(). You will notice that gotCha() redeclares this as self. That's because there is a function within a function inside gotCha() and this is limited (or scoped) to the function it is contained within. So the inner function refers to the self alias (or clojure) because the variable it wants to alert is in the outer function this.

又快又脏.我希望这有帮助. * 需要jQuery

Quick and dirty. I hope this helps. * Needs jQuery

这篇关于如何调用此JavaScript模式，以及如何以正确的方式使用它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！