Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   ООП в javascript. Алгоритмы построения приложений (https://javascript.ru/forum/offtopic/33186-oop-v-javascript-algoritmy-postroeniya-prilozhenijj.html)

dmitry111 13.11.2012 13:34

ООП в javascript. Алгоритмы построения приложений
 
Уже очень долго изучаю объектно-ориентированную методологию в построении приложений.
Понимаю плюсы от такого подхода и уже изучил не мало всяких статей на эту тему.
Но применить практически свои знания не получается.
В тех примерах, которые видел речь идет о примитивных задачах (кролик бежит, кролика накормили..), но на практике получается так, что помимо "кролика" есть еще много не взаимосвязанных сущностей(


У меня есть готовое рабочее приложение. Его можно разделить на 3 части:
1) Функции отвечающие за drag-n-drop.
2) Функции на события нажатия кнопок
3) Функции, работающие с Storage.

Само приложение простенькое:
Пользователь перемещает элементы(1) и сохраняет текущие значения в Storage(3). Работает с текущими сохраненными данными(2).
Как это сделать единым целым я понять не могу(

Вот к примеру - взять jQuery. Там "кролик" - это элемент, jQuery манипулирует им. Все просто.
Но что взять за основу в моем приложении? Или основ должно быть несколько, которые взаимодействуют между собой?

Буду рад любым ссылкам и советам!

dmitriymar 13.11.2012 15:35

Цитата:

Сообщение от dmitry111
Вот к примеру - взять jQuery. Там "кролик" - это элемент

с чего это? кролик там джиквери , а элемент свойство кролика
function a(data){
this.data=data;
.....
}
a.prototype.b=function(data){ действия над this.data..... return this;}
a.prototype.c=function(data){действия над this.data..... return this;}
a.prototype.d=function(data){действия над this.data..... return this;}
a.prototype.я=function(data){действия над this.data..... return какоето значение если метод должен чегото вернуть конкретное..}

$=new a('elem');
$.d(data1).c(data2).....

nerv_ 13.11.2012 15:43

http://javascript.ru/forum/jquery/32...ee-sdelat.html

dmitry111 13.11.2012 16:35

dmitriymar,

ага... я что-то ступил..

DjDiablo 13.11.2012 17:17

ООП это ответ на высокую сложность приложений.
Вы неувидите потребности в ООП работая над jQuery плагином.

Чтобы появилась необходимость решите такую задачу.
Сделайте 3 плагина для отображения содержимого тега TABLE
1) GRID'ом,
2) плиткой
3) списком UL/LI

Надо быть слепым чтобы не заметить уйму общих методов для всех 3х плагинов.
Вот тут и появляется необходимость в ООП.

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

Ещё раз повторю работая над одним плагином, необходимость в ооп возникнет едвали. Она чувствуется в крупных формах, вроде приложений из десятков компонентов, или комплексе/наборе Плагинов

UPD в вашем примере невижу необходимости в наследовании и полиморфизме.
Инкапсуляция, и абстракция - да. Тоесть я непонимаю зачем вам ООП, что в базовый класс выносить собрались ?

nerv_ 13.11.2012 17:42

Цитата:

Сообщение от DjDiablo
UPD в вашем примере невижу необходимости в наследовании и полиморфизме.
Инкапсуляция, и абстракция - да. Тоесть я непонимаю зачем вам ООП, что в базовый класс выносить собрались ?

инкапсуляция и абстракция уже есть ООП :)

DjDiablo 13.11.2012 17:48

Цитата:

nt,z yt exbkb ,kjrc[tve hbcjdfnm b ghj'rnbhjdfnm fh[bntrnehe ghbkj;tybz&
Перевод: тебя не учили рисовать архитектуру приложения ?

Масимальномаксимальный уже не тот, с годами его становится понимать всё сложнее :D

nerv_ 13.11.2012 17:50

Цитата:

Сообщение от DjDiablo
Масимальномаксимальный уже не тот, с годами его становится понимать всё сложнее

годы берут свое :D

dmitry111 13.11.2012 18:35

iMaxmaxmaximus,
10000110001 10001001011 10000111011 10000111110
10000110001 10001001011
10000111010 10000111110 10000111100 10001000011
10001000011 10001000111 10000111000 10001000010 10001001100
)

melky 13.11.2012 19:17

имхо, лучше сейчас начинать учить функциональщину, пока императивщина и ООП не проели мозг до конца.

да и сейчас всё чаще вижу (на том же хабре) статьи про функциональное программирование.

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

dmitriymar 13.11.2012 20:33

Цитата:

Сообщение от melky
я пока начал вникать (вникаю на JS, не на хаскеле), это очень трудно, но это совершенно другой мир - более логичный и простой.

а я изначально функциональный. и после функционалки на ооп переходить тоже тяжко-логика меняется мир рушится:)
Могу сказать только одно -ооп совали где нужно и не нужно-типа это круто . всему своё место. некоторые задачи лучше решать функционально, некоторые ооп. ооп -построение интерфейсов,функционально там ну не в тему. но тоже, если не использовать наследование там -это ...как мин бред.

dmitry111 13.11.2012 20:57

да я бы тоже не стал заморачиваться с ооп, пока не прижмет. Но работодатели требуют его знание(.
да и функциональное программирование не особо то популярно. У Флэнагана все описание ФП уместилось на 3-х листочках.
В "шаблонах" есть много интересного на эту тему (каррирование, мемоизация..), но все дано не как полноценная модель программирования а как дополнительные возможности использования языка(

dmitry111 13.11.2012 21:00

Цитата:

Сообщение от DjDiablo
Тоесть я непонимаю зачем вам ООП, что в базовый класс выносить собрались ?

вот это я хотел бы и сам узнать)))

melky 13.11.2012 21:43

Цитата:

Сообщение от iMaxmaxmaximus
По сути ООП как и Функции это механизмы повторного использования кода.

это парадигмы - т.е. способы решения задач, проще говоря :)

Цитата:

Сообщение от iMaxmaxmaximus
Только в ООП точнее можно указать взаимосвязи между элементами система благодаря (не знаю как это называется, благодаря независимости).

а в ФП вообще нет элементов системы (функции не в счёт)

кстати, jQuery - это на 50% функциональщина:)

DjDiablo 13.11.2012 21:56

Интересно как бы выглядел jquery полностью в функциональном стиле ?

ща нафантазирую :)
//выберем все теги P
var v=$("p"),
//создадим функцию с устанавливающую css
     test=$css("opacity:0.5;left:100");

// всем P добавим пример мир
$html( v ,"привет мир" );
//удалим все p.killme 
$remove( v(".killme") );

//скормим выборку функции "test" созданной заранее
test(v);


ну или как то так :D
Прикольно правда ? :D :D :D

monolithed 14.11.2012 00:43

Цитата:

Сообщение от iMaxmaxmaximus
1
$('div')('css', 'opacity', 0.5)('html', 'привет мир')
2
('each', function(i){
3
    $(this)('click', function(){  alert(i)  });
4
});


Есть у меня подобная штука:

var tuple = new Tuple;

tuple.set('a', 0)(1, 2)('function', function(param) {
    alert(param);
});

tuple.get('a');           // 0
tuple.get('function')(1); // 1
tuple.get(1);             // 2
tuple.get();              // {a: 1, 'function': [ object Function ], 1: 2}

DjDiablo 14.11.2012 01:27

Прототип функционально ориентиированного jquery :D

//конструктор обёрток для функций
  function wrapper(callback){
	return function(param){
		return function(){
			return callback.apply(this,[Array.prototype.slice.call(arguments),param])
		}
	}
   }

   //аналог $ в jquery
   function $(param){
	var wrap=wrapper(function(arg,context){
		if ( arg.length==0) return context;
		else if (typeof arg[0]=="function") {
             var w=wrap( context );
			arg[0]( w );
			return w;
		}
		else return wrap( context+arg[0] );	
	})

	return wrap(param);
   }

   //скрываем элемент
   function $hide(o){
	alert('скрыть '+ o() );
   }

   //если указан только p1 и p1 не функция, то породит функцию
   // если p1 это функция а p2- строка style, тогда сработает сразу 
   function $css(p1,p2){

	var wrap=wrapper(function(arg,style){
		alert("для элемента "+arg[0]()+" установить стили "+style);
		return wrap(style);
        });

	if (p2) return wrap(p2)(p1);
        if (p1) return wrap(p1);
  }




   // эксперементы
   
   //выберем все дивы
   var sel1=$("div");
   //из дивов выберем те у которых класс sel2
   var sel2=sel1(".sel2");


   $hide( sel1(".test1") );   //скроем div.test1
   $hide( sel2(".test2") );   //скроем div.sel2.test1

   //создадим функцию style из функции CSS
   var style1=$css(" opacity:0.5; left:200");

   alert(" !!!!!  применим несколько команд к выборке  !!!!! ");
   sel2( style1 )( $css("left:1000px;") )($hide);

   alert(" !!!!! применим несколько выборок к команде  !!!!! ");
   style1(sel2)( sel1 )( $(".hello") )

   alert(" !!!!!  скомбинируем оба подхода  !!!!! ");

   sel1( 
         style1(
              sel2(".t1")
         ) (
              sel2(".t2")
         )
   );

DangerMan 08.06.2013 20:18

Цитата:

Сообщение от melky (Сообщение 215806)
имхо, лучше сейчас начинать учить функциональщину, пока императивщина и ООП не проели мозг до конца.

да и сейчас всё чаще вижу (на том же хабре) статьи про функциональное программирование.

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

Посоветуйте язык/книжку для легкого старта. Никогда не работал с функц.яыками, но интересно.


Часовой пояс GMT +3, время: 13:18.