На работе дали задание сделать раздел сайта, грубо говоря отчетник.
Сам сайт представляет из себя переходы индексам.пхп из разных папок соответствующих разделам сайта. И переходам по списку ссылок слева имеющим свой индекс &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 строк и будет совсем неудобно.
Заранее спасибо всем отписавшимся.
