रखरखाव के लिए जावास्क्रिप्ट कोड को आसान बनाने के लिए कैसे करें

Question

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

अभी तक स्पष्ट कोड के लिए मैंने जो किया है, वह नीचे है। एक js फ़ाइल में

1. एक js घटक। (उदाहरण के लिए। CustomTab.js मेरे एप्लिकेशन में एक टैब घटक है।)
2. JSON के आधार पर घटक एचटीएमएल उत्पन्न करने के लिए templete का उपयोग करना।
3. Jquery UI का उपयोग करना।
4. अविभाज्य जावास्क्रिप्ट।

क्या कोई अन्य अंक है जिस पर मुझे ध्यान देना चाहिए? वैसे भी, जेएस लाइब्रेरी/ढांचे को सुविधाजनक बनाने के लिए आसान बनाने के लिए तकनीक का सुझाव या अनुशंसा की जाती है, धन्यवाद।

Answer 1

मैं आपको अपने जावास्क्रिप्ट कोड को व्यवस्थित करने के लिए RequireJS के साथ मॉड्यूल पैटर्न का उपयोग करने का सुझाव दे सकता हूं। उत्पादन के लिए आप अपने मॉड्यूल को एक जावास्क्रिप्ट फ़ाइल में बनाने के लिए RequJS ऑप्टिमाइज़र का उपयोग करने में सक्षम होंगे।

यदि आप उम्मीद कर रहे हैं कि आपका क्लाइंट-साइड एप्लिकेशन बहुत बड़ा होगा, तो सर्वर-साइड रीस्टफुल सेवा के साथ बैकबोन.जेएस जैसे कुछ जावास्क्रिप्ट एमवीसी फ्रेमवर्क का उपयोग करने पर विचार करें।

MyLibrary.ListView.js:

var MyLibrary = MyLibrary || {}; 

MyLibrary.ListView = { 

    doSomethingOnListView: function() { 
     ... 
     return this; 
    }, 

    doSpecialThing: function() { 
     ... 
     return this; 
    }, 

    init: function() { 

     // Additional methods to run for all pages 
     this.doSomethingOnListView(); 

     return this; 
    } 
}; 

जो भी पेज इस की जरूरत है:

Answer 2

मैं अपने पुस्तकालयों के लिए इस नेमस्पेसिंग पैटर्न का उपयोग

<script type="text/javascript" src="/js/MyLibrary.ListView.js"></script> 
<script type="text/javascript"> 
$(function() { 
    MyLibrary.ListView 
     .init() 
     .doSpecialThing(); 
}); 
</script> 

तुम भी श्रृंखला तरीकों कर सकते हैं एक निश्चित करता है, तो पेज को एक अतिरिक्त फ़ंक्शन की आवश्यकता है।

Answer 3

वर्तमान में मैं अपनी कंपनी के लिए जेएस ढांचे पर भी काम कर रहा हूं। मैं जो कर रहा हूं वह है कि मैं जेएस के लिए ओओपी तत्वों का उपयोग करता हूं। दूसरे शब्दों में मैं सी # पुस्तकालयों के समान कोड लागू कर रहा हूं (ऐसा नहीं, सिमुलेटिंग सही शब्द होगा)। सी # में एक उदाहरण के रूप में आप Microsoft.Window.Forms का उपयोग करते हैं, इसलिए मैं JSOOP का उपयोग कर सकता हूं और उसी परिदृश्य को बनाने के लिए विस्तार और ओवरराइडिंग विधि का उपयोग कर सकता हूं। लेकिन अगर आप अपने जेएस कोड को JSOOP में परिवर्तित करने के लिए अपने प्रोजेक्ट में दूर गए तो समय लेने वाला होगा।

जेएसलिंट का उपयोग करें, यह आपके कोड को मान्य करेगा और एक पठनीय, स्क्रिप्ट इंजन अनुकूल कोड पर लाएगा। हालांकि जेएसलिंट बहुत सख्त है, इसलिए आप JSHint का भी उपयोग कर सकते हैं।

प्रत्येक घटक के लिए पृथक फ़ाइल का उपयोग करना एक अच्छा विचार है कि मैं इसे भी कर रहा हूं।

यदि आप चाहें तो आप jQuery डेवलपर संस्करण डाउनलोड कर सकते हैं और आप एक सामान्य विचार कर सकते हैं कि उन्होंने ढांचे को कैसे बनाया। मैंने jQuery ढांचे को देखकर बहुत सी चीजें सीखी!

Answer 4

यह वही प्रश्न है जो मैं हर बार खुद से पूछता हूं। मुझे लगता है कि कोड को आसान बनाए रखने के कुछ तरीके हैं।

• जावास्क्रिप्ट ओपनसोर्स परियोजनाओं में योगदान और समझें कि उन्होंने उस समस्या को कैसे हल किया।मुझे लगता है कि आप प्रत्येक परियोजना से कुछ अद्वितीय समाधान इकट्ठा कर सकते हैं और परियोजना संरचना के सामान्य भाग रखरखाव के बारे में आपके प्रश्न का उत्तर देंगे।

• backbone, knockout, ember या angularjs तरह तैयार समाधान का उपयोग अगर मैं गलत कोणीय आप संरचना लेकिन कम कोड के साथ पेज निर्माण के लिए आप शक्तिशाली उपकरण प्रदान नहीं देता है नहीं कर रहा हूँ। तैयार किए गए समाधानों के लिए todomvc भी देखें।

• पुस्तकें पढ़ें और अपनी आवश्यकताओं के लिए कुछ संरचना बनाने का प्रयास करें। यह कठिन और लंबा होगा लेकिन परिणाम (शायद कुछ साल बाद :)) भयानक होगा।