ถือว่าเป็นการใช้งาน PHP ที่ไม่ดีหรือไม่

หลายต่อหลายครั้งบนเว็บไซต์นี้ฉันเห็นคนพยายามทำสิ่งนี้:

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

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

  });
</script>

ฉันไม่คิดว่านี่เป็นรูปแบบที่ผู้คนตกอยู่ในความเป็นจริง ต้องมีบทเรียนหรือสื่อการเรียนรู้ที่แสดงสิ่งนี้มิฉะนั้นเราจะไม่เห็นมันมากนัก สิ่งที่ฉันถามคือฉันกำลังทำเรื่องนี้มากเกินไปหรือเป็นการปฏิบัติที่เลวร้ายจริง ๆ ?

แก้ไข: ได้ พูดคุยกับเพื่อนของฉันเกี่ยวกับเรื่องนี้ที่มักจะใส่ทับทิมใน JavaScript ของเขาและเขานำประเด็นนี้ขึ้นมา

การวางค่าคงที่ของแอพพลิเคชั่นในจาวาสคริปต์ของคุณนั้นเป็นแบบไดนามิกหรือไม่ดังนั้นคุณไม่ต้องแก้ไขสองไฟล์ ตัวอย่างเช่น...

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

ยังเป็นการตกลงที่จะเข้ารหัสข้อมูลที่คุณวางแผนที่จะใช้ในไลบรารีโดยตรง

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

หรือเราควรโทร AJAX ทุกครั้ง?

โดยปกติจะเป็นการปฏิบัติที่ดีที่จะใช้ภาษา X เพื่อสร้างรหัสในภาษาวาย

ลอง decoupling สองภาษาโดยการทำให้ข้อมูลที่อินเตอร์เฟซของพวกเขาเท่านั้น - ไม่ปะปนรหัส

ในตัวอย่างของคุณคุณสามารถปรับปรุงโค้ดโดยใช้ 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 สนใจเพียงเกี่ยวกับการใช้โครงสร้างข้อมูลเท่านั้น

decoupling นี้ยังนำไปสู่วิธีการโหลดข้อมูลแบบอะซิงโครนัส (JSON) ในอนาคต

ปรับปรุง:

เพื่อตอบคำถามเพิ่มเติมที่คุณถามกับการอัปเดตของคุณใช่มันเป็นการดีที่จะใช้หลักการ DRY และให้ PHP และ JavaScript แชร์ออบเจ็กต์การกำหนดค่าเดียวกัน:

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

  ...

ไม่มีอันตรายใด ๆ ในการแทรกการแสดง JSON ของการกำหนดค่าของคุณโดยตรงในหน้าของคุณเช่นนี้ คุณไม่จำเป็นต้องดึงข้อมูลผ่าน XHR

JavaScript ที่สร้างขึ้นแบบไดนามิกนั้นเป็นวิธีปฏิบัติที่น่ากลัวและไม่ดี

สิ่งที่คุณควรทำคือเข้าใจว่าการแยกความกังวลและการเพิ่มประสิทธิภาพแบบก้าวหน้าหมายถึงอะไร

สิ่งนี้หมายความว่าคุณมี HTML แบบไดนามิกและ JavaScript แบบคงที่ (ซึ่งปรับปรุง HTML)

ในกรณีของคุณคุณอาจต้องการคลาสใน div ของคุณและเลือกด้วยตัวเลือกคลาส

ปัญหาที่ใหญ่ที่สุดของข้อมูลโค้ดของคุณคือคุณไม่มีตัวเลือก#เพื่อให้เป็นตัวเลือก jQuery ที่ถูกต้อง;)

ฉันจะบอกว่าคุณควรลองหลีกเลี่ยงการรวม 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 ของคุณ แต่ฉันต้องยอมรับสิ่งเหล่านี้มีน้อยและอยู่ห่างไกล

ตัวอย่างหนึ่งคือเมื่อคุณมีสภาพแวดล้อมที่แตกต่างกัน ทดสอบจัดเตรียมและใช้งานจริง แต่ละรายการมีที่ตั้งที่แตกต่างกันไปสำหรับเนื้อหาของคุณ (ภาพส่วนใหญ่) วิธีที่ง่ายที่สุดในการตั้งค่าพา ธ เพื่อให้ JavaScript สามารถใช้งานได้เช่น

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

นี่เป็นข้อปฏิบัติที่ไม่ดีในความคิดของฉันเพราะคุณจะต้องเรียกไฟล์นี้ว่า. php และจากนั้นคุณไม่สามารถบีบอัดไฟล์ได้ตัวอย่างเช่นไม่พูดถึงว่ามันไม่โอเคที่จะผสมในเซิร์ฟเวอร์ของคุณด้วย JavaScript พยายาม จำกัด การผสมระหว่าง PHP และ JS ให้มากที่สุด

คุณสามารถทำสิ่งนี้แทน:

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

จากนั้นคุณสามารถเรียกใช้ฟังก์ชันนี้ในไฟล์ php เพื่อทำให้สิ่งที่ผสมเหล่านี้มีขนาดเล็กที่สุดเท่าที่จะทำได้

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

ด้วยการทำเช่นนี้ (มีไฟล์ JS ที่ใหญ่กว่าไม่ใช่ 2-3 บรรทัด) คุณสามารถใช้ประโยชน์จากการบีบอัดไฟล์ JS และนักพัฒนาส่วนหน้ารู้สึกสบายใจที่จะทำงานกับ JavaScript ได้มากขึ้นในความคิดของฉัน Python, Ruby ฯลฯ ไม่เพียง แต่ PHP - และโค้ดอาจใหญ่ขึ้นเรื่อย ๆ ขึ้นอยู่กับว่าคุณต้องทำอะไร)

ฉันไม่คิดว่านี่เป็นการฝึกฝนที่ไม่ดี หากรหัสที่จำเป็นใน JavaScript ของคุณเป็นแบบไดนามิกไม่มีวิธีอื่นในการทำเช่นนี้

ฉันจะพิจารณาการปฏิบัติที่ไม่ดีนี้ เมื่อวางเนื้อหาแบบไดนามิกในบล็อกสคริปต์คุณจะต้องตระหนักถึงความจริงที่ว่าการหลบหนีในบริบทของจาวาสคริปต์นั้นไม่ง่ายอย่างที่คุณคาดหวัง หากค่าถูกระบุโดยผู้ใช้จะไม่เพียงพอที่จะใช้กับ html-escape

OWASP XSS แผ่นโกงมีรายละเอียดมากขึ้น แต่โดยทั่วไปคุณควรนำมาใช้รูปแบบนี้:

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

จากนั้นในไฟล์. js แยกต่างหากที่ลิงก์จาก html หลักของคุณโหลดรหัสนี้

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 ไม่ถูกเรียกดังนั้นจึงไม่มีความเสี่ยงต่อข้อผิดพลาด XSS ที่ลื่นไหลโดยผู้ที่ใส่แท็ก <? php อย่างรวดเร็วในที่นั้น

บางคนอาจโต้แย้งว่าเป็นการปฏิบัติที่ไม่ดี ไม่ใช่เพราะเป็น PHP ภายใน JS แต่เป็นเพราะ inline JS และเบราว์เซอร์จะไม่ถูกแคชเพื่อให้ง่ายต่อการโหลดในครั้งต่อไป

IMO จะเป็นการดีกว่าถ้าใช้ JSON เพื่อส่งผ่านตัวแปรระหว่าง 2 ภาษา แต่ฉันคิดว่ามันขึ้นอยู่กับคุณ

ฉันจะบอกว่าโดยทั่วไปไม่ได้ทำ อย่างไรก็ตามถ้าคุณต้องการส่งผ่านข้อมูลจาก PHP -> Javascript มันจะไม่ทำให้ฉันคลั่งไคล้ที่จะมีบล็อก Javascript แบบอินไลน์ที่คุณมีรหัสของแบบฟอร์มแสดงร้อง ที่นี่รหัสเป็นเพียงการส่งข้อมูลจาก PHP ไปยังจาวาสคริปต์ไม่ได้สร้างตรรกะทันทีหรือสิ่งที่ชอบ ส่วนที่ดีของการทำเช่นนี้กับการโทร ajax คือข้อมูลจะพร้อมใช้งานทันทีที่โหลดหน้าเว็บและไม่ต้องการการเดินทางเพิ่มเติมไปยังเซิร์ฟเวอร์

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

แน่นอนว่าตัวเลือกอื่นคือการสร้างไฟล์กำหนดค่าจาวาสคริปต์จาก PHP ผ่านรูปแบบการสร้างสคริปต์ที่จะนำไฟล์นั้นลงในไฟล์. js

สิ่งเดียวที่ฉันคิดได้ว่าจะทำให้เกิดปัญหาคือเมื่อมีการตั้งค่าข้อผิดพลาดของ PHP ให้แสดงผลและผลักภาระ HTML ที่แสดงข้อผิดพลาด PHP ลงใน JavaScript ของคุณ

และเนื่องจากมันอยู่ในสคริปต์ดังนั้นจึงไม่แสดงผลและบางครั้งอาจใช้เวลาสักครู่เพื่อทราบว่าทำไมสคริปต์ของคุณเสีย

มันขึ้นอยู่กับใครและถ้าคุณถามฉันใช่ฉันจะพิจารณากลับมาฝึกด้วยเหตุผลไม่กี่ ก่อนอื่นฉันต้องการให้มีรหัส javascript ในไฟล์ JS ของตัวเองที่ php parser จะไม่สามารถสัมผัสได้

ประการที่สอง php ทำงานในเวลาที่เซิร์ฟเวอร์เท่านั้นดังนั้นหากคุณขึ้นอยู่กับตัวแปรใน php เพื่อเปลี่ยนจาวาสคริปต์ของคุณซึ่งอาจทำงานได้ไม่ดีนัก หากมีการตั้งค่าการโหลดหน้าเว็บบางอย่างที่คุณต้องการควบคุมด้วยจาวาสคริปต์ฉันมักจะต้องการเพิ่มค่านั้นลงใน DOM ด้วย php เพื่อให้จาวาสคริปต์สามารถเข้าถึงได้เมื่อใดและหากต้องการ (เช่นใน div ที่ซ่อนอยู่)

ในที่สุดสำหรับวัตถุประสงค์ขององค์กรสิ่งนี้อาจทำให้เกิดความรำคาญได้ มันไม่ดีพอที่จะผสม html และ php (ในความคิดของฉัน)

การที่มี PHP ลงในconfigออบเจ็กต์ข้อมูลนั้น 90% ของวิธีการ แต่วิธีปฏิบัติที่ดีที่สุดคือการแยกมันทั้งหมด คุณสามารถใช้ RESTful API เพื่อขอข้อมูลที่คุณต้องการเท่านั้นมันเป็นจาวาสคริปต์ที่เพิ่มขึ้นเล็กน้อย แต่มีข้อดีเล็กน้อย

• สคริปต์เป็นแบบสแตติกและสามารถแคชอย่างถาวร
• PHP ไม่มี XSS Vector
• แยกความกังวลอย่างสมบูรณ์

ข้อเสีย:

• ต้องมีคำขอ 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 ของฉันฉันเริ่มต้นวัตถุจาวาสคริปต์ด้วยฟังก์ชัน php เช่น site_url () เพราะเป็นวิธีเดียวที่จะจัดการมัน (บางทีเราอาจใช้คำขอ ajax เพื่อรับ a json และอื่น ๆ ... แต่มันเป็นความเจ็บปวดในตูด)

แนวปฏิบัติที่ดี:

การปฏิบัติที่ไม่ดี: