Как этот шаблон JavaScript называется и как его использовать правильно?

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 для себя? (Я надеюсь, что мой словарный запас правильно здесь)

Это работает, если я называю контроллер (внутри index.html) следующим образом с JQuery, но он не чувствует себя хорошо:

Answer 1

То есть шаблон объекта 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() redeclares this как self. Это потому, что есть функция внутри функции внутри gotCha(), а this ограничена (или ограничена) функцией, в которой она содержится. Таким образом, внутренняя функция относится к псевдониму self (или clojure), поскольку переменная, которую он хочет предупредить, находится во внешней функции this.

Быстрый и грязный. Надеюсь, это поможет. * Нуждается JQuery