Как я могу разделить проблемы (JS, HTML) при сохранении ремонтопригодности?
У меня есть некоторые jQuery, встроенные в HTML, но я хотел бы «извлечь» jQuery и поместить его в отдельный файл. Или, по крайней мере, уберите его из непосредственного HTML-кода. Я думаю, что в долгосрочной перспективе это будет лучше, если речь идет об обслуживании. Я надеюсь, что не ошибаюсь, имея этот принцип (SOC), руководящий этой конкретной потребностью в рефакторинге.
у меня есть <td> Ячейка таблицы внутри таблицы, которая содержит значение количества, а затем реагирует на событие двойного щелчка, загружая поле «Изменить» для значения.
<td id="qty">
<?if (!$this->isAnOrder) { ?>
<script>
$("#qty" ).dblclick(function() {
$.get('edit.php?id=<?=$this->id?>', function( data ) {
$( "#qty" ).html( data );
});
});
</script>
<? } ?>
<?=$this->quantity?>
</td>
Вопрос
Как бы я разделял проблемы представления (HTML) и реагирования на события пользовательского интерфейса в представлении (JS)?
Специальное примечаниеЯ вижу, что могу переместить код JS в отдельный файл JS, но при этом я повреждаю удобство сопровождения — как вы сможете определить, является ли этот конкретный <td> поле имеет JS, действующий на него? Именно для меня частью возможности сопровождения является возможность создать мысленную модель того, что код делает легко. Простое перемещение кода в отдельный файл может повредить этому.
Таким образом, мой вопрос становится — как разделить проблемы а также сохранить ремонтопригодность, если это вообще возможно?
Решение
Как бы вы могли сказать, есть ли на этом поле какая-то JS?
Есть несколько способов, но они потребуют от вас написания дополнительного кода или использования стороннего инструмента. Увидеть Как найти слушателей событий на узле DOM при отладке или из кода JavaScript?
Вообще говоря, все же рекомендуется отделять ваш Javascript от вашего HTML, сохранив его в отдельный файл JS и включив его.
Например, в разделе вашей головы:
<script src="path/to/my/file.js"></script>
Будет иметь тот же эффект, что и написание javascript прямо в html-файле.
Другие решения
Поскольку у вас есть PHP-условные выражения, определяющие, что будет показано на странице, вы можете захотеть поместить JS в функцию и просто вызвать ее.
<?if (!$this->isAnOrder) { ?>
<script> doStuff(); </script>
<? } ?>
на отдельном файле ..
function doStuff(){
$("#qty" ).dblclick(function() {
$.get('edit.php?id=<?=$this->id?>', function( data ) {
$( "#qty" ).html( data );
});
});
}
Затем вы можете поместить все ваши условные выражения PHP в один тег script внизу страницы.
Если вы действительно хотите сохранить его в чистоте и отделить логику внешнего и внутреннего интерфейсов:
- Создайте файл HTML с желаемым форматированием.
- Включите ссылку на файл JavaScript.
- Установите PHP-контроллеры, которые принимают что-то из POST и отвечают, используя JSON.
- Пусть Javascript / jQuery получит доступ к вашим контроллерам PHP и интерпретирует ответ.
doSomething.js пример:
function doSomething(param) {
data = {
'param': param
};
$.post(
'doSomething.controller.php',
data
).done(
function (data) {
// success! do something
}
).fail(
function (xhr) {
console.log(xhr);
// failure! do something else
}
);
}
doSomething.controller.php пример:
<?php
// respond as failure
function fail($message = null,$code = 500) {
http_response_code($code);
exit($message);
}
// respond as success
function success($message = null, $code = 200) {
http_response_code($code);
exit($message);
}
// access the backend models and interpret the response
function doSomething($param) {
// do something on the backend
$json = json_encode($response);
success($json);
}
// validate params
if (!isset($_POST['param'])) {
fail("'param' parameter must be in POST request",404);
}
// trigger the main controller logic
doSomething($_POST['param']);