डायनामिक सामग्री पीढ़ी के साथ अविभाज्य जावास्क्रिप्ट को कैसे कार्यान्वित करें?

Question

मैं बहुत गतिशील रूप से जेनरेट की गई सामग्री (PHP के तहत विकसित) लिखता हूं और मैं अपनी परियोजनाओं के लिए अतिरिक्त लचीलापन और कार्यक्षमता जोड़ने के लिए jQuery का उपयोग करता हूं।

बात यह है कि जावास्क्रिप्ट को एक अविभाज्य तरीके से जोड़ना मुश्किल है। यहां एक उदाहरण दिया गया है:

आपको div तत्वों की एक यादृच्छिक संख्या उत्पन्न करना है जिसमें प्रत्येक कार्यक्षमता onClick ट्रिगर की गई है। मैं पैरामीटर के साथ जेएस फ़ंक्शन को कॉल करने के लिए अपने div तत्वों पर onclick विशेषता का उपयोग कर सकता हूं लेकिन यह केवल एक खराब समाधान है। इसके अलावा मैं अपने PHP for लूप में प्रत्येक div के साथ कुछ jQuery कोड उत्पन्न कर सकता हूं, लेकिन फिर यह पूरी तरह से अविभाज्य नहीं होगा।

तो इस तरह की स्थितियों में समाधान क्या है?

Answer 1

आपको divs में कुछ जोड़ने की ज़रूरत है जो परिभाषित करता है कि उनके पास किस प्रकार का व्यवहार है, फिर उन divs का चयन करने के लिए jQuery का उपयोग करें और व्यवहार जोड़ें। एक विकल्प वर्ग विशेषता का उपयोग करना है, हालांकि तर्कसंगत रूप से व्यवहार के बजाय प्रस्तुति के लिए इसका उपयोग किया जाना चाहिए। एक विकल्प रिला विशेषता होगी, लेकिन मुझे आमतौर पर लगता है कि आप प्रत्येक व्यवहार के लिए अलग-अलग सीएसएस भी निर्दिष्ट करना चाहते हैं, इसलिए कक्षा इस उदाहरण में शायद ठीक है।

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

<div class="odd">...</div> 
<div class="even">...</div> 
<div class="odd">...</div> 
<div class="even">...</div> 

फिर jQuery में

:

$(document).load(function() { 
$('.odd').click(function(el) { 
// do stuff 
}); 
$('.even').click(function(el) { 
// dostuff 
}); 
}); 

jQuery एक बहुत शक्तिशाली चयनकर्ता इंजन आधारित किसी भी सीएसएस के आधार पर प्राप्त कर सकते हैं है चयनकर्ता, और कुछ XPath और अपने स्वयं के चयनकर्ताओं का भी समर्थन करते हैं। उन्हें जानने के लिए जाओ! http://docs.jquery.com/Selectors

Answer 2

अपने प्रश्न से बताना मुश्किल है, लेकिन शायद आप विभिन्न क्लिक व्यवहारों को स्थापित करने के लिए विभिन्न jQuery चयनकर्ताओं का उपयोग कर सकते हैं?

<div class="section-1"> 
    <div></div> 
</div> 
<div class="section-2"> 
    <div></div> 
</div> 

शायद आप jQuery में निम्नलिखित कर सकता है: उदाहरण के लिए, आप निम्नलिखित है कहना

$('.section-1 div').onclick(...one set of functionality...); 
$('.section-2 div').onclick(...another set of functionality...); 

असल में, संदर्भ क्या होने की जरूरत के आधार पर निर्णय लेते हैं। आप कुछ माता-पिता या बच्चे तत्व के लिए सभी divs और परीक्षण का चयन भी कर सकते हैं यह निर्धारित करने के लिए कि उन्हें कौन सी कार्यक्षमता मिलती है।

मुझे अधिक परिस्थिति देने के लिए आपकी स्थिति के विनिर्देशों के बारे में और जानना होगा, लेकिन शायद यह आपको शुरू कर देगा।

Answer 3

मैं W3C मानकों की अनदेखी करने और तत्व है कि संचालकों उन्हें संलग्न की जरूरत है पर HTML-गुण लिखने की सिफारिश करेंगे:

नोट: इस नहीं पृष्ठ की प्रस्तुति टूट जाएगा!इसलिए जैसे jQuery का उपयोग कर

function doAlertOne() { } 
function doAlertTwo() { } 
function doAlertThree() { } 

और फिर:

<ul> 
    <li handler="doAlertOne"></li> 
    <li handler="doAlertTwo"></li> 
    <li handler="doAlertThree"></li> 
</ul> 

में कुछ कार्यों घोषित

$("ul li").each(function() 
{ 
    switch($(this).attr("handler")) 
    { 
     case "doAlertOne": 
      doAlertOne(); 
      break; 

     case ... etc. 
    } 
}); 

व्यावहारिक हो।

Answer 4

मैं वास्तव में JQuery के बारे में पता नहीं है नहीं है, लेकिन मुझे पता है कि DOJO टूलकिट अत्यधिक विनीत जावास्क्रिप्ट संभव पड़ता है।

उदाहरण यहाँ पर एक नज़र डालें:

डेमो गतिशील रूप से एक विशुद्ध रूप से एचटीएमएल वर्गों के आधार पर तालिका में घटनाओं कहते हैं।

एक और उदाहरण व्यवहार सुविधाओं, यहाँ वर्णित है: http://dojocampus.org/content/2008/03/26/cleaning-your-markup-with-dojobehavior/

Answer 5

मैं सुझाव है कि आप इस बात "Event delegation" कहा जाता है का उपयोग करें। यह इस तरह काम करता है।

तो, यदि आप किसी क्षेत्र को अपडेट करना चाहते हैं, तो एक div कहें, और आप अविभाज्य घटनाओं को संभालना चाहते हैं, तो आप एक ईवेंट हैंडलर को स्वयं div से संलग्न करते हैं। ऐसा करने के लिए आप जो भी ढांचा पसंद करते हैं उसका प्रयोग करें। इवेंट अटैचमेंट किसी भी समय हो सकता है, भले ही आपने div को अपडेट किया हो या नहीं।

इस div से जुड़ा ईवेंट हैंडलर ईवेंट ऑब्जेक्ट को इसके तर्कों में से एक के रूप में प्राप्त करेगा। इस घटना ऑब्जेक्ट का उपयोग करके, आप तब समझ सकते हैं कि किस तत्व ने ईवेंट को ट्रिगर किया था। आप किसी भी समय div को अपडेट कर सकते हैं: div के बच्चों द्वारा उत्पन्न घटनाएं उस div पर बबल हो जाएंगी जहां आप उन्हें पकड़ सकते हैं और उन्हें संभाल सकते हैं।

यदि आप div के अंदर कई तत्वों को एकाधिक हैंडलर संलग्न करने के बारे में सोच रहे हैं तो यह एक बड़ा प्रदर्शन अनुकूलन भी बनता है।