जावास्क्रिप्ट कोड संगठन सुझाव/कोड की समीक्षा

Question

1. मैं एक बड़ी साइट कस्टम का एक बहुत (पेज विशिष्ट js) है पर काम कर रहा हूँ। एक main.js और पेज-विशिष्ट.जेएस फ़ाइलें हैं। क्या कोई बेहतर दृष्टिकोण है जो निम्नलिखित पैटर्न का उपयोग कर सकता है?

2. मैं AJAX का उपयोग करने वाले कई तरीकों को फिर से कारक कैसे बना सकता हूं?

3. मैं वर्तमान में सभी onclick घटनाओं आवंटित इनलाइन ऐसे के रूप में onclick = "MYSITE.message.send ... - यह वहाँ एक बेहतर तरीका कई $ बना रहा है। (" # बटन ") पर क्लिक करें (समारोह() {}); अधिक काम की तरह लगता है ...

   var MYSITE = MYSITE ? MYSITE: {}; 
   var MYSITE { 
   bookmark: { 
       add: function(contentId, userId) { 
        var data = { 
         contentId: contentId, 
         userId: userId 
        }; 
        $.ajax({ 
         url: "/rest/bookmarks/", 
         type: "post", 
         data: data, 
         complete: function(response) { 
          if (response.error) { 
           alert(response.error); 
          } else { 
           alert("success"); 
          } 
         } 
        }); 
       } 
   }, 
   message: { 
       /* <a onclick="MYSITE.message.send('1234', '1234');" href="javascript:void(0);">BOOKMARK</a> */ 
       send: function(contentId, userId) { 
        var data = { 
         contentId: contentId, 
         userId: userId 
        }; 
        $.ajax({ 
         url: "/rest/bookmarks/", 
         type: "post", 
         data: data, 
         complete: function(response) { 
          if (response.error) { 
           alert(response.error); 
          } else { 
           alert("success"); 
          } 
         } 
        }); 
       } 
   } 
   

   }

Answer 1

सबसे पहले, बताए onclick="" सीधे बुरा व्यवहार है jQuery के click() पद्धति का उपयोग टी नहीं है। टोपी बहुत अधिक काम करती है, लेकिन अगर यह भी होती है, तो यह क्लीनर और अधिक अनुशंसित है। यह आपके एचटीएमएल मार्कअप को आपकी जेएस कार्यक्षमता से अलग रखता है और बाद में चीजों को बदलना आसान बनाता है। यह पहली बात है जिसे आपको रिफैक्टर करना चाहिए।

मैं अपने जेएस के साथ क्या करता हूं, मेरी सभी कक्षाओं/कोर कार्यक्षमता के साथ एक मुख्य पुस्तकालय जेएस फ़ाइल बनाता है। मैं फिर उन कार्यों को कॉल करने के लिए विशिष्ट पृष्ठों पर इनलाइन <script> टैग का उपयोग करता हूं जो कार्यों के लिंक को हुक करता है।

function initLinksOnPageX() { 
    $('#button').click(function() { MYSITE.message.send('1234', '1234'); }); 
    /* ... setup any other events ... */ 
} 

पेज शरीर में:

वैश्विक app.js फ़ाइल में, मैं एक समारोह होगा

<script type="text/javascript"> 
    $(initLinksOnPageX); 
</script> 

फिर, यह अपने मार्कअप किसी भी जे एस कोड का स्पष्ट रहता है, इसलिए आपके जेएस संबंधित अपडेट एक फ़ाइल (या कम) में होते हैं। इस सेटअप के साथ आपको पृष्ठ-विशिष्ट जेएस फाइलों की सख्ती से आवश्यकता नहीं होनी चाहिए, हालांकि संगठनात्मक रूप से बोलने से यह समझ में आ सकता है - मुझे नहीं पता कि आपका जेएस कितना बड़ा है।

Answer 2

आप jQuery प्रतिनिधि विधि उपयोग करें यदि आप एक टैग

 
<div id="bookmarks"> 
<a href="#">BOOKMARK</a> 
</div> 

$("div#bookmarks").delegate("a", "click", function(){ 
    MYSITE.message.send('1234', '1234'); 
}); 

साथ div तत्व है और आप 'ContentID' और 'userId' गतिशील रूप प्राप्त कर सकते हैं कर सकते हैं।

Answer 3

मेरे विचार:

1. यह कई कारकों पर निर्भर है, लेकिन अगर पेज विशिष्ट कोड "बड़ी" है तो यह शायद सबसे अच्छा यह अलग रखने के लिए है। यदि, हालांकि, यह केवल कुछ पंक्तियां हैं, और हम हजारों पृष्ठों के बारे में बात नहीं कर रहे हैं, फिर इसे मुख्य.जेएस में लंपाना एक बड़ा मुद्दा नहीं हो सकता है।

2. AJAX से बहुत परिचित नहीं है, इसलिए मैं "रिफैक्टर" के बारे में टिप्पणी करने पर कहूंगा।

3. यदि आप ऑनक्लिक घटनाओं के अपने असाइनमेंट को लूप कर सकते हैं, तो इनलाइन करने से आपको बहुत काम नहीं मिल रहा है।

Answer 4

मैं अपनी कस्टम कार्यक्षमता को jquery प्लगइन के रूप में लपेटने पर विचार करता हूं।