JS 내에서 PHP를 사용하는 것은 나쁜 관행입니까?
저는 워드프레스의 사용자 지정 템플릿을 만들고 있으며 바닥글의 JS 내에 다음과 같은 예문이 있는 경우 PHP를 사용했습니다.잘 작동하지만 이것이 "나쁜 관행"으로 간주되는지, 만약 그렇다면 더 나은 대처 방법은 무엇인지 궁금합니다.
<script type="text/javascript">
var $submenu = $('.submenu');
// SUBMENU animation
<?php if ( in_category('Collection') == false ) { ?> // if not a Collection subpage
$('.menu li a').each(function() {
if ( $(this).text() == 'Collection' ) { // If is Collection link show submenu on hover
$(this).mouseenter(function() {
$submenu.slideDown();
});
} else { // else close submenu on hover over other menu links
$(this).mouseenter(function() {
$submenu.slideUp();
});
}
});
$('.nav').mouseleave(function() { // close submenu
$submenu.slideUp();
});
<?php } else { ?> // If a Collection subpage always show subnav
$submenu.show();
<?php } ?>
</script>
PHP와 자바스크립트를 섞는 것은 정말 문제가 없지만, 개인적으로 읽고 수정하는 것은 꽤 어색하고, 코드를 이동하는 것을 어렵게 만듭니다.예를 들어, 이 JavaScript를 수많은 이점이 있는 외부 파일로 내보내기로 결정한 경우:
<script src="myjs.js.php"></script>
가 를 할 .in_category('Collection')GET 파라미터를 사용하기 시작해야 하기 때문에(특히 자산 요청을 통해 상당히 복잡하고 예측할 수 없는 세션 변수에 의존하지 않는 한):
<script src="myjs.js.php?random_vars_required=123"></script>
서버 측 논리에 따라 내용을 변경하는 자바스크립트 파일이 있을 때는 브라우저가 무엇을 캐싱하는지 주의해야 합니다(이러한 유형의 문제를 방지하려면 기본적으로 js 파일의 가능한 각 결과에 대한 요청 URL을 변경해야 함을 의미합니다).
<script src="myjs.js.php?collection=true"></script>
<script src="myjs.js.php?collection=false"></script>
또 다른 단점은 JS에 PHP를 섞으면 DRY principal에 반하는 PHP 코드를 여러 곳에서 복제하게 될 가능성이 높다는 것입니다.제안된 "자바스크립트 변수로 데이터 내보내기"가 훨씬 더 좋은 이유입니다.그러나 가능하면 글로벌 js 네임스페이스의 변수는 피하는 것이 좋습니다.글로벌 네임스페이스를 피하는 것은 여러 개의 자바스크립트 파일 간에 로직을 공유해야 하고 모든 파일의 맨 위에 변수를 내보내지 않으려면 어려운 것으로 판명될 수 있습니다.
다른 가능성
테스트하려는 논리가 본질적으로 순수하게 부울(boolean)일 뿐만 아니라 페이지 분류(또는 하위 영역 분류)를 중심으로 한다면, 다음은 달성하려는 것을 처리하는 좋은 방법입니다.주로 PHP와 HTML을 함께 유지하고 JS를 분리하기 때문에 좋습니다.
외부 HTML을 생성하는 데 사용하는 템플릿에는 다음이 포함되어야 합니다.
<?php
$classes = array();
if ( in_category('Collection') ) {
$classes[] = 'collection';
}
$classes = implode(' ', $classes);
?>
<!--
obviously you'd render the rest of the html markup
I've removed it for simplicity
//-->
<body class="<?php echo $classes; ?>"></body>
그런 다음 JavaScript / jQuery에서:
if ( $('body.collection').length ) {
/// if collection sub page
}
else {
/// else do otherwise
}
클래스를 추가하지 않으신다면bodyelement, 페이지의 한 버전에는 이미 존재하고 다른 버전에는 존재하지 않는 것을 기반으로 부울 체크를 항상 정의할 수 있습니다.비록 개인적으로 저는 모든 것을 깨끗하게 유지하는 것을 좋아하고 HTML 마크업이 미래에 크게 변하지 않을 것이라는 것을 알 때만 그런 종류의 체크에 의존합니다.
오늘날 더 큰 세계가 걱정해야 할 거의 모든 브라우저는 요소에 대한 여러 클래스를 지원합니다.그래서 이것은 당신이 확인하고 싶은 여러 가지가 있더라도, 그것이 말이 되는 한, 당신은 이 클래스들을 당신의 것에 놓을 수 있다는 것을 의미합니다.html아니면body태그를 지정하고 jQuery의 Sizzle 구현을 사용하여 검색합니다.
자바스크립트 서버측을 구축하는 것은, 그렇게 하지 않는 주요 주장에도 불구하고, 아마도 우리 모두가 한 일일 것입니다. 즉, js를 (예: jsLint로) 검증할 수 없고 (쉽게) .js 파일에 넣을 수 없다는 것입니다. 브라우저가 스크립트의 두 가지 이상의 가능한 버전 중 하나만 캐시할 수 있도록 허용하는 것은 의미가 없습니다.
클라이언트 측 분기를 위해 서버 측 분기를 교환하는 것을 고려해 볼 수 있습니다. 이는 코드를 보다 쉽게 읽을 수 있게 해주지만, 더 중요한 것은 제가 제안하는 최종 단계(저와 함께)의 중간 단계입니다.
var $submenu = $('.submenu');
// SUBMENU animation
var isCollection = <?php echo in_category('Collection') ? 'false' : 'true' ?>;
if ( !isCollection ) { // if not a Collection subpage
$('.menu li a').each(function() {
if ( $(this).text() == 'Collection' ) { // If is Collection link show submenu on hover
$(this).mouseenter(function() {
$submenu.slideDown();
});
} else { // else close submenu on hover over other menu links
$(this).mouseenter(function() {
$submenu.slideUp();
});
}
});
$('.nav').mouseleave(function() { // close submenu
$submenu.slideUp();
});
} else { // If a Collection subpage always show subnav
$submenu.show();
}
하지만, 만약 부울이isCollection다른 수단에 의해 결정될 수 있습니다(예를 들어, DOM의 일부 측면을 문의함으로써).data-xxx속성), 그러면 가스로 요리하는 겁니다.js 스크립트는 한 가지 버전만 필요합니다. jsLint로 쉽게 검증할 수 있고 원한다면 .js 파일로 이동할 수 있습니다.
물론 당신은 당신이 그들을data-xxx서버 측 코드의 다른 곳에 속성(또는 무엇이든)을 지정합니다(설명 설명과 함께 완료). 이는 단점일 수 있지만 큰 단점은 아닐 수 있습니다.
아마도 모든 js가 이 접근법에 적응할 수는 없겠지만, 질문의 예는 다음과 같습니다.
제 생각에는, 이것이 이번 기회에 실행 가능한 방법입니다.
적어도 훌륭한 코드의 표시는 아닙니다.다음과 같은 대안이 있습니다.
- JSON 개체를 생성하고 이를 자바스크립트로 구문 분석
- JS 파일의 동적 포함
조건만 설정하면 됩니다.
if(<?= (int)$mybool ?>) { doSomething(); }
언급URL : https://stackoverflow.com/questions/15799116/is-using-php-if-else-within-js-bad-practice
'programing' 카테고리의 다른 글
| 스프링 부트 내장 Tomcat 로그 (0) | 2023.10.12 |
|---|---|
| c / c++의 메모리에 있는 주소를 통해 함수를 호출하는 중 (0) | 2023.10.12 |
| Excel VBA 날짜 형식 (0) | 2023.10.12 |
| MariaDB, CONNECT 엔진 비ASC열 이름으로 II 문자 (0) | 2023.10.12 |
| 입력[type=text]을 값의 너비로 자동 스케일링하시겠습니까? (0) | 2023.10.07 |