Được coi là thực hành xấu khi có PHP trong JavaScript của bạn

Vì vậy, nhiều lần trên trang web này, tôi thấy mọi người đang cố gắng làm những việc như thế này:

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

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

  });
</script>

Tôi không nghĩ rằng đây là một kiểu mẫu mà mọi người tự nhiên rơi vào. Phải có một số loại hướng dẫn hoặc tài liệu học tập ngoài kia đang thể hiện điều này, nếu không chúng ta sẽ không thấy nó nhiều. Những gì tôi đang hỏi là, tôi đang thực hiện quá nhiều vấn đề này hay đây là một thực tế tồi tệ?

EDIT: Đã nói chuyện với một người bạn của tôi về điều này, người thường đưa ruby ​​vào JavaScript của anh ấy và anh ấy đã đưa ra quan điểm này.

Bạn có thể tự động đặt các hằng số ứng dụng rộng rãi trong JavaScript của mình để bạn không phải chỉnh sửa hai tệp. ví dụ...

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

cũng có thể mã hóa trực tiếp dữ liệu bạn dự định sử dụng trong thư viện

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

hay chúng ta nên thực hiện cuộc gọi AJAX mỗi lần?

Thông thường, nó là xấu thực hành để sử dụng ngôn ngữ X để tạo ra mã trong Y. ngôn ngữ

Hãy thử tách hai ngôn ngữ bằng cách tạo dữ liệu cho giao diện duy nhất của chúng - không trộn lẫn mã .

Trong ví dụ của bạn, bạn có thể cải thiện mã bằng cách sử dụng PHP để điền vào cfgcấu trúc có sẵn cho JavaScript:

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

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

Theo cách này, PHP chỉ quan tâm đến việc phổ biến cấu trúc dữ liệu và JavaScript chỉ quan tâm đến việc tiêu thụ cấu trúc dữ liệu.

Việc tách rời này cũng dẫn đến cách tải dữ liệu không đồng bộ (JSON) trong tương lai.

Cập nhật:

Để trả lời các câu hỏi bổ sung mà bạn đã hỏi với bản cập nhật của mình, vâng, sẽ là một cách thực hành tốt khi áp dụng nguyên tắc DRY và để PHP và JavaScript chia sẻ cùng một đối tượng cấu hình:

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

  ...

Không có hại trong việc chèn đại diện JSON của cấu hình của bạn trực tiếp vào trang của bạn như thế này. Bạn không nhất thiết phải tìm nạp nó qua XHR.

JavaScript được tạo động là một cách thực hành tồi tệ.

Những gì bạn cần làm là hiểu được ý nghĩa của các mối quan tâm và tăng cường tiến bộ có nghĩa là gì.

Điều này về cơ bản có nghĩa là bạn có HTML động và JavaScript tĩnh (giúp tăng cường HTML).

Trong trường hợp của bạn, bạn có thể muốn một lớp trên div của mình và chọn nó với bộ chọn lớp

Vấn đề lớn nhất với đoạn mã của bạn là bạn đang thiếu #để biến nó thành một bộ chọn jQuery hợp lệ;).

Tôi muốn nói rằng bạn nên cố gắng tránh đưa PHP vào JavaScript nếu có thể. Có gì sai khi thay đổi bộ chọn trong click()trình xử lý của bạn thành một lớp và thêm lớp vào thành phần được đề cập nếu bạn muốn trình xử lý bị loại bỏ, và nếu không thì không;

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

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

  });
</script> 

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

Có những trường hợp bạn cần đưa PHP vào JavaScript của mình; nhưng tôi phải thừa nhận những điều này là rất ít.

Một lần ví dụ là khi bạn có môi trường khác nhau; kiểm tra, dàn dựng và sống. Mỗi người trong số họ có một vị trí khác nhau của tài sản của bạn (hình ảnh, chủ yếu). Cách dễ nhất để đặt đường dẫn để JavaScript có thể sử dụng nó là một cái gì đó như;

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

Theo quan điểm của tôi, đây là một thực tiễn tồi, vì bạn sẽ cần phải gọi tệp này là.php. Sau đó, bạn không thể nén nó, không đề cập đến việc trộn lẫn nội dung máy chủ với JavaScript của bạn. Cố gắng hạn chế sự pha trộn giữa PHP và JS càng nhiều càng tốt.

Bạn luôn có thể làm điều này thay vào đó:

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

Và sau đó bạn có thể gọi hàm này trong tệp php, để làm cho những thứ trộn này càng nhỏ càng tốt.

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

Bằng cách thực hiện điều này (có các tệp JS lớn hơn, không phải 2-3 dòng không thành vấn đề), bạn có thể tận dụng việc nén tệp JS và các nhà phát triển giao diện người dùng cảm thấy thoải mái khi chỉ làm việc với JavaScript (theo cách bạn có thể viết Python, Ruby, v.v. không chỉ PHP - và mã có thể ngày càng lớn hơn tùy thuộc vào những gì bạn cần làm ở đó).

Tôi không nghĩ rằng đây là thực hành xấu. Nếu ID được yêu cầu trong JavaScript của bạn là động thì không có cách nào khác để làm điều này.

Tôi sẽ xem xét thực hành xấu này. Khi đặt nội dung động bên trong các khối tập lệnh, bạn luôn phải nhận thức được thực tế rằng việc thoát bên trong bối cảnh javascript không đơn giản như bạn mong muốn. Nếu các giá trị được người dùng cung cấp, việc thoát khỏi chúng là không đủ.

Bảng cheat OWASP XSS có nhiều chi tiết hơn, nhưng về cơ bản, bạn nên áp dụng mẫu này:

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

Sau đó, trong một tệp .js riêng được liên kết từ html chính của bạn, hãy tải mã này:

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

Lý do sử dụng tệp .js riêng biệt là hai lần:

• Nó được lưu trữ để hiệu suất tốt hơn
• Trình phân tích cú pháp HTML không được kích hoạt, do đó không có nguy cơ xảy ra lỗi XSS do ai đó đặt thẻ <? Php nhanh ở đâu đó

Một số người sẽ tranh luận rằng đó là thực tế xấu. Không phải vì nó là PHP bên trong JS, mà bởi vì nó là JS nội tuyến và do đó trình duyệt sẽ không được lưu vào bộ nhớ cache để dễ tải lần sau.

IMO luôn luôn tốt hơn khi sử dụng JSON để chuyển các biến giữa hai ngôn ngữ, nhưng tôi đoán nó tùy thuộc vào bạn.

Tôi sẽ nói rằng nói chung đừng làm điều đó. Tuy nhiên, nếu bạn muốn truyền dữ liệu từ PHP -> Javascript, sẽ không khiến tôi phát điên khi có một khối Javascript nội tuyến nơi bạn có mã dưới dạng được hiển thị dưới đây. Ở đây, mã chỉ chuyển dữ liệu từ php sang javascript, không tạo ra logic khi đang di chuyển hoặc tương tự. Phần tốt của việc thực hiện điều này so với cuộc gọi ajax là dữ liệu có sẵn ngay khi trang tải và không yêu cầu thêm một chuyến đi đến máy chủ.

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

Tất nhiên, một tùy chọn khác là xây dựng tệp cấu hình javascript từ PHP thông qua một số dạng tập lệnh xây dựng sẽ đưa tệp đó vào tệp .js.

Điều duy nhất tôi có thể nghĩ ra mà thực sự có thể gây ra vấn đề là khi các lỗi PHP được đặt thành hiển thị và do đó, nó sẽ tải một đoạn HTML hiển thị lỗi PHP vào JavaScript của bạn.

Ngoài ra, vì nó nằm trong kịch bản nên nó không hiển thị và đôi khi có thể mất một lúc để nhận ra lý do tại sao tập lệnh của bạn bị hỏng.

Nó phụ thuộc vào ai, và nếu bạn hỏi tôi, vâng tôi xem xét nó trở lại thực hành vì một vài lý do. Trước hết, tôi muốn có mã javascript trong tệp JS của riêng mình mà trình phân tích cú pháp php sẽ không thể chạm vào.

Thứ hai, php chỉ thực thi tại máy chủ, vì vậy nếu bạn phụ thuộc vào một số biến trong php để thay đổi javascript của mình, điều đó có thể không hoạt động tốt. Nếu có một số cài đặt tải trang mà bạn muốn kiểm soát bằng javascript, tôi thường thích thêm giá trị đó vào DOM bằng php để javascript có thể tiếp cận nó khi và nếu nó muốn (ví dụ như trong một div ẩn).

Cuối cùng, chỉ cho mục đích tổ chức, điều này có thể rất khó chịu. Nó đủ tệ để trộn html và php (theo ý kiến ​​của tôi).

Chứa PHP vào một configđối tượng dữ liệu đi được 90% nhưng cách tốt nhất là tách biệt nó hoàn toàn. Bạn có thể sử dụng api RESTful để chỉ yêu cầu dữ liệu mà bạn cần, đó là một javascript hơn một chút nhưng với một vài lợi thế.

• Script là tĩnh và có thể được lưu trữ vĩnh viễn
• PHP không còn là Vector XSS
• Hoàn thành tách biệt các mối quan tâm

Nhược điểm:

• Yêu cầu thêm yêu cầu HTTP
• javascript phức tạp hơn

Kịch bản

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

Đó không phải là một thực hành xấu CHỈ nếu nó được sử dụng để khởi tạo mã javascript, (trong các chủ đề WordPress của tôi, tôi khởi tạo các đối tượng javascript của mình bằng các hàm php như site_url () vì đó là cách duy nhất để xử lý yêu cầu đó (có lẽ chúng ta có thể sử dụng yêu cầu ajax để nhận một json, và vì vậy ... nhưng đó là một nỗi đau ở mông).

Thực hành tốt:

Thực hành xấu: