Стандартная настройка для меня - иметь head.inc и foot.inc, а затем все промежуточное содержимое обновляется через вызовы AJAX с некоторым переходом. Становится немного скучно, но сейчас так оно и есть. Проблема, с которой я сталкиваюсь, заключается в том, что главное меню навигации / меню сайта, которое находится в head.inc, является контекстным и будет меняться в зависимости от просматриваемой страницы. Это может вызвать многократное дублирование кода: 1) я пишу его с помощью PW на PHP, поэтому, если страница посещается напрямую, она отражается и 2) я также должен делать то же самое в JS, если страница посещается с помощью вызова AJAX,Вы видите дилемму.
То, что я недавно начал делать, это построить массив PHP во включаемом файле для меню, а также json_encode
так, чтобы у меня был массив того же кода, одиндля использования PHP и один для использования JS. Примерно так:
$menuArray = array();
$menuLeft = $pages->find("template=work|news, sort=sort");
$menuRight = $pages->find("template=clients|about, sort=sort");
if ($page->id !== 1) {
$menuLeft->filter("id={$page->id}");
$menuRight->filter("id={$page->id}");
}
foreach ($menuLeft as $item) {
$menuArray['left'][] = array(
'id' => $item->id,
'name' => $item->name,
'url' => $item->url,
'title' => $item->title,
'x' => '100%'
);
// If current page then prepend 'Close'
if ($page->template->name == $item->name) {
array_push($menuArray['left'], array(
'name' => 'close',
'url' => $pages->get(1)->url,
'title' => 'Close',
'x' => '100%'
));
}
}
foreach ($menuRight as $item) {
$menuArray['right'][] = array(
'id' => $item->id,
'name' => $item->name,
'url' => $item->url,
'title' => $item->title,
'x' => '100%'
);
// If current page then append 'Close'
if ($page->template->name == $item->name) {
array_unshift($menuArray['right'], array(
'name' => 'close',
'url' => $pages->get(1)->url,
'title' => 'Close',
'x' => '100%'
));
}
}
// Return JSON for JS (PHP can grab $menuArray directly)
$menuJSON = json_encode($menuArray);
if ($config->ajax) {
echo '<script id="menuJSON">';
echo "menuJSON = {$menuJSON}";
echo '</script>';
}
Затем в цикле head.inc через $menuArray
и в цикле JS, при изменении AJAX, menuJSON
.
updateMenu: function(e) {
var $header = document.querySelector('header.main'),
headerContent = '';
for (var menu in menuJSON) {
headerContent += '<ul class="menu --' + menu + '">';
menuJSON[menu].forEach(function(item) {
headerContent += '<li data-template-name="' + item.name + '"><a data-ajax data-x="' + item.x + '>" href="' + item.url + '">' + item.title + '</a></li>';
});
headerContent += '</ul>';
}
$header.innerHTML = headerContent;
}
Проблема, с которой я столкнулся, заключается в том, что я понятия не имею, является ли это лучшим способом для работы с чем-то подобным, и спрашивал себя, есть ли у кого-нибудь какие-либо входные данные?
Он также чувствует странное эхо, выдавая скрипт-тег с PHPзатем полагаясь на JS найти его в DOM. Вы знаете?
В любом случае ... Я выложу это и посмотрю, что произойдет ?