Как правильно использовать ООП в JavaScript?

Question

[psyhO_octopus]

Всем привет.

Чем больше я пишу кода тем больше мне он не нравится. Хотел бы писать нормальный ООП код. Я хорошо понимаю как рабоют прототипы, наследование и т.д., но не знаю как его применить когда создаю интерфейсы работающие с DOM.

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

Посоветуйте в какую сторону смотреть, что почитать.

P.S. Только фрэймворки не советуйте, пожалуйста .)

Answer 1

[UbuRus]

В JavaScript ООП не нужно.
Используйте модульность: largescalejs.ru

Почитать:
habrahabr.ru/post/240219

Comments

[psyhO_octopus]

Спасибо, почитаю

Answer 2

[Itvanya]

Научись писать модули, разделать замыканием открытые и закрытые куски кода для объекта, созданного через конструктор. Можно неплохо научиться писать ООП на JavaScript, учась писать годные анимации.

Comments

[psyhO_octopus]

Про анимации не очень понял

[Itvanya]

@psyhO_octopus: чтобы писать хорошие многоступенчатые анимации, нужно хорошо разбираться в ООП в принципе.

Answer 3

[Константин Китманов]

Работу с DOM надо инкапсулировать либо в шаблонизацию, либо в двухстороннее связывание. А вот когда будете писать шаблонизатор и ViewModel, тогда-то ООП и пригодится.

Так же ООП пригождается в сложной бизнес-логике

Answer 4

[aush]

https://ru.wikipedia.org/wiki/TypeScript
http://www.typescriptlang.org

Comments

[UbuRus]

Выкиньте это Г откуда взяли.
Да еще от M$
Бррр

[aush]

@UbuRus: лесом

[UbuRus]

www.walkercoderanger.com/blog/2014/02/typescript-i...

[aush]

@UbuRus: вы сами то эту статью хоть прочитали?

[UbuRus]

@aush: "I conclude that TypeScript is not the answer." я да, а вы нет

[UbuRus]

@aush: Так и быть, скажу по-русски, а то опять не поймете: TypeScript это не решение "проблемного" javascript'а. И писать на нем не имеет смысла. Так же как и привносить ООП подход поверх JS. Это не работает, это не будет работать. Все кто начинает транслировать что-то в JS, приходит к тому, что учит JS. А тем более поделие от говнософта.

[aush]

@UbuRus: в этой же строчке автор пишет: "If you love JavaScript, warts and all, but wish it had classes, modules, interfaces and static typing then TypeScript is the answer.". Это как раз то, что надо автору вопроса. Я полностью согласен с вашим ответом выше "В JavaScript ООП не нужно", т.е. с тем, что не нужно писать на JavaScript к ОО парадигме. Нет смысла писать в оо-стиле на асме или, вообще, в байт-коде, но можно писать в оо-стиле на шарпе или джаве, которые, в конечном счете, окажутся байт-кодом. Тут та же самая история. Нужно уже просто начать воспринимать JavaScript как байт-код для браузера и создавать новые абстракции, как это сделали в MS с тайп-скриптом.

[UbuRus]

@aush: только дело в том, что классов вы не получите :) будет иллюзия, за которой скрываются конструкции JS. И эта абстракция течет. На JS пишется куда более красивый и быстрый код чем на TS.

[aush]

@UbuRus: Сколько лет JS, сколько TS - конечно, у них там еще не все идеально. Почему вы называете классы TS иллюзией? Если они выглядят как классы и ведут себя как классы, то, на мой, взгляд, они является классами. Ваш код на JS - это тоже иллюзия, в конечном счете все оказывается 1 и 0 и никакой красоты там не остается. На JS пишется красивый и быстрый код, т.к. в поисках решения проблемы того, что естественным образом на JS код получается уродливым и медленным, уже сломано миллион копий, придумана куча паттернов и заоптимизированны JS-движки. Я не говорю, что JS - плох, я говорю о том, что TS - это инструмент, который позволяет решить некоторые задачи эффективнее, чем JS. И, судя по вопросу ОПа, вполне возможно, что он как раз в той ситуации, в которой TS может ему помочь.

[UbuRus]

@aush: проблема у ТСа в том, что он не понимает как писать хороший код на JS, что он не хочет взять ангулар и научиться писать директивы, а не в том что тут нужен зачем-то ООП.

[UbuRus]

@aush: "Почему вы называете классы TS иллюзией" потому что TS оперирует на том же уровне что и JS. Но не создает нового уровня абстракции, он пытается наложить абстракции ООП на абстракции ФП. Если бы это можно было делать эффективно, то очевидно не существовало ООП и ФП как отдельные самодостаточные парадигмы.

[aush]

@UbuRus: Как раз ООП и ФП прекрасно живут вместе. Я, например, люблю функциональный стиль и активно его использую, хоть и пишу на C#. Вот, есть хорошая статья - blog.ploeh.dk/2014/03/10/solid-the-next-step-is-fu... там C# и F#, но, думаю, идею уловить это вам не помешает, почитайте, может вам будет интересно.

Ну и JS - это таки не ФП.

[UbuRus]

@aush: Справедливо, на ПОП ООП накладываем, суть не меняется.

Answer 5

[psyhO_octopus]

Я вот что имел ввиду. Допустим я делаю какую то панель. На панели есть кнопки. При каких то событиях кнопки могут быть в состоянии loading или disabled, например. Можно сделать класс Panel и когда произойдет какое-то событие находить кнопку и ставить класс для состояния loading, например. А можно сделать еще один класс Button, который имеет метод для смены состояний. Внутри Panel писать что-то вроде var successBtn = new Button(...) и уже работать с кнопка не как с нодой, а как с объектом.

Пример простой, конечно, но думаю суть раскрывает. Т.е. хочется научиться разбиравать интерфейс на части и работать с ними как с объектами, а не создавать один большой класс и там писать лапшу по работе с DOM

Answer 6

[Sergey Romanov]

P.S. Только фрэймворки не советуйте, пожалуйста .)

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

Для примера, так решили эту задачу Microsoft. В приложениях которые пришутся на яваскрипте используются котовые методы для создания классов, и для их вызова.

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

Но найтивно на голом яваскрите писать красивый ООП код НЕВОЗМОЖНО.

Comments

[psyhO_octopus]

Т.е. до появления ангуляров не было хорошо ОПП кода?

[Sergey Romanov]

@psyhO_octopus: ну зачем так? Все же понятно. Я просто советую ангуляр так как я ангуляр евангелист. Но и до него и кроме него есть и другие решения. Если вам не нужен ответ ни чей, то не надо писать вопросов. Если вы и так все знаете то зачем спрашивать.

Answer 7

[Alexander Kaloshin]

Посмотрите как реализовано создание в JS класса из CoffeeScript.
Используйте prototype

И да, нет тут смысла даже думать про фреймворки.

Comments

[psyhO_octopus]

Александр, увы знание прототипов и классов не помогает писать ООП код. Я хорошо знаю работу прототипов, наследование и т.д. Но как начат это использовать для построения интерфейсов не знаю.

[Alexander Kaloshin]

psyhO_octopus - ну для примера:

1. сделайте через прототип класс пользователя и например класс-синглтон нотификаций
2. после инициализации скриптов - сделайте объект пользователя и синглтон нотификицй
3. получите все нотификации для данного пользователя

```javascript
var User = function(id){
this._id = id;
}

// callback
User.prototoype.getNotifications = function (callback) {
return notifications.find(this._id, callback);
}

var user = new User();
user.getNotifications(function(items){
console.log(items);
});

```

как нибудь так :)

[psyhO_octopus]

Это все просто пока не надо работать с DOM и CSS

[Alexander Kaloshin]

а в этом тоже нет никаких проблем.
напишите класс, отвечающий за работу с DOM, и вызывайте его как и обычный метод класса...

например

alert.prototype.show = function (text){
$('#alert').text(text).fadeIn();
}