Как изолировать код javascript для предотвращения конфликтов?

Я писал много функций javascript и прослушивателей событий, и я хочу переместить их в свое собственное пространство, изолированное от имени, которое не конфликтует, когда я объединяю и уменьшаю его с помощью других файлов javascript.

Я все еще новичок в javascript, поэтому может быть простое решение этого ответа. Я начал с создания объекта javascript:

var MySpecialStuff = {
    init: function(){
        //do everything here
    }
};

Затем в моем html, на странице, которую я хочу использовать, я могу инициализировать этот код:

<script>
    MySpecialStuff.init();
</script>

Но затем метод init начал расти, и мне нужно начать разбивать этот код на более мелкие куски, но я зацикливаюсь на синтаксисе и как устанавливать частные методы/переменные и вызывать их из метода init и другие частные методы. Как я могу это сделать?

Я направился в правильном направлении? Какими другими способами я могу/должен заниматься этим?

Ответ 1

Вы направляетесь в правильном направлении. Вы можете использовать шаблон модуля для создания объекта с частными членами и методами, подобными этому:

var foo = function(){
  var bar = ""; //private

  function funk(){
    //private function    
    return "stuff";
  }

  return{
    getBar: function(){
      return bar;
    },
    init: function(){
      alert(funk());
    },
    randomMember: 0 //public member
  }


}();

Только то, что в блоке возврата является общедоступным, но вы можете вызывать любые частные методы/получать доступ к каким-либо закрытым методам из блока возврата.

Ответ 2

Спасибо Джозефу за ссылку на другой вопрос, который объяснил этот подход:

Другой способ сделать это, который я считаю немного менее ограничивающим, чем литерал объекта:

var MySpecialStuff = new function() {

    var privateFunction = function() {

    };

    this.init = function() {

    };
};

Ответ 3

Мне нравится сегментировать мой код в более модульном подходе. Итак, скажем, у нас есть страница, в которой есть список сообщений в блогах, меню страниц и боковая панель. Я бы закончил с этим:

var blog_controller = {
    init: function(){
      document.getElementById('some_element').addEvent('click', this.handleSomeClick);
      this.applySomePlugin(); 
    },
    applySomePlugin: function () {
      /* do whatever needs to happen */
    },
    handleSomeClick: function () {
      // scope will be element
      this.style.color = 'red';
    }
};
var page_menu_controller = {
    init: function(){
      document.getElementById('some_other_element').addEvent('click', this.handleSomeClick);

    },
    handleSomeClick: function () {
      // scope will be element
      this.style.color = 'blue';
    }
};

... и так далее. Это позволяет упорядочить код по назначению, помогает сохранить ясность области и позволяет повторно использовать элементы кода, которые могут возникать часто (например, если вы в AJAX'd в новом сообщении в блоге, вы можете снова вызвать this.applySomePlugin).

Это, конечно, быстрый и грязный пример, но я надеюсь, что вы поймете идею

Ответ 4

Разделите ответственность кода, который вы положили внутри функции init, в подобъекты основного объекта.

MySpecialStuff = {
    // Variables/constants and everything else that needs to be accessed inside the whole MySpecialStuff object
    init: function(){
        //Do only whats required to be globally initiated.
        this.MainMenu.init(); // Main menu stuff usually is.
    }
};

MySpecialStuff.MainMenu = {
    // Variables / constants that are only important to the MainMenu subobject.
    init: function(){
        //Just the initiation stuff thats related to the MainMenu subobject.
    }
};

MySpecialStuff.SlideShow = {
    // Variables / constants that are only important to the SlideShow subobject. 
    init: function(){
        // Same as for the MainMenu with the difference that nonessential objects can be "fired" when required
    }
};