क्या आपके जावास्क्रिप्ट में PHP होना बुरा व्यवहार माना जाता है

55

इस साइट पर कई बार मैं लोगों को इस तरह की चीजें करते हुए देखता हूं:

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

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

  });
</script>

मुझे नहीं लगता कि यह किसी प्रकार का पैटर्न है जिसे लोग स्वाभाविक रूप से देखते हैं। वहाँ कुछ ट्यूटोरियल या सीखने की सामग्री होनी चाहिए जो यह दिखा रही है, अन्यथा हम इसे इतना नहीं देखेंगे। जो मैं पूछ रहा हूं वह यह है कि क्या मैं इससे बहुत बड़ी बात कर रहा हूं या यह वास्तव में बुरा व्यवहार है?

संपादित करें: इस बारे में मेरे एक दोस्त से बात कर रहा था जो अक्सर अपने जावास्क्रिप्ट में माणिक डालता है और वह इस बिंदु को लाया।

क्या आपके जावास्क्रिप्ट में एप्लिकेशन वाइड कॉन्स्टेंट को गतिशील रूप से रखना ठीक है, इसलिए आपको दो फ़ाइलों को संपादित करने की आवश्यकता नहीं है। उदाहरण के लिए...

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

यह भी ठीक है कि आप किसी पुस्तकालय में उपयोग किए जाने वाले डेटा को सीधे एनकोड करें

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

या हमें हर बार AJAX कॉल करना चाहिए?

php javascript web-development

— ग्रेग गुइडा
स्रोत

4

यह मुझे लगता है कि this question will likely solicit opinion, debate, arguments, polling, or extended discussion....

— डेव

7

@ M.Babcock यह एक .php फ़ाइल का हिस्सा होगा, जिससे php कोड को सर्वर-साइड निष्पादित किया जाएगा, और क्लाइंट को केवल इको का परिणाम दिखाई देगा।

8

जो कोई भी गतिशील रूप से उत्पन्न जावास्क्रिप्ट बनाता है उसे वापस ले लिया जाता है और

— उससे

5

@ मैट्ट तो मैं गूगल को वापस ले लूंगा और उनसे

— निपटूंगा

4

"आपको मेरी जावास्क्रिप्ट में अपनी जावास्क्रिप्ट मिली!" "नहीं, आपको मेरी जावास्क्रिप्ट में अपना PHP मिला है !"

— जोश डारनेल

83

आमतौर पर, यह है बुरा व्यवहार भाषा एक्स उपयोग करने के लिए भाषा वाई में कोड उत्पन्न करने के लिए

डेटा को अपना एकमात्र इंटरफ़ेस बनाकर दो भाषाओं को डिकोड करने का प्रयास करें - कोड को मिंगल न करें ।

अपने उदाहरण में, आप cfgजावास्क्रिप्ट को जावास्क्रिप्ट के लिए उपलब्ध संरचना को पॉप्युलेट करने के लिए कोड का सुधार कर सकते हैं :

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

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

इस तरह, PHP केवल डेटा संरचना को पॉप करने के बारे में परवाह करता है और जावास्क्रिप्ट केवल डेटा संरचना का उपभोग करने के बारे में परवाह करता है।

यह डीकॉउलिंग भविष्य में डेटा को अतुल्यकालिक रूप से (JSON) लोड करने का मार्ग प्रशस्त करता है।

अपडेट करें:

आपके अपडेट के साथ पूछे गए अतिरिक्त प्रश्नों का उत्तर देने के लिए, हाँ, DRY सिद्धांत को लागू करने के लिए अच्छा अभ्यास होगा और PHP और जावास्क्रिप्ट को समान कॉन्फ़िगरेशन ऑब्जेक्ट को साझा करने दें:

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

  ...

आपके कॉन्फ़िगरेशन का JSON प्रतिनिधित्व सीधे इस तरह से आपके पेज में डालने में कोई बुराई नहीं है। जरूरी नहीं कि आप इसे एक्सएचआर के माध्यम से लाएं।

— अत्र गोराल
स्रोत

21

हालांकि $ cfg में अपने MySQL पासवर्ड नहीं रखना याद रखें !!

— थॉमस बोनीनी

13

"डेटा को उनका एकमात्र इंटरफ़ेस बनाना - कोड को नियंत्रित न करना।" मुझे लगता है कि यह वास्तव में मुद्दे के मूल में कटौती करता है और एक साथ दो भाषाओं का उपयोग करते समय अंगूठे का एक अच्छा नियम है। अंतर्दृष्टि के लिए धन्यवाद।

— ग्रेग गिडा

6

आप data-अपने HTML में उस JSON को एक विशेषता में भी शामिल कर सकते हैं । कुछ इस तरह <body data-cfg="{...}">।

— kapa

1

@bazmegakapa मुझे लगता है कि सबसे अच्छा विकल्प हो सकता है। विशेष रूप से, यह HTML DOM जैसे API के उपयोग की अनुमति देता है जो XSS इंजेक्शन के जोखिम को कम करता है।

— 23

1

+1 इंटरफ़ेस के रूप में डेटा का उपयोग करने का सुझाव देने के लिए और कोड उत्पन्न करने वाले कोड को हतोत्साहित करने के लिए।

— ब्रैंडन

21

गतिशील रूप से उत्पन्न जावास्क्रिप्ट एक भयानक, बुरा अभ्यास है।

आप जो करने जा रहे हैं, वह समझ में आता है कि चिंता और प्रगति बढ़ाने का क्या मतलब है।

इसका मूल रूप से मतलब है कि आपके पास गतिशील HTML और स्थिर जावास्क्रिप्ट है (जो HTML को बढ़ाता है)।

आपके मामले में आप शायद अपने div पर एक वर्ग चाहते हैं और इसे एक वर्ग चयनकर्ता के साथ चुनें

— Raynos
स्रोत

10

आपके स्निपेट के साथ सबसे बड़ी समस्या यह है कि आप #इसे एक वैध 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>

वहाँ रहे हैं परिस्थितियों जहाँ आप अपने जावास्क्रिप्ट में पीएचपी शामिल करने के लिए की जरूरत है; लेकिन मुझे मानना होगा कि ये कुछ और दूर हैं।

एक बार उदाहरण के लिए जब आपके पास अलग-अलग वातावरण हों; परीक्षण, मंचन और जीना। उनमें से प्रत्येक में आपकी संपत्ति का एक अलग स्थान है (चित्र, मुख्य रूप से)। पथ को सेट करने का सबसे आसान तरीका है ताकि इसका उपयोग जावास्क्रिप्ट द्वारा किया जा सके;

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

— मैट
स्रोत

मेरे काल्पनिक php कोड के बाकी हिस्सों में मैं पहले से ही #=) जोड़ चुका हूं, लेकिन गंभीरता से मैं मानता हूं कि आप उदाहरण हैं कि यह करने का बेहतर तरीका है। ऐसा करना मेरे लिए और भी स्वाभाविक लगता है। तो हम इसे अक्सर उन जगहों पर क्यों देखते हैं जहां यह आवश्यक नहीं है?

— ग्रेग गिडा

ध्यान दें कि एक स्थिर फ़ाइल में स्थिर डेटा को गूँजने से आसानी से बचा जा सकता है ताकि आपके वातावरण को उसी तरह से सेटअप किया जा सके।

— रेयनोस डिक

4

@GregGuida: मेरा अनुमान है कि प्रोग्रामर शायद ही कभी क्लाइंट / सर्वर आर्किटेक्चर से निपटने के लिए उपयोग किए जाते हैं जैसे आप वेब डेवलपमेंट में प्राप्त करते हैं। वे DB <-> PHP <-> HTML / JS / CSS को एक मानते हैं, और यह पूरी तरह से नहीं समझते हैं कि कहां जाना चाहिए , और परतों को कैसे अलग किया जाना चाहिए।

— मैट

@ मैट मुझे लगता है कि यह शायद सबसे अच्छा स्पष्टीकरण है

— ग्रेग गिडा

2

$divID = '#' . $element_id_value;- चयनकर्ता मालिक के साथ कोई समस्या नहीं है;)

— rlemon

8

यह मेरी राय में एक बुरा व्यवहार है, क्योंकि आपको इस फ़ाइल को कुछ कॉल करने की आवश्यकता होगी। और फिर आप इसे उदाहरण के लिए संपीड़ित नहीं कर सकते हैं, यह उल्लेख करते हुए कि आपके जावास्क्रिप्ट के साथ अपने सर्वर के सामान में मिश्रण करना ठीक नहीं है। जितना संभव हो PHP और JS के बीच मिश्रण को सीमित करने का प्रयास करें।

आप इसके बजाय हमेशा ऐसा कर सकते हैं:

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

और फिर आप इस फ़ंक्शन को एक php फ़ाइल में कॉल कर सकते हैं, इन मिश्रण चीजों को यथासंभव छोटा करने के लिए।

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

ऐसा करने से (बड़ी जेएस फाइलें होने से, 2-3 लाइनें जहां यह कोई फर्क नहीं पड़ता) आप जेएस फाइल को संपीड़ित करने का लाभ उठा सकते हैं और फ्रंट-एंड डेवलपर्स केवल मेरी राय में जावास्क्रिप्ट के साथ काम करने में बहुत सहज महसूस करते हैं (जैसा कि आप लिख सकते हैं) पायथन, रूबी आदि न केवल पीएचपी - और कोड आपको वहां क्या करने की आवश्यकता के आधार पर बड़ा और बड़ा हो सकता है)।

— alessioalex
स्रोत

2

टोटली सहमत, btw मैं कभी नहीं अपने जेएस में PHP डाल दिया। मैं इसे इस साइट पर हर समय देखता हूं।

— ग्रेग गिडा

Php कोड कभी भी ब्राउज़र में नहीं आता है! बस मूल्यांकन कोड जो अब सादा जावास्क्रिप्ट होना चाहिए। तो फ़ाइल का आकार / संपीड़न एक गैर मुद्दा है। फिर भी बुरा व्यवहार सोचा!

— जेम्स एंडरसन

@JamesAnderson मुझे लगता है कि alessioalex मिनिफिकेशन (जैसे Uglify) की बात कर रहा है। यह संभव हो सकता है कि php रन हो, और उसके बाद उत्तर-प्रक्रिया php फ़ंक्शन की प्रतिक्रिया को पार्स करें, स्क्रिप्ट टैग की पहचान करें, इसे Uglify के माध्यम से चलाएं, और प्रतिक्रिया भेजने से पहले मूल रूप से php- जनित जेएस को कीमा बनाया हुआ संस्करण से बदल दें, लेकिन हर अनुरोध पर ऐसा करना एक यात्रा जैसा लगता है! दृष्टिकोण।

— जिंगलेथुला

6

मुझे नहीं लगता कि यह बुरा अभ्यास है। यदि आपके जावास्क्रिप्ट में आवश्यक आईडी गतिशील है तो ऐसा करने का कोई अन्य तरीका नहीं है।

— CodeZombie
स्रोत

5

कथुलू के अपवित्र नाम में क्यों आप एक आईडी टैग का नाम नहीं जानते होंगे?

— गुप्त

3

@ जानकारी में, जब आप आईडी नहीं जानते तो बहुत बार होते हैं ... यदि आप कोड के नए ब्लॉक उत्पन्न करने के लिए ajax का उपयोग कर रहे हैं, तो आप नए JS के साथ-साथ विशिष्ट ID जनरेट कर सकते हैं ... इन मामलों में आपको चाहिए सुनिश्चित करें कि जिन संदर्भों का संदर्भ दिया जा रहा है, वे वही हैं जो js में हैं, वे परिणामी कोड ब्लॉक में हैं। इस तरह के कई और उदाहरण हैं और यह बहुत आम है जब अजाक्स शामिल है या कोड के बड़े ब्लॉक हैं सर्वर-साइड पर निर्भर करते हैं अगर-और स्टेटमेंट आदि

7

@raynjamin मुझे यह भी समझ में नहीं आता है कि आप अपने आप को उन स्थितियों में कैसे डालते हैं, जो आप कर रहे हैं ... या आप कक्षा से चयन क्यों करेंगे, फिर टैग को सूचीबद्ध करेंगे, फिर आईडी विशेषताओं का एक छिपा हुआ सीएसएस मान होगा, जो चयनकर्ता आदमी है ... यह वास्तव में मुझे देखने के लिए दर्द कर रहा है ... मुझे यह भी नहीं पता कि कहां से शुरू करना है ... जैसे ... क्या? क्या आप कई ID पर काम करने के लिए कोड के भारी ब्लॉक या कुछ और पेस्ट कर रहे हैं? मैं भी नहीं ... जैसे ... मेरा दिमाग। यहां विस्फोट हो रहा है।

— गुप्त

3

डोम / html / जो भी हो ... के बारे में पढ़ें ... एक खोज इंजन का उपयोग करें ... मुझे गतिशील HTML के साथ इस तरह से सामान क्यों नहीं करना है?

— गुप्त

5

नहीं। आपको समझ नहीं आ रहा है कि आईडी टैग कैसे काम करते हैं। मैं ठीक-ठीक समझता हूँ कि तुम क्या कह रहे हो।

— इनकॉगनिटो

6

मैं इस बुरे व्यवहार पर विचार करूंगा। स्क्रिप्ट ब्लॉक के अंदर गतिशील सामग्री डालते समय आपको हमेशा इस तथ्य के बारे में पता होना चाहिए कि एक जावास्क्रिप्ट संदर्भ के अंदर बचना उतना आसान नहीं है जितना आप उम्मीद करेंगे। यदि मान उपयोगकर्ता-प्रदान किए गए थे, तो यह 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 बग के फिसलने का कोई खतरा नहीं है?

— जोएरी सेब्रेट्स
स्रोत

XSS कोण को पूरी तरह से समझाने के लिए +1! आपका दृष्टिकोण तेज़ी से लोड होगा, क्योंकि डोम को पहले से ही लोड किया गया है, लेकिन मैं स्वचालित $.ajax

— जोंस

5

कुछ लोग तर्क देंगे कि यह बुरा व्यवहार है। इसलिए नहीं कि यह JS के अंदर PHP है, लेकिन क्योंकि यह इनलाइन JS है और इसलिए अगली बार लोड करने में आसानी के लिए ब्राउज़र द्वारा कैश नहीं किया जाएगा।

IMO हमेशा 2 भाषाओं के बीच वैरिएबल पास करने के लिए JSON का उपयोग करना बेहतर होता है, लेकिन मुझे लगता है कि यह आपके ऊपर है।

— छेद
स्रोत

5

मैं कहूंगा कि सामान्य तौर पर ऐसा नहीं करते हैं। हालाँकि, यदि आप PHP -> जावास्क्रिप्ट से डेटा पास करना चाहते हैं, तो यह मुझे इनलाइन के रूप में क्रेजी नहीं करेगा, इनलाइन जावास्क्रिप्ट ब्लॉक करने के लिए जहाँ आपके पास दिखाए गए फ़ॉर्म का कोड है। यहां कोड बस php से जावास्क्रिप्ट में डेटा पास कर रहा है, न कि मक्खी या इस तरह से तर्क बनाना। इसे बनाम अजाक्स कॉल करने का अच्छा हिस्सा यह है कि पेज लोड होते ही डेटा उपलब्ध हो जाता है और इसके लिए सर्वर को अतिरिक्त यात्रा की आवश्यकता नहीं होती है।

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

बेशक एक अन्य विकल्प PHP से एक जावास्क्रिप्ट कॉन्फिगर फाइल का निर्माण करना है जो बिल्ड स्क्रिप्ट के कुछ फार्म के माध्यम से होता है जो कि एक .js फ़ाइल में डाल देगा।

— ज़चारी का
स्रोत

4

केवल एक चीज जो मैं सोच सकता हूं कि वास्तव में मुद्दों का कारण हो सकता है जब PHP त्रुटियों को प्रदर्शित करने के लिए सेट किया जाता है और इसलिए यह HTML के भार को आपके जावास्क्रिप्ट में PHP त्रुटि दिखाते हुए लोड करता है।

इसके अलावा क्योंकि इसकी स्क्रिप्ट में यह इसलिए नहीं दिखा है और यह कभी-कभी यह महसूस करने में समय ले सकता है कि आपकी स्क्रिप्ट क्यों टूटी है।

— एलेक्स कोपलान
स्रोत

महान मामला जहां यह एक बड़ी त्रुटि का कारण बनता है

— ग्रेग गिडा

3

यह किसके द्वारा निर्भर करता है, और यदि आप मुझसे पूछते हैं, हाँ मैं इसे कुछ कारणों से वापस अभ्यास मानता हूँ। सबसे पहले, मैं अपनी जेएस फाइल में जावास्क्रिप्ट कोड रखना पसंद करूंगा जिसे php parser टच नहीं कर पाएगा।

दूसरे, php केवल सर्वर समय पर निष्पादित होता है, इसलिए यदि आप अपनी जावास्क्रिप्ट को बदलने के लिए php में कुछ चर पर निर्भर हैं, तो यह बहुत अच्छा काम नहीं कर सकता है। यदि कुछ पृष्ठ-लोड सेटिंग है, जिसे आप जावास्क्रिप्ट के साथ नियंत्रित करना चाहते हैं, तो मैं आमतौर पर उस मान को DOM के साथ php में जोड़ना पसंद करता हूं ताकि जावास्क्रिप्ट उस तक पहुंच सके और जब चाहे (एक छिपे हुए div में, उदाहरण के लिए)।

अंत में, सिर्फ संगठनात्मक उद्देश्यों के लिए, यह बहुत कष्टप्रद हो सकता है। Html और php को मिलाना काफी बुरा है (मेरी राय में)।

— विस्फोट गोलियां
स्रोत

1

PHP को एक configडेटा ऑब्जेक्ट में शामिल करने से 90% रास्ता जाता है लेकिन सबसे अच्छा अभ्यास इसे पूरी तरह से अलग करना है। आप केवल आवश्यक डेटा का अनुरोध करने के लिए Restful एपीआई का उपयोग कर सकते हैं, यह थोड़ा अधिक जावास्क्रिप्ट है लेकिन कुछ फायदे के साथ।

स्क्रिप्ट स्थिर है और स्थायी रूप से कैश की जा सकती है
PHP अब XSS वेक्टर नहीं है
चिंताओं का पूरा पृथक्करण

downsides:

एक अतिरिक्त 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);
       }
    });
})

— roo2
स्रोत

-3

यह केवल एक बुरा अभ्यास नहीं है यदि इसका उपयोग जावास्क्रिप्ट कोड इनिशियलाइज़ेशन के लिए किया जाता है, (मेरे वर्डप्रेस थीम में, मैं अपनी जावास्क्रिप्ट ऑब्जेक्ट्स को php फ़ंक्शंस जैसे कि site_url () के साथ इनिशियलाइज़ करता हूं, क्योंकि इसे हैंडल करने का एकमात्र तरीका है (हो सकता है कि हम इसे पाने के लिए ajax अनुरोध का उपयोग कर सकें एक json, और इसलिए ... लेकिन यह गधा में एक दर्द है)।

अच्छा अभ्यास:

नया जावास्क्रिप्टऑबजेक्ट ("");

बुरा अभ्यास:

/ * कुछ कोड * / document.get_element_by_id (); / * कुछ कोड * /

— जूनियस रेंडर
स्रोत