Pull to refresh

Javascript. Отделяем мух от котлет

Reading time3 min
Views711
Правя часто за кем-нибудь javascript-код (да и не только его) часто сталкиваешься с
ситуацией, когда программист Вася 'не отделяет мух от котлет'. Это значит мешает глобальные переменные
вместе с функциями, даже, если эти переменные и функции как-то соотносятся друг с другом.

Потом возникает случай, когда Вася уходит, оставляя код, а Петя приходит и вынужден работать с кодом Васи.

Ситуация для Пети не самая приятная. Чтобы как-то поберечь его нервы и сберечь время и нужен javascript шаблон, который я хочу предложить:

var someComponent = (function() {
 var self = this;

 // Methods
 this.method1 = function() {
 }
 this.method2 = function() {
 }
 this.method3 = function() {
 }

 // Constructor
 this.prop1 = 'foo';
 this.prop2 = 'bar';
 this.prop3 = 'qaz';

 return this;

})();

* This source code was highlighted with Source Code Highlighter.

Казалось бы ничего сверхестественного, но почему то многие программисты или не хотят или
забывают объединять данные и методы.

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

К тому же еще один плюс такого подхода является то, что мы можем легко получить доступ к контексту обьекта из callback-функций.
Пример из рабочего кода:

var periodInfo = (function(sportKind) {
 var self = this;
 
 this.sportKind = sportKind || 'football';
 
 this.hintBox = null;
 this.hintBoxTop = null;
 this.hintBoxLeft = null;
 
 this.inputElement = null;
 this.currentPeriod = 1;
 /**
 * Show panel.
 */
 this.show = function() {
  $('#goals-panel').show();
 }
 /**
 * Hide panel.
 */
 this.hide = function() {
  $('#goals-panel').hide();
 }
 /**
 *
 */
 this.clear = function() {
  $('[class~="home"]').remove();
  $('[class~="away"]').remove();
 }

 $(document).ready(function() {
  // Доступ к контексту объекта через замыкание.
  self.hintBox = $('#hint-box');
  $(document).click(function() {
   self.hide_hint_box();
  });
 });

 return this;
})();


* This source code was highlighted with Source Code Highlighter.


Вот так можно просто и эффективно облегчить жизнь себе и другим людям.

// Update
С учетом всего сказанного в комментариях получаем:
function Person(firstname, lastname, age) {
 var self = this;
 // Assign values to private members. 
 var firstname = firstname;
 var lastname = lastname;
 var age = age || 'unknown';
 
 // Private method.
 this.name_fix_up = function(name) {
  return name[0].toUpperCase() + name.substr(1);
 }
 
 // Public methods.
 return {
  get_age: function() {
   return age;
  },
  get_name: function() {
   return self.name_fix_up(firstname) + ' ' + self.name_fix_up(lastname);
  }
 }
}

var p = new Person('vasya', 'pupkin', 23);
alert("It's " + p.get_name() + ', he is ' + p.get_age() + ' years old.'
// Trying to access private method.
p.name_fix_up('sergey');

* This source code was highlighted with Source Code Highlighter.


Шаблон с поддержкой приватных/публичных методов и свойств.
Tags:
Hubs:
Total votes 19: ↑12 and ↓7+5
Comments16

Articles