2008-10-23 10 views
7

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

सवाल यह है कि ... क्या इनलाइन < स्क्रिप्ट > टैग्स को अपने एचटीएमएल के साथ तत्काल और प्रारंभिक उद्देश्यों के लिए लिखना ठीक है (व्यक्तिगत रूप से मुझे यह बहुत ही सुरुचिपूर्ण नहीं लगता)? और जेएस दुनिया के लिए सुलभ होने के बारे में, क्या मुझे अपने हैंडलर ऑब्जेक्ट को संदर्भित करने वाला वैश्विक वैर छोड़ना चाहिए (मुझे लगता है कि बहुत ही सुरुचिपूर्ण नहीं है), क्या ऐसा करने के बेहतर तरीके हैं?

उत्तर

9

आपको जावास्क्रिप्ट के लिए अपनी फाइलों में प्रयास करना चाहिए। यह आमतौर पर Progressive Enhancement के साथ किया जाता है। लेकिन कुछ बार आपके पास कोई विकल्प नहीं है, उदाहरण के लिए जब एक ही जेएसपी विभिन्न भाषाओं में पृष्ठों को प्रस्तुत करता है।

JSP:

<script src="/javascript/article_admin.js"></script> 
    <script type="text/javascript"> 
     NP_ArticleAdmin.initialize({ 
      text: { 
       please_confirm_deletion_of: '<i18n:output text="please.confirm.deletion.of"/>', 
       this_cannot_be_undone: '<i18n:output text="this.cannot.be.undone"/>' 
      } 
     }); 
    </script> 

जावास्क्रिप्ट (article_admin यहाँ एक वास्तविक जीवन उदाहरण है।जेएस):

/*global NP_ArticleAdmin, jQuery, confirm */ 
NP_ArticleAdmin = function ($) { 
    var text; 

    function delete_article(event) { 
     var article = $(this).parents("li.article"), 
     id = article.attr("id"), 
     name = article.find("h3.name").html(); 
     if (confirm(text.please_confirm_deletion_of + name + text.this_cannot_be_undone)) { 
      $.post("/admin/delete_article", {id: id}); 
      article.fadeOut(); 
     } 
     event.preventDefault(); 
     return false; 
    } 

    function initialize(data) { 
     text = data.text; 
     $("#articles a.delete").click(delete_article); 
    } 

    return {initialize: initialize}; 
}(jQuery); 

इस उदाहरण में, जेएसपी फ़ाइल में एकमात्र जावास्क्रिप्ट वह हिस्सा है जो वहां होना चाहिए। मूल कार्यक्षमता को अपनी जेएस-फाइल में अलग किया गया है।

0

हालांकि मैं मानता हूं कि यह पूरी तरह से सुरुचिपूर्ण नहीं है, मुझे AJAX- एकीकृत वातावरण के साथ सर्वर-साइड फैसलों को संयोजित करते समय इसे कुछ बार करने के लिए जाना जाता है। कुछ चरों को प्रारंभ करने के लिए इनलाइन < स्क्रिप्ट > टैग प्रतिबिंबित करना एक भयानक बात नहीं है, जब तक कि कोई इसे देख न सके।

बेहतर तरीकों के लिए, मुझे इनसे अनजान है। मैंने यह बहुत ही कम किया है कि मैंने अधिक सुरुचिपूर्ण या "उचित" समाधान नहीं मांगा है।

1

मुझे पूरी तरह से यकीन नहीं है कि आप यहां क्या पूछ रहे हैं, लेकिन जावास्क्रिप्ट कोड को तुरंत चालू करने के लिए जेएसपी में <script> टैग सहित कुछ भी गलत नहीं है। मैं अक्सर इस मॉडल का पालन करता हूं, बाहरी जावास्क्रिप्ट फ़ाइलों में लाइब्रेरी कोड लिखता हूं, और उसके बाद रचनाकारों को <script> टैग से मेरी ऑब्जेक्ट्स पर कॉल करता हूं।

यह डिबगिंग को आसान बनाता है, क्योंकि तर्क बाहरी फाइलों में है (और फायरबग को इनलाइन जावास्क्रिप्ट कोड डीबग करने में परेशानी होती है)। पुस्तकालयों को कैश किया जाता है, लेकिन उन्हें तत्काल डेटा नहीं (जो वांछित व्यवहार है)।

विकल्प बाहरी जावास्क्रिप्ट फ़ाइल या AJAX कॉल में गतिशील रूप से उत्पन्न तत्काल कोड होना है। मैंने सकारात्मक परिणामों के साथ भी यह किया है।

मुझे लगता है कि निर्णय लेने वाला कारक आपके पास कितना गतिशील डेटा है। यदि आपको बड़ी डेटा संरचनाओं का प्रतिनिधित्व करने की आवश्यकता है, तो मैं इसे एक AJAX कॉल के माध्यम से प्रस्तुत करूंगा जो JSON लौटाता है। यदि यह एक कन्स्ट्रक्टर के लिए एक साधारण कॉल है, तो इसे जेएसपी में डाल दें।

वैश्विक चर के लिए, मेरे पास अक्सर शीर्ष-स्तरीय ऑब्जेक्ट के लिए वैश्विक होगा जो सबकुछ बंद कर देता है। इसके अंदर, सहायक वस्तुओं के सभी अन्य संदर्भ हैं।

0

एचटीएमएल के साथ लाइन में <script> टैग के साथ ठीक है। ऐसे समय होते हैं जब इसकी आवश्यकता होती है, लेकिन जहां तक ​​कोई बेहतर तरीका मुझे नहीं पता। चीजों को और जटिल बनाने के बिना <script> टैग का उपयोग करना आसान है, फिर जेएस फाइलों को लागू करने का तरीका ढूंढने का प्रयास करना आसान है।