Question

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

index.html（</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});
        }
    };
};
}());

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

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

如何触发控制器来控制每个.navigation元素？（我希望我的词汇在这里是正确的）

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

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

Answer 1

这是一个JavaScript Object Literal或Singleton模式。这是一个非常基本的例子：

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

快速而肮脏。我希望这有帮助。 * 需要jQuery

如何调用此JavaScript模式以及如何以正确的方式使用它？

1 个答案: