JavaScript에서 PHP를 사용하는 것은 나쁜 습관으로 간주됩니까?

이 사이트에서 여러 번 사람들이 다음과 같은 일을 시도하는 것을 보았습니다.

<script type="text/javascript">
  $(document).ready(function(){

     $('<?php echo $divID ?>').click(funtion(){
       alert('do something');
     });

  });
</script>

나는 이것이 사람들이 자연스럽게 빠뜨린 일종의 패턴이라고 생각하지 않습니다. 이것을 보여주는 일종의 튜토리얼이나 학습 자료가 있어야합니다. 그렇지 않으면 우리는 그것을 많이 보지 않을 것입니다. 내가 묻는 것은, 내가 이것을 너무 많이 만들었습니까, 아니면 이것이 정말로 나쁜 습관입니까?

편집 : JavaScript에 루비를 넣는 사람에 대해 내 친구에게 말하고 있었고이 점을 제기했습니다.

JavaScript에 응용 프로그램 전체 상수를 동적으로 배치하면 두 파일을 편집 할 필요가 없습니까? 예를 들어 ...

MYAPP.constants = <php echo json_encode($constants) ?>;

또한 라이브러리에서 사용하려는 데이터를 직접 인코딩해도 괜찮습니다.

ChartLibrary.datapoints = <php echo json_encode($chartData) ?>;   

아니면 매번 AJAX 전화를해야합니까?

일반적으로 언어 X를 사용하여 언어 Y로 코드를 생성 하는 것은 좋지 않습니다.

코드를 혼동하지 말고 데이터 를 유일한 인터페이스 로 만들어 두 언어를 분리하십시오 .

예를 들어, PHP를 cfg사용하여 JavaScript에 사용 가능한 구조 를 채우면 코드를 개선 할 수 있습니다.

<script type="text/javascript">
  var cfg = {
    theId: "<?php echo $divID ?>",
    ...
  };

  $(document).ready(function(){
     $("#" + cfg.theId).click(funtion(){
       alert('do something');
     });
  });
</script>

이런 식으로 PHP는 데이터 구조를 채우는 데에만 관심이 있고 JavaScript는 데이터 구조를 소비하는 데에만 관심이 있습니다.

이 분리는 또한 미래에 데이터를 비동기식으로 (JSON)로드하는 방법을 이끌어냅니다.

최신 정보:

업데이트와 관련된 추가 질문에 답변하려면 DRY 원칙을 적용하고 PHP와 JavaScript가 동일한 구성 객체를 공유하도록하는 것이 좋습니다.

<script type="text/javascript">
  var cfg = <?php echo json_encode($cfg) ?>;

  ...

이와 같이 구성의 JSON 표현을 페이지에 직접 삽입해도 아무런 해가 없습니다. 반드시 XHR을 통해 가져올 필요는 없습니다.

동적으로 생성 된 JavaScript는 끔찍하고 나쁜 습관입니다.

당신이해야 할 일은 우려의 분리와 진보적 향상의 의미를 이해하는 것입니다.

이는 기본적으로 동적 HTML 및 정적 JavaScript (HTML을 향상시키는)가 있음을 의미합니다.

귀하의 경우 div에 수업을 원하고 수업 선택기로 수업을 선택하십시오.

스 니펫의 가장 큰 문제 #는를 올바른 jQuery 선택기로 만들 수 없다는 것 입니다.

가능한 경우 JavaScript에 PHP를 포함시키지 마십시오. click()처리기 의 선택기를 클래스 로 변경하고 처리기를 시작하려는 경우 문제가되는 요소에 클래스를 추가하는 것은 문제가되지 않습니다.

<script type="text/javascript">
  $(document).ready(function(){

     $('.foo').click(funtion(){
       alert('do something');
     });

  });
</script> 

<div id="bar" class="<?php echo ($someCond ? 'foo' : ''); ?>">Hello</div>

이 있습니다 당신은 자바 스크립트에서 PHP를 포함 할 필요가 상황; 그러나 나는 이것들이 거의 없으며 사이에 있음을 인정해야합니다.

예를 들어 환경이 다른 경우가 있습니다. 테스트, 준비 및 라이브. 각 자산은 자산의 위치가 다릅니다 (주로 이미지). JavaScript에서 사용할 수 있도록 경로를 설정하는 가장 쉬운 방법은 다음과 같습니다.

var config = { assets: "<?php echo $yourConfig['asset_url']; ?>" };

이것은 내 의견으로는 나쁜 습관입니다.이 파일을 something.php로 호출해야하며 예를 들어 압축 할 수는 없습니다. 예를 들어 서버와 JavaScript를 혼합하여 사용하는 것은 좋지 않습니다. PHP와 JS의 혼합을 최대한 제한하십시오.

당신은 항상 대신에 이것을 할 수 있습니다 :

function setOnClick(divid) {
 $(divid).click(funtion(){
   alert('do something');
 });
}

그런 다음 PHP 파일에서이 함수를 호출하여 이러한 믹싱을 가능한 작게 만들 수 있습니다.

$(function() {
  setOnClick('<?php echo $divId; ?>');
});

이 작업을 수행하면 (중요하지 않은 2-3 줄이 아닌 더 큰 JS 파일이 있음) JS 파일을 압축 할 수 있으며 프론트 엔드 개발자는 내 의견으로는 JavaScript 만 사용하는 것이 훨씬 편안하다고 생각합니다 (작성할 수 있음) 파이썬, 루비 등은 PHP뿐만 아니라 코드가 커질 수 있습니다.

나는 이것이 나쁜 습관이라고 생각하지 않습니다. JavaScript에 필요한 ID가 동적이면 다른 방법이 없습니다.

나는이 나쁜 습관을 고려할 것입니다. 스크립트 블록에 동적 내용을 넣을 때는 항상 자바 스크립트 컨텍스트 내에서 이스케이프하는 것이 원하는만큼 간단하지 않다는 사실을 알고 있어야합니다. 사용자가 제공 한 값인 경우 html 이스케이프하는 것만으로 는 충분 하지 않습니다 .

OWASP XSS는 치트 시트는 자세한 내용을 가지고 있지만, 기본적으로는이 패턴을 채택해야한다 :

<script id="init_data" type="application/json">
    <?php echo htmlspecialchars(json_encode($yourdata)); ?>
</script>

그런 다음 기본 HTML과 연결된 별도의 .js 파일에서 다음 코드를로드하십시오.

var dataElement = document.getElementById('init_data');
var jsonText = dataElement.textContent || dataElement.innerText  // unescapes the content of the span
var initData = JSON.parse(jsonText);

별도의 .js 파일을 사용하는 이유는 두 가지입니다.

• 캐시 가능하므로 성능이 더 좋습니다.
• HTML 파서는 트리거되지 않으므로 누군가 누군가가 빠른 <? php 태그를 넣어서 XSS 버그가 미끄러질 위험이 없습니다.

어떤 사람들은 그것이 나쁜 습관이라고 주장합니다. JS 내부의 PHP이기 때문이 아니라 인라인 JS이기 때문에 다음 번에 쉽게로드 할 수 있도록 브라우저에 의해 캐시되지 않습니다.

IMO 항상 두 가지 언어 사이에 변수를 전달하기 위해 JSON을 사용하는 것이 더 좋지만, 그것이 당신에게 달려 있다고 생각합니다.

나는 일반적으로 그것을하지 않는다고 말할 것입니다. 그러나 PHP-> Javascript에서 데이터를 전달하려는 경우 다음과 같은 형식의 코드가있는 인라인 Javascript 블록을 사용하는 것이 그리 나쁘지 않습니다. 여기서 코드는 PHP에서 Javascript로 데이터를 전달하는 것입니다. 논리 등을 생성하지는 않습니다. 이 작업을 ajax 호출과 비교하면 좋은 점은 페이지가로드되는 즉시 데이터를 사용할 수 있고 서버로의 추가 트립이 필요하지 않다는 것입니다.

<script>
window.config = <?php echo json_encode($config);?>;
</script>

물론 다른 옵션은 PHP에서 자바 스크립트 설정 파일을 빌드 스크립트 형태로 .js 파일에 넣는 형태로 빌드하는 것입니다.

내가 실제로 문제를 일으킬 수 있다고 생각할 수있는 유일한 것은 PHP 오류가 표시되도록 설정되어 있으므로 JavaScript에 PHP 오류를 보여주는 HTML이 많이 나타납니다.

또한 스크립트에 포함되어 있기 때문에 표시되지 않으며 스크립트가 깨진 이유를 깨닫는 데 시간이 걸릴 수 있습니다.

그것은 누구에 의해 달려 있으며, 당신이 나에게 묻는다면 몇 가지 이유로 연습을 다시 고려합니다. 우선, PHP 파서가 만질 수없는 자체 JS 파일에 자바 스크립트 코드를 사용하는 것을 선호합니다.

둘째, PHP는 서버 시간에만 실행되므로 PHP에서 변수를 사용하여 자바 스크립트를 변경하면 제대로 작동하지 않을 수 있습니다. 자바 스크립트로 제어하려는 페이지로드 설정이있는 경우, 일반적으로 자바 스크립트가 원하는 경우 (예 : 숨겨진 div)에 도달 할 수 있도록 PHP로 DOM에 해당 값을 추가하는 것이 좋습니다.

마지막으로, 단지 조직적인 목적으로, 이것은 매우 성 가실 수 있습니다. html과 php를 섞는 것은 나쁘다.

PHP를 config데이터 객체에 포함시키는 것은 90 %의 방법으로 진행되지만 모범 사례는 완전히 분리하는 것입니다. RESTful API를 사용하여 필요한 데이터 만 요청할 수 있습니다. 자바 스크립트는 조금 더 많지만 몇 가지 장점이 있습니다.

• 스크립트는 정적이며 영구적으로 캐시 될 수 있습니다
• PHP는 더 이상 XSS 벡터가 아닙니다
• 우려의 완전한 분리

단점 :

• 추가 HTTP 요청이 필요합니다
• 더 복잡한 자바 스크립트

스크립트

//pure javascript
$.on('domready',function({
    //load the data
    $.get({
       url:'/charts/3D1A2E', 
       success: function(data){
           //now use the chart data here
           ChartModule.init(data);
       }
    });
})

자바 스크립트 코드 초기화에 사용되는 경우에만 나쁜 습관이 아닙니다 (WordPress 테마에서는 site_url ()과 같은 PHP 함수로 자바 스크립트 객체를 초기화합니다. json, 그리고 ...하지만 엉덩이에 통증이 있습니다).

좋은 연습:

나쁜 습관 :