JavaScript Namespace example

 

Пример использования объектов JavaScript в качестве просранства имён для размещения функций управления отдельными элементам разметки и исключения засорения глобальной области видимости и как следствие случайного переопределения функций.

Такой подход предлагается для командной разработки шаблонов и макетов, когда разные разработчики (одного это тоже касается) вынуждены согласовывать свой код.

HTML code:

<div id="wrapper" class="visible">
  <a id="closer" href="#">Hide</a><br />
  <a id="opener" href="#">Show</a><br />
  <div id="note">Element visible</div>
  <div id="sample-element">
    <h1>Sample Element Content</h1>
  </div>
</div>

JavaScript code:

    var SampleObject = {
            open: function(element, note) {
                    element.show();
                    note.text('Element now visible');
                    if (!element.parent().hasClass('visible')) {
                            element.parent().addClass('visible');
                    }
            },
            close: function(element, note) {
                    element.hide();
                    note.text('Element now invisible');
                    if (element.parent().hasClass('visible')) {
                            element.parent().removeClass('visible');
                    }
            },
            init: function() {
              var target = jQuery('#sample-element');
              var note = jQuery('#note');

              jQuery('#opener').click(function(event) {
                      SampleObject.open(target, note);
                      event.preventDefault();
              });
              jQuery('#closer').click(function(event) {
                      SampleObject.close(target, note);
                      event.preventDefault();
              });
            }
    };
     
    jQuery(document).ready(function () {
      SampleObject.init();
    });

В данном примере все функции манипулирующие элементом разметки с идентификатором #sample-element компактно собраны в объекте SampleObject, который помимо методов управления содержит и метод инициализации обработчиков событий. Теперь инициализацию всех событий обработки можно собрать в одном месте пследовалельно вызывая соответствующие методы объектов и улучшить читабельность кода. Помимо этого можно при необходимости произвести повторную инициализацию избегая повторов. Особенно это касается случаев, когда код инициализации многословен.

jQuery(document).ready(function(){
  SampleObject.init();
  OneObject.init();
  OtherObject.init();
  AjaxObject.init();
});

/* Если произошло изменение DOM, например в ответ на AJAX */
if (DOMHasChanged()) {
  AjaxObject.init();
  OtherObject.doSomething();
}

Live Example:

Hide
Show
Element visible
Sample Element Content