Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Нужен совет по рефакторингу (https://javascript.ru/forum/dom-window/35622-nuzhen-sovet-po-refaktoringu.html)

hyp1k 16.02.2013 13:36

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

А центральное наполнение <div id="content"> уже как хочешь, так и делай, на усмотрение разработчика. Я решил попробовать сделать центральное наполнение на ExtJS. Всего было 3 формы.
1. Одна форма рендерится прямо в центральный div там есть кнопки создать отчет, дублировать, редактировать, удалить. Есть список отчетов, есть фильтры чтобы проще было пользоваться списков.
2. Вторая форма появляется модальным окном при нажатии на создать, открыть или дублировать. Там заполняешь входные для отчета данные.
3. Третья форма появляется модальным окном отображает собсно отчет имеет кнопки сохранить и закрыть.

Написал код, все работает, но смущает что код вышел 1400 строк. Гулять по нему можно в notepad++ закрывая и открывая уровни alt+num / alt+shift+num. Внутри комменты, в принципе все понятно. Нажал alt + 4,3,2 увидел список форм и событий. Дальше открываешь нужную форму, в ней открываешь нужный метод, работаешь с ним.

Выглядит так:
https://docs.google.com/file/d/0B5Jf...it?usp=sharing

Код индекса.пхп раздела сайта вышел такой:
Код:

<?
include $_SERVER["DOCUMENT_ROOT"]."/orcl/include/auth.php";
include $_SERVER["DOCUMENT_ROOT"]."/orcl/include/top.php";
include $_SERVER["DOCUMENT_ROOT"]."/orcl/calculator/menu.php";
include $_SERVER["DOCUMENT_ROOT"]."/orcl/include/middle.php";
?>
<script language="javascript" type="text/javascript" charset="utf-8">
        <? if (isset($_REQUEST['login']))  print "var login = '".$_REQUEST['login']."';";?>
        <? if (isset($_REQUEST['tc_index']))  print "var tc_index = '".$_REQUEST['tc_index']."';";?>
        <? if (isset($zagolovok))  print "var title = '".$zagolovok."';";?>       
</script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href=".\js\ext-4.1.1a\resources\css\ext-all.css" />
<link rel="stylesheet" type="text/css" href=".\style\formula.css" />
<link rel="stylesheet" type="text/css" href=".\style\ext.css" />
<link rel="stylesheet" type="text/css" href=".\style\main.css" />
<script type="text/javascript" src=".\js\ext-4.1.1a\ext-all-debug.js"></script>
<script src=".\js\ext-4.1.1a\locale\ext-lang-ru.js"></script>
<script type="text/javascript" src=".\js\main.js"></script>
<div id="content" class="text"></div>
<? include $_SERVER["DOCUMENT_ROOT"]."/orcl/include/bot.php"; ?>

Кнопки и действия форм связываются событиями jquery

$(this.frmMain).bind('eventButtonShowDuplicateDialogClicked', function(){
				that.eventButtonShowDuplicateDialogClicked();								
			});
			$(this.frmCreateCalculation).bind('eventButtonMakeCalculationClicked', function(){
				that.eventButtonMakeCalculationClicked();								
			});


Вопросы к специалистам js:
1. После загрузки странички у меня есть ряд глобальных настроек которые есть в index.php (var title,tc_index ,login) и main.js (var globalConfig = { };)
Как лучше всего хранить эти глобальные вещи? Пихнуть в структуру типа синглтон или еще как?

2. Как лучше разносить формы по файлам js теперь? Делать класс формы и создавать форму копированием класса при нажатии на кнопку создать отчет?

3. При нажатии дублировать и редактировать отчета нужно пользоваться другими классами-наследниками основной формы для создания отчета или лучше методы duplicate и edit дописывать в основной класс формы?

4. Вообще как лучше нажал на кнопку создать отчет создалась форма. При закрытии ее стоит убить или спрятать, чтобы потом снова показать и не создавать новую?

5. Ну и в общем чего скажете, может это типичный случай, когда надо какую-нибудь либу использоать для организации кода? Есть некий стах что код дорастет в будущем до 2000 или 3000 строк и будет совсем неудобно.

Заранее спасибо всем отписавшимся.

melky 16.02.2013 13:53

Цитата:

Сообщение от hyp1k
eventButtonShowDuplicateDialogClicked

ужас. у вас все методы и свойства такие многословные?

Цитата:

Сообщение от hyp1k
Как лучше всего хранить эти глобальные вещи? Пихнуть в структуру типа синглтон или еще как?

угу, в неймспейс лучше все убрать

Цитата:

Сообщение от hyp1k
Делать класс формы и создавать форму копированием класса при нажатии на кнопку создать отчет?

один класс на все формы. каждая форма - экземпляр.

Цитата:

Сообщение от hyp1k
другими классами-наследниками основной формы для создания отчета или лучше методы duplicate и edit дописывать в основной класс формы?

балансируйте между богоподобным классом (один огромный класс на все задачи) и муравейником (куча ненужных классов для разных мелких задач)

Цитата:

Сообщение от hyp1k
Вообще как лучше нажал на кнопку создать отчет создалась форма. При закрытии ее стоит убить или спрятать, чтобы потом снова показать и не создавать новую?

экономичнее было бы прятать , конечно :)

Цитата:

Сообщение от hyp1k
5. Ну и в общем чего скажете, может это типичный случай, когда надо какую-нибудь либу использоать для организации кода? Есть некий стах что код дорастет в будущем до 2000 или 3000 строк и будет совсем неудобно.

Кучи библиотек для создания архитектуры - к примеру, Backbone

есть несколько библов от участников форума: http://javascript.ru/forum/project/2...avascript.html

(к примеру)


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