AJAX и лучшие практики обновления головы / ног - PullRequest
7 голосов
/ 19 октября 2019

Стандартная настройка для меня - иметь 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. Вы знаете?

В любом случае ... Я выложу это и посмотрю, что произойдет ?

Ответы [ 2 ]

3 голосов
/ 23 октября 2019

Не уверен, что именно вы имеете в виду, когда говорите «динамический контент», я определенно выбрал бы методы RESTFull. Если вы дадите больше деталей для типов (таких как текстовая статика, видео или изображения и т. Д.), Я подумаю о более подробной информации. Предположим, у вас есть динамическое содержимое страницы, которая содержит только тексты.

Предположим, что пользователь заходит на страницу, URL-адрес которой равен «/ page / 1», а пользователь вошел в систему с какой-либо аутентификацией.

У вас может быть другая конечная точка успокоительного API, и онапримет два параметра (может быть больше, для простоты, я держу его равным 2), чтобы заполнить ваши файлы заголовка и нижнего колонтитула тем, что вы когда-либо хотели вернуть. Давайте назовем вашу конечную точку API на этот раз "/ populateHeadAndFooter". Вы можете передать «1» для страницы, «{{token}}» для параметров токена. Возможно, что бы вы ни делали с этим параметром, чтобы оценить ситуацию и подготовить ответ. Если вам нужна дополнительная информация для страницы «1», например, вводимые пользователем данные или какие-либо действия, которые будут предприняты, у вас может быть механизм для передачи его в качестве параметра, напрямую или после преобразования его в другие форматы (хеширование, кодирование и т. Д.),После этого вы можете использовать AJAX для обновления вашей текущей страницы.

0 голосов
/ 29 октября 2019

Я бы сказал, что в настоящее время рекомендуется выводить данные JSON с сервера, а затем использовать одностраничное приложение (SPA) или шаблонную среду для обновления страницы.

Например, реализация этого типаРешение, использующее инфраструктуру SPA, имеет следующие преимущества:

  • Устранение уязвимостей безопасности (инъекция / XSS), возникающих при добавлении вместе строк HTML [https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project]
  • Использование встроенных функций длязацикливайте данные и генерируйте HTML с небольшим кодом
  • Уменьшите «мигающий» режим перезагрузки на странице
  • Замените разделы страницы с помощью маршрутизатора и сделайте страницу закладкой
  • Модульное тестирование всего
  • Создание многократно используемых компонентов пользовательского интерфейса

Я лично рекомендую Angular: [https://angular.io/]

Если вам не нравится Angular, есть множестводругие фреймворки с похожими функциями. Если вы работаете над проектом, в котором есть многократно используемые части, как вы описали, стоит потратить время на изучение библиотек программного обеспечения, которые могут вам помочь.

Я не знаю, отвечаете ли вы на этот ответищите, но я надеюсь, что вы найдете это полезным и интересным.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...