пример ООП?

[olechic]

приведите пожалуйста пример применения ООП в JS на реальном Web-примере?????????? А то теории начитался, а применить не знаю как!!

[Viper]

А в теории, которую ты читал не приводили примеры?

И не стоит зацикливаться на ООП(конечно, это выбор каждого - ООП или прототипы, некоторые и спешивают...). Не если ты еще не в курсе, то советую сначала ознакомиться с этим видео.

Возьми любой плагин на JS или библиотеку и смотри как постоен код: через ООП или прототипы. И разберайся...

Edited May 8, 2012 by Viper

[dostel1]

И не стоит зацикливаться на ООП(конечно, это выбор каждого - ООП или прототипы, некоторые и спешивают...). Не если ты еще не в курсе, то советую сначала ознакомиться с

почему не стоит?А как же разработка причандалов на js?

[dostel1]

Лекция конечно не очень.Особенно ,когда он про прототип говорит.Он не может объяснить трудные места

[SelenIT]

это выбор каждого - ООП или прототипы

Сорри, нельзя ли пояснить? Я до сих пор наивно полагал, что прототипы — лишь один из стилей ООП, а не альтернатива ему...

[Viper]

почему не стоит?

В JS есть 2 стиля пограммирования. Зачем зацикливаться на одном из них? По ходу работы ему(если он захочет стать профессионалом), просто прийдеться освоить прототипы и научиться ими пользоваться, так как скрипты многих крупных сайтов и некоторых библиотек постоены на прототипном наследованиии. А переходить с ООП(в его класическом виде) на прототипы, многим очень сложно...ИМХО

А как же разработка причандалов на js?

Всмысле? Можете уточнить вопрос?

Лекция конечно не очень.Особенно ,когда он про прототип говорит.Он не может объяснить трудные места

Это не лекция... Это доклад на конференции Web Standards Days 22. И он только для ознакомления. Я предположил, что olechic, незнаком с прототипным наследованием. И посчитал, что ему в будущем будет проще, если он сразу окунеться в эту тему и, возможно, холивар по выбору между ООП и прототипами. Хотя, насколько я вижу/слишу, большенство(если не все) "сильных" JS прогеров в итоге выбирают/предпочитают Прототипы...

Сорри, нельзя ли пояснить? Я до сих пор наивно полагал, что прототипы — лишь один из стилей ООП, а не альтернатива ему...

Не стоит. Вы, в общем то, правы. Со стороны теории: да, он всего лишь один из стилей/подходов ООП. Но на практике: ОПП с наследованием в JS реализован только в виде Прототипов, в JS нету классов, который являеться 2-м(и самым популярным) из подходов программирования. И что бы разделить эти 2 подхода в JS: с использование прототипов и без них, стали називать 2-й подход - ООП в JS(он основан на callback'ах). Я не знаю откудова это пошло. Я просто уже прывык к этому, каюсь). И ваше замечание заставило, так... хорошенько задуматься). Для меня тоже в этом вопросе все слегка запутанно...) В общем, когда я вижу упонимание про ООП в JS, я это воспринимаю как подход без прототипов, постоенный на callback'ах.

Или, может, есть правильное название этому 2-му подходу, которое везде используеться в разговоре? А я туплю?)

Edited May 8, 2012 by Viper

[ruslan.savenok]

Есть очень хорошая книга — Object Oriented JavaScript автора Stoyan Stefanov. Не знаю правда есть ли на русском, советую начать с нее.

[s0rr0w]

На JS можно писать и в функциональном стиле.

[ruslan.savenok]

Не стоит. Вы, в общем то, правы. Со стороны теории: да, он всего лишь один из стилей/подходов ООП. Но на практике: ОПП с наследованием в JS реализован только в виде Прототипов, в JS нету классов, который являеться 2-м(и самым популярным) из подходов программирования. И что бы разделить эти 2 подхода в JS: с использование прототипов и без них, стали називать 2-й подход - ООП в JS(он основан на callback'ах). Я не знаю откудова это пошло. Я просто уже прывык к этому, каюсь). И ваше замечание заставило, так... хорошенько задуматься). Для меня тоже в этом вопросе все слегка запутанно...) В общем, когда я вижу упонимание про ООП в JS, я это воспринимаю как подход без прототипов, постоенный на callback'ах.

Или, может, есть правильное название этому 2-му подходу, которое везде используеться в разговоре? А я туплю?)

Что за бред? ООП это объектно-ориентированое-програмирование, в одних языках это классы, в других это прототипы, хотя бы википедию посмотрите. Не путайте ООП и паттерны, паттернов не 2, их сотни.

[Viper]

Что за бред? ООП это объектно-ориентированое-програмирование, в одних языках это классы, в других это прототипы, хотя бы википедию посмотрите.

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

Не путайте ООП и паттерны, паттернов не 2, их сотни.

И где же вы там увидели намек на паттерны?

На JS можно писать и в функциональном стиле.

Да, точно. Про него я и говорил, как про 2-й стиль/подход... Что-то я тут всех запутал...

Edited May 9, 2012 by Viper

[olechic]

Что за бред? ООП это объектно-ориентированое-програмирование, в одних языках это классы, в других это прототипы, хотя бы википедию посмотрите.

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

Не путайте ООП и паттерны, паттернов не 2, их сотни.

И где же вы там увидели намек на паттерны?

На JS можно писать и в функциональном стиле.

Да, точно. Про него я и говорил, как про 2-й стиль/подход... Что-то я тут всех запутал...

А пример то будет????

[ruslan.savenok]

olechic, какие конкретно вам примеры нужны?

В основном я использую эти паттерны:

Для jQuery плагинов — http://wintoni.us/post/123029056/jquery-plugin-patterns

Для стандартных модулей:

var myModule = function () {
  // private
  function _private() {
  } 

  // public
  return {
    public: function() {

    }
  }
}

Для паблик модулей

var module = {
  someFucntion: function () {

  },

  someFucntion2: function () {

  }
}

Для структурирования обработчиков и распределение их по файлам:

var myProject = myProject || {};
myProject.handler = myProject.handler || {};

myProject.init = function (obj) {
  for (var item in obj) {
    if (typeof obj[item] == 'function') {
      var method = obj[item]();
      if (method && method.init) method.init();
    } else {
      this.init(obj[item]);
    }
  }
}

myProject.handler.topCarousel = function () {
  // handler code
}

myProject.contactsPage = function () {
  // handler code
}


$(document).ready(function () {
  myProject.init(myProject.handler);

  if($('html').hasClass('contacts')) myProject.init(myProject.contactsPage);
}

[olechic]

olechic, какие конкретно вам примеры нужны?

В основном я использую эти паттерны:

Для jQuery плагинов — http://wintoni.us/post/123029056/jquery-plugin-patterns

Для стандартных модулей:

var myModule = function () {
  // private
  function _private() {
  } 

  // public
  return {
    public: function() {

    }
  }
}

Для паблик модулей

var module = {
  someFucntion: function () {

  },

  someFucntion2: function () {

  }
}

Для структурирования обработчиков и распределение их по файлам:

var myProject = myProject || {};
myProject.handler = myProject.handler || {};

myProject.init = function (obj) {
  for (var item in obj) {
    if (typeof obj[item] == 'function') {
      var method = obj[item]();
      if (method && method.init) method.init();
    } else {
      this.init(obj[item]);
    }
  }
}

myProject.handler.topCarousel = function () {
  // handler code
}

myProject.contactsPage = function () {
  // handler code
}


$(document).ready(function () {
  myProject.init(myProject.handler);

  if($('html').hasClass('contacts')) myProject.init(myProject.contactsPage);
}

Любые примеры, что бы понять применимость ООП в JS?В вашем примере я слабо понимаю.Может есть что-то попроще?

[ruslan.savenok]

olechic, проще только писать код без ооп

У вас есть конкретная задача, к которой вы хотите применить ооп?

[xeLL]

Мне кофескриптовые классы очень нравятся

Edited May 10, 2012 by xeLL

[Svatov]

Если не можете читать код выше, наверное вы плаваете в основах. Советую обратиться за советом в книге JavaScript: The Definitive Guide (David Flanagan). Если можете читать на англ. советую читать 6е издание, потому как в переводе на русский только 5е пока, которое устарело, хотя подчерпнуть основы можно и там.

Мне кофескриптовые классы очень нравятся

Edited May 10, 2012 by Svatov

[xeLL]

Svatov , что не так?

class Classes.Widgets.UserPosts extends Classes.Proto.ItemsList

Например, говорит о чем-нибудь тебе такое? ООП-интерфейсы? Не, не слышал?

Svatov, что конкретно там устарело? ECMA-262 spec? лол

[Svatov]

Svatov , что не так?

class Classes.Widgets.UserPosts extends Classes.Proto.ItemsList

Например, говорит о чем-нибудь тебе такое? ООП-интерфейсы? Не, не слышал?

Svatov, что конкретно там устарело? ECMA-262 spec? лол

CoffeeScript is a little language that compiles into JavaScript

[xeLL]

Ну а сам то ты пробовал кодить на кофе, я вот к "сырому" js после такого сахара очень не хотя возвращаюсь)

[Great Rash]

Сахар-шмахар... есть мнение, что вы просто привыкли писать на серверном языке и поэтому в JS вам неудобно. Надо просто понять и принять, что он другой, что там нет интерфейсов, что там нет многого из того, что есть в компилируемых языках например.

Почему люди не пытаются реализовать на PHP синтаксис C++, скажем, а? Чо вы пристали к бедному и несчастному JS?

[xeLL]

Я не делаю перед js лицо кирпичом, но я шатал такие портянки хавать

var __hasProp = {}.hasOwnProperty,
  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };

Classes.Widgets.UserPosts = (function(_super) {

  __extends(UserPosts, _super);

  UserPosts.name = 'UserPosts';

  function UserPosts() {
    return UserPosts.__super__.constructor.apply(this, arguments);
  }

  return UserPosts;

})(Classes.Proto.ItemsList);

[Great Rash]

Зачем так сложно?

// Первый объект
var Obj_1 = function() {
  this.prop_1 = 1;
  this.prop_2 = 2;
};

Obj_1.prototype.method_1 = function() {
  return 'm_1';
}

Obj_1.prototype.method_2 = function() {
  return 'm_2';
}
//==================

// Второй объект
var Obj_2 = function() {
  this.prop_3 = 3;
};

Obj_2.prototype = new Obj_1(); // наследуем от первого
Obj_2.prototype.constructor = Obj_1; // устанавливаем инстанс

Obj_2.prototype.method_3 = function() {
  return 'm_3';
}
//===================

var obj = new Obj_2();

console.log(obj.prop_1);
console.log(obj.prop_2);
console.log(obj.prop_3);

console.log(obj.method_1);
console.log(obj.method_2);
console.log(obj.method_3);

[Nekromancer]

Obj_2.prototype = new Obj_1(); // наследуем от первого

Это неправильное наследование.

Правильное наследование в JS:

Obj_2.prototype = Object.create(Obj_1.prototype);

[Great Rash]

Это почему же оно неправильное?

[Nekromancer]

var FirstClass = function FirstClass(element) {
	this.element = element;
	element.addEventListener('click', function() {
		alert(1);
	});
},
SecondClass = function SecondClass() {

	FirstClass.apply(this, arguments);

	this.element.addEventListener('click', function() {
		alert(2);
	});

};

//Which way will do not throws error?

//First

try {
	SecondClass.prototype = new FirstClass();
} catch (e) {
	alert('First method is wrong ');
}

//or second ?

try {
	SecondClass.prototype = Object.create(FirstClass.prototype);
} catch (e) {
	alert('Second method is wrong ');
}

//So new object instanced of SecondClass still instance of FirstClass?

alert((new SecondClass(document.body)) instanceof FirstClass);

//It's good pattern which used by all JS community

[Great Rash]

Так, еще раз. Где в моем коде не работает наследование?

Для чего в примере FirstClass.apply(this, arguments);? Как это Object.create(FirstClass.prototype); предполагается использовать в ИЕ ниже 9?