आप अपनी पूरी वेबसाइट पर बड़े जेएस/jQuery कोडबेस कैसे व्यवस्थित करते हैं? आपके कोड के टुकड़े व्यवस्थित करने के तरीके पर बहुत अच्छे संसाधन हैं, लेकिन वास्तव में यह सब कुछ एक साथ खींचने और प्रत्येक टुकड़े को फिट करने के तरीके के बारे में कुछ भी नहीं है: साइड वाइड कोड संगठन, एक ही कोड का उपयोग करके एकाधिक पेज, ढीले युग्मन के साथ DRY रहना, आदिआप अपनी पूरी वेबसाइट पर बड़े जेएस/jQuery कोड बेस कैसे व्यवस्थित करते हैं?
नीचे मैं इसका सामना कैसे करता हूं। मैं कभी भी इस तरह अपना कोड व्यवस्थित नहीं कर रहा हूं, क्योंकि मुझे लगता है कि यह मैला है और रखरखाव/स्केलिंग समस्याओं का कारण बन सकता है, लेकिन मुझे वास्तव में कोई बेहतर जानकारी नहीं है।
मुझे एहसास है कि मेरे पास हर किसी के पास अपनी आवश्यकताओं का सेट है और कोई टर्न-कुंजी समाधान नहीं है, लेकिन मुझे गलत क्या कर रहा है, इस बारे में कुछ राय सुनना अच्छा लगेगा, मैं इसे गलत क्यों कर रहा हूं, और सुझाव अधिक रखरखाव कोड कैसे लिखें।
मैं क्या लगता है कि मैं वास्तव में प्राप्त करने के लिए कोशिश कर रहा हूँ:,
कैसे आप तर्क है कि आप कई स्थानों में उपयोग करने की आवश्यकता के साथ सौदा करते एकाधिक पृष्ठों पर?
आप पेज-विशिष्ट कोड कैसे व्यवस्थित करते हैं? क्या प्रत्येक पृष्ठ को में एक वैश्विक वस्तु का अच्छा विचार है? 1।
आप शुरू से क्या करते हैं सुनिश्चित करें कि आप कर रहे हैं लगातार नहीं फिर से लिखने के अपने संगठन पैटर्न रूप में अपने अनुप्रयोग बड़ा और बड़ा बढ़ता है? मैं शायद इस 4 वें इस बात को लिखने के पुनरावृत्ति पर हूं। 2।
प्रत्येक पृष्ठ को मुख्य application.js फ़ाइल प्राप्त होती है। प्रत्येक अतिरिक्त पृष्ठ में यह application.pagename.js फ़ाइल है। मैं फ़ाइलों को शामिल करने के लिए सर्वर साइड लॉजिक का उपयोग करता हूं (पहली बार देखने के लिए जांच कर रहा है यदि कोई पृष्ठ के लिए भी मौजूद है - कुछ पृष्ठों को जेएस की आवश्यकता नहीं है), और फिर उन्हें क्रम में शामिल करें।
<script src="js/application.js"></script>
<script src="js/application.index.js"></script>
<script>
MyApp.init();
MyApp.index.init();
</script>
मेरी यूआरएल सम्मेलन है/पेज/उपपृष्ठ/आईडी /:
तो मेरा होम पेज जैसा दिखता है। मेरे पास लगभग 10 पृष्ठ हैं और पूरी तरह से उपपृष्ठ हैं, प्रत्येक उपपृष्ठ को अपना तर्क आवश्यक है। इस पोस्ट में अंतिम उदाहरण देखें।
मेरा अधिकांश कोड पहले से ही jQuery UI विजेट या jQuery प्लगइन में मॉड्यूलर किया गया है, इसलिए मैं कहूंगा कि इन फ़ाइलों में 75% कोड की आवश्यकता है() एक विजेट में और इसे initing।
मैं आवश्यकतानुसार विजेट में खींचने के लिए आवश्यक जेएस का उपयोग करता हूं।
// application.js
var MyApp = {
init: function(){
var self = this;
// these widgets are available on every single page
// notice the call to jquery.deparam.js - i'll use this later to init subpage logic.
require(['js/widget1.js', 'js/widget2.js', 'js/widget3.js', 'js/jquery.deparam.js'], function(){
// deparam the query string. I'll use this later.
self.querystring = $.deparam.querystring();
// init widgets once the document is ready
$(function(){
$("#widget1").widget1();
$("#widget2").widget2();
// make these bindings available immediately as well.
self.rebindable();
});
});
},
// I use jQuery UI Dialog extensively as a window manager, and each dialog is loaded
// via an AJAX request. I'll call this method after each AJAX request to
// rebind some key widgets.
rebindable: function(){
$("#widget3").widget3();
}
};
// application.index.js
// home page specific stuff. this file is only included on the home page.
MyApp.index = {
// my convention is that init is automatically called after the script
// is included in a page, outside of a doc.ready statement.
init: function(){
var self = this;
require(['js/widget4.js'], function(){
$(function(){
self.widget4($("#foo"));
});
});
},
// passing elements to each method allows me to call this init code
// outside of the index page. I can require() this file, and only init
// widget4, and even use a different element.
widget4: function(element){
var config = {
something: "custom to the home page"
};
element.widget4(config);
}
};
// application.foo.js
// page "foo" stuff
MyApp.foo = {
init: function(){
var self = this;
// this page happens to use the same widget3 and configuration present
// in MyApp.index. this is where things can get sloppy and unmaintainable
// really quickly.
require(['js/application.index.js'], function(){
$(function(){
MyApp.index.widget3($("#bar"));
});
});
// page "foo" has three subpages (or actions) and require
// their own logic. url convention: /foo/subpage1/
// init whichever page we're on...
switch(self.querystring.subpage){
case "subpage1":
self.subpage1.init();
break;
case "subpage2":
self.subpage2.init();
break;
case "subpage3":
self.subpage3.init();
break;
}
},
subpage1: function(){
init: function(){
var self = this;
// once the DOM is ready init dialog.
$(function(){
self.dialog($("#openDialog"));
});
},
dialog: function(element){
element.bind("click", function(){
$('<div></div>').dialog({
open: function(){
// see what i'm doing here?
MyApp.rebindable();
// maybe more bindings specific to this
// dialog here
}
});
});
}
},
subpage2: function(){
init: function(){
}
},
subpage3: function(){
init: function(){
}
}
};
मैं इस सप्ताह अपने बारे में सोच रहा था। मैं हाल ही में एक परियोजना टीम में मुख्य जावास्क्रिप्ट कोडर के रूप में शामिल हो गया। यह परियोजना एक साल से अधिक समय से चल रही है, इसलिए उनके पास जगह पर जावास्क्रिप्ट है। उन्होंने एक व्यापक जावास्क्रिप्ट लाइब्रेरी जमा की है और नामस्थानों का उपयोग करने के लिए कुछ प्रयास किए हैं, लेकिन बहुत से पृष्ठों में कस्टम जावास्क्रिप्ट है जो न केवल पृष्ठों और उपयोगकर्ता नियंत्रणों में लिखा गया है बल्कि कुछ जो पृष्ठ या उपयोगकर्ता नियंत्रण डेटा के आधार पर उत्पन्न होते हैं। मेरे पास यह सब समझने और यथासंभव मानकीकृत करने की कोशिश करने का कठिन काम है। – Silkster
(जारी) आपकी विधि एक अच्छी शुरुआत है, लेकिन मैं देख सकता हूं कि यह कहां से असंभव हो सकता है। हो सकता है कि आप पृष्ठों और नियंत्रणों को कॉन्फ़िगर करने के लिए एक विधि तैयार कर सकें ताकि आपको कई स्विच स्टेटमेंट्स का उपयोग न करना पड़े। आप यह देखने के लिए क्लेपूल (http: // http: //www.claypooljs.com/) भी देख सकते हैं कि इससे मदद मिल सकती है या नहीं। – Silkster
@ सिल्कस्टर लिंक टूटा हुआ है: http: //http//www.claypooljs.com/ –