JavaScript'inizde PHP olması kötü bir uygulama olarak mı kabul edilir?

Bu sitede pek çok kez insanların böyle şeyler yapmaya çalıştığını görüyorum:

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

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

  });
</script>

Bunun, insanların doğal olarak içine düştüğü bir kalıp olduğunu sanmıyorum. Dışarıda bunu gösteren bir çeşit öğretici veya öğrenme materyali olmalı, aksi halde çok fazla görmeyiz. Benim sorduğum şu, bununla ilgili çok büyük bir şey mi yapıyorum yoksa bu gerçekten kötü bir uygulama mı?

EDIT: Bir arkadaşımla bu konuyu sık sık JavaScript'ine yakut yapan ve bu konuyu gündeme getiren bir konuştum.

JavaScript'inize uygulama geniş sabitlerini dinamik olarak yerleştirmeniz uygun mudur, böylece iki dosyayı düzenlemek zorunda kalmazsınız. Örneğin...

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

ayrıca bir kütüphanede kullanmayı planladığınız verileri doğrudan kodlamak da sorun değil

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

yoksa her seferinde bir AJAX araması yapmalı mıyız?

Tipik olarak, bir dil Y'ye kodu oluşturmak için dil X'i kullanmak kötü uygulama

Verileri tek arabirimleri haline getirerek iki dili ayırmayı deneyin - kodu karıştırmayın .

Örnekte, cfgJavaScript'i kullanabilen bir yapı oluşturmak için PHP kullanarak kodu geliştirebilirsiniz :

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

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

Bu şekilde, PHP sadece veri yapısını doldurmaya ve JavaScript sadece veri yapısını tüketmeye önem verir.

Bu ayrıştırma ayrıca, verilerin gelecekte senkronize olmayan şekilde (JSON) yüklenmesine de yol açar.

Güncelleme:

Güncellemenizde sorduğunuz ek soruları yanıtlamak için, evet, DRY ilkesini uygulamak ve PHP ve JavaScript'in aynı yapılandırma nesnesini paylaşmasına izin vermek iyi bir uygulama olacaktır:

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

  ...

Yapılandırmanızın JSON temsilini doğrudan bu şekilde sayfanıza yerleştirmenin bir zararı yoktur. XHR yoluyla almak zorunda değilsiniz.

Dinamik olarak oluşturulan JavaScript, korkunç, kötü bir uygulamadır.

Yapmanız gereken şey, Endişelerin Ayrılması ve İlerici Geliştirmenin ne anlama geldiğini kavramaktır.

Bu, temel olarak, dinamik HTML ve statik JavaScript'iniz (HTML'yi geliştirir) anlamına gelir.

Sizin durumunuzda, muhtemelen div'inizde bir sınıf istiyorsunuz ve bunu bir sınıf seçiciyle seçin.

Snippet'inizdeki en büyük sorun, #geçerli bir jQuery seçicisi yapmak için eksik olduğunuzdur;).

Mümkün olduğunca JavaScript'inize PHP eklemekten kaçınmanız gerektiğini söyleyebilirim. click()İşleyicinizdeki seçiciyi bir sınıfa değiştirmek ve işleyicinin kovulmasını istiyorsanız ve istemiyorsanız, sınıfı söz konusu öğeye eklemek yanlış;

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

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

  });
</script> 

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

Orada olan JavaScript'inizde PHP eklemeniz gerekir durumlar; ama şunu itiraf etmeliyim ki bunlar çok azdı.

Bir kez örnek, farklı ortamlarınız olduğunda; test, evreleme ve yaşama. Her birinin mal varlığınızın farklı bir yeri var (çoğunlukla görüntüler). Yolu, JavaScript tarafından kullanılabilecek şekilde ayarlamanın en kolay yolu;

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

Bu benim için kötü bir uygulamadır, çünkü bu dosyayı bir şey olarak çağırmanız gerekecek ve daha sonra örneğin sıkıştıramazsınız, sunucu içeriklerinize JavaScript'inizi karıştırmanın uygun olmadığını söyleyerek. PHP ve JS arasındaki karışımı olabildiğince sınırlamaya çalışın.

Bunun yerine her zaman yapabilirsiniz:

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

Ve sonra bu karıştırma işlevini olabildiğince küçük yapmak için bu işlevi bir php dosyasında çağırabilirsiniz.

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

Bunu yaparak (daha büyük JS dosyalarına sahip, önemli olmadığı durumlarda 2-3 satırı değil), JS dosyasını ve ön uç geliştiricilerini sıkıştırarak (sadece yazabildiğiniz gibi) JavaScript kullanarak çalışmaktan çok rahatlayabilirsiniz. Python, Ruby vb sadece PHP değil - ve orada ne yapmanız gerektiğine bağlı olarak kod daha da büyüyebilirdi).

Bunun kötü bir uygulama olduğunu sanmıyorum. JavaScript'iniz için gereken kimlik dinamikse, bunu yapmanın başka yolu yoktur.

Bu kötü uygulamayı düşünürdüm. Betik bloklarının içine dinamik içerik koyarken, bir javascript bağlamından kaçmanın umduğunuz kadar basit olmadığı gerçeğinin farkında olmalısınız. Değerler kullanıcı tarafından sağlanmışsa, html'den kaçış yeterli değildir .

OWASP XSS kısa notları daha fazla ayrıntı vardır, ancak temelde bu desen benimsemeli:

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

Ardından, ana html'nize bağlı ayrı bir .js dosyasında şu kodu yükleyin:

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

Ayrı bir .js dosyası kullanmanın nedeni iki yönlüdür:

• Önbelleklenebilir, böylece performans daha iyi
• HTML ayrıştırıcısı tetiklenmez, bu nedenle bir yere hızlı bir <? Php etiketi koyan bir kişi tarafından kaybolan XSS hata riski yoktur.

Bazı insanlar bunun kötü bir uygulama olduğunu iddia eder. JS içinde PHP olduğu için değil, satır içi JS olduğundan ve bu yüzden bir sonraki seferde yükleme kolaylığı için tarayıcı tarafından önbelleğe alınmayacağından.

IMO, değişkenleri 2 dil arasında iletmek için JSON kullanmak her zaman daha iyidir, ancak sanırım size kalmış.

Genelde bunu yapmadığını söyleyebilirim. Ancak, PHP -> Javascript'ten veri iletmek istiyorsanız, aşağıda gösterilen formun koduna sahip olduğunuz bir satır içi Javascript bloğuna sahip olmak beni çılgına çevirmez. Burada kod sadece php'den javascript'e veri aktarıyor, anında ve benzeri bir mantık yaratmıyor. Bunu bir ajax çağrısı ile yapmanın iyi yanı, verilerin sayfa yüklenir yüklenmez kullanılabilir olması ve sunucuya fazladan bir gezi gerektirmemesidir.

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

Tabii ki başka bir seçenek de, bir .js dosyasına koyacak bir yapı betiği biçimi ile PHP'den bir javascript config dosyası oluşturmaktır.

Gerçekten sorunlara yol açabileceğini düşündüğüm tek şey, PHP hatalarının görüntülenmeye ayarlandığı ve böylece PHP hatasını JavaScript'inize gösteren bir HTML yüküdür.

Ayrıca bu nedenle komut dosyasında gösterilmez ve komut dosyanızın neden kırıldığını anlamak zaman alabilir.

Kime bağlıdır ve eğer bana sorarsanız, evet, birkaç nedenden dolayı uygulamayı geri alıyorum. Her şeyden önce, php ayrıştırıcısının dokunamayacağı kendi JS dosyasında javascript kodunun olmasını tercih ederim.

İkincisi, php yalnızca sunucu zamanında yürütülür, bu nedenle javascript'inizi değiştirmek için php'deki bazı değişkenlere bağlıysanız, bu işe yaramayabilir. Javascript ile kontrol etmek istediğiniz bazı sayfa yükleme ayarları varsa, genellikle jpascript ile DOM'a eklemeyi tercih ederim, böylece javascript istediği zaman (örneğin gizli bir div'de) istediğinde ulaşabilir.

Son olarak, sadece kurumsal amaçlar için, bu çok can sıkıcı olabilir. Html ve php karıştırmak için yeterince kötü (bence).

PHP'yi bir configveri nesnesine dahil etmek yolun% 90'ını geçiyor ancak en iyi uygulama onu tamamen ayırmak. Sadece ihtiyacınız olan verileri istemek için bir RESTful api kullanabilirsiniz, bu biraz daha javascript, ancak birkaç avantajı var.

• Komut dosyası statiktir ve kalıcı olarak önbelleğe alınabilir
• PHP artık bir XSS Vektörü değil
• Eksiksiz endişelerin ayrılması

Downsides:

• Ekstra bir HTTP isteği gerektirir
• daha karmaşık javascript

Senaryo

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

SADECE javascript kodunu başlatmak için kullanılıyorsa, (WordPress temalarımda, javascript nesnelerimi site_url () gibi php işlevleriyle başlatıyorum çünkü bunu ele almanın tek yolu bu (belki bir almak için bir ajax isteği kullanabiliriz) Bir json, ve böylece ... ama kıçından bir acı).

İyi pratik:

Kötü uygulama: