मैं कुछ सरल चीजों पर जाऊंगा जो आपकी मदद कर सकती हैं या नहीं। कुछ स्पष्ट हो सकते हैं, कुछ अत्यंत रहस्यमय हो सकते हैं।
चरण 1: अपने कोड को कंपार्टमेंटलाइज़ करें
अपने कोड को कई में अलग करना, मॉड्यूलर यूनिट एक बहुत अच्छा पहला कदम है। राउंड अप करें कि "एक साथ" क्या काम करता है और उन्हें अपनी छोटी सी संलग्न इकाई में डाल दिया। अब के लिए प्रारूप के बारे में चिंता मत करो, इसे इनलाइन रखें। संरचना एक बाद का बिंदु है।
तो, मान लीजिए कि आपके पास इस तरह का एक पेज है:
यह समझने के लिए समझ में आता है कि सभी हेडर से संबंधित इवेंट हैंडलर / बाइंडर रखरखाव में आसानी के लिए हैं (और 1000 लाइनों के माध्यम से झारना नहीं है)।
फिर आप अपने जेएस को एक यूनिट में फिर से बनाने के लिए ग्रंट जैसे टूल का उपयोग कर सकते हैं।
चरण 1 ए: निर्भरता प्रबंधन
एएमडीजे या कॉमनजेस जैसे पुस्तकालय का उपयोग करें जिसे एएमडी नामक कुछ को लागू करना है । एसिंक्रोनस मॉड्यूल लोड करने से आपको यह पता लगाने की अनुमति मिलती है कि आपका कोड क्या निर्भर करता है, जो तब आपको लाइब्रेरी-कॉलिंग को कोड में लोड करने की अनुमति देता है। आप बस शाब्दिक रूप से कह सकते हैं "यह jQuery की जरूरत है" और AMD इसे लोड करेगा, और jQuery उपलब्ध होने पर अपने कोड को निष्पादित करेगा ।
इसमें एक छिपा हुआ मणि भी है: लाइब्रेरी लोडिंग दूसरा किया जाएगा जो डोम तैयार है, पहले नहीं। यह अब आपके पेज के लोड-अप को रोक नहीं सकता है!
चरण 2: मॉड्यूलर करें
वायरफ्रेम देखें? मेरी दो विज्ञापन इकाइयाँ हैं। वे सबसे अधिक संभावना घटना श्रोताओं को साझा करेंगे।
इस चरण में आपका काम अपने कोड में पुनरावृत्ति के बिंदुओं की पहचान करना और इन सभी को मॉड्यूल में संश्लेषित करने का प्रयास करना है । मॉड्यूल, अभी, सब कुछ शामिल होगा। हम साथ जाते ही सामान अलग कर देंगे।
इस चरण का पूरा विचार चरण 1 से जाना है और सभी कॉपी-पास्ट को हटाना है, उन्हें उन इकाइयों के साथ बदलना है जो शिथिल युग्मित हैं। इसलिए, होने के बजाय:
ad_unit1.js
$("#au1").click(function() { ... });
ad_unit2.js
$("#au2").click(function() { ... });
मेरे पास होगा:
ad_unit.js:
var AdUnit = function(elem) {
this.element = elem || new jQuery();
}
AdUnit.prototype.bindEvents = function() {
... Events go here
}
page.js:
var AUs = new AdUnit($("#au1,#au2"));
AUs.bindEvents();
जो आपको पुनरावृत्ति से छुटकारा पाने के अलावा आपकी घटनाओं और आपके मार्कअप के बीच कंपार्टमेंट करने की अनुमति देता है । यह एक बहुत ही अच्छा कदम है और हम इसे बाद में आगे बढ़ाएंगे।
चरण 3: एक रूपरेखा चुनें!
यदि आप आगे भी पुनरावृत्तियों को संशोधित और कम करना चाहते हैं, तो एमवीसी (मॉडल - व्यू - कंट्रोलर) दृष्टिकोणों को लागू करने वाले भयानक रूपरेखाओं का एक समूह है। मेरा पसंदीदा बैकबोन / स्पाइन है, हालांकि, एंगुलर, वाईआईआई भी है ... सूची जारी होती है।
एक मॉडल आपके डेटा का प्रतिनिधित्व करता है।
एक दृश्य आपके मार्क-अप और उससे जुड़ी सभी घटनाओं का प्रतिनिधित्व करता है
एक नियंत्रक आपके व्यावसायिक तर्क का प्रतिनिधित्व करता है - दूसरे शब्दों में, नियंत्रक पृष्ठ को बताता है कि लोड करने के लिए क्या विचार हैं और कौन से मॉडल का उपयोग करना है।
यह एक महत्वपूर्ण शिक्षण कदम होगा, लेकिन पुरस्कार इसके लायक है: यह स्पेगेटी पर स्वच्छ, मॉड्यूलर कोड का पक्षधर है।
आपके द्वारा किए जा सकने वाले अन्य बहुत सारे काम हैं, वे सिर्फ दिशा-निर्देश और विचार हैं।
कोड-विशिष्ट परिवर्तन
आपके कोड में कुछ विशिष्ट सुधार यहां दिए गए हैं:
$('.new_layer').click(function(){
dialog("Create new layer","Enter your layer name","_input", {
'OK' : function(){
var reply = $('.dialog_input').val();
if( reply != null && reply != "" ){
var name = "ln_"+reply.split(' ').join('_');
var parent = "";
if(selected_folder != "" ){
parent = selected_folder+" .content";
}
$R.find(".layer").clone()
.addClass(name).html(reply)
.appendTo("#layer_groups "+parent);
$R.find(".layers_group").clone()
.addClass(name).appendTo('#canvas '+selected_folder);
}
}
});
});
यह बेहतर लिखा है:
$("body").on("click",".new_layer", function() {
dialog("Create new layer", "Enter your layer name", "_input", {
OK: function() {
// There must be a way to get the input from here using this, if it is a standard library. If you wrote your own, make the value retrievable using something other than a class selector (horrible performance + scoping +multiple instance issues)
// This is where the view comes into play. Instead of cloning, bind the rendering into a JS prototype, and instantiate it. It means that you only have to modify stuff in one place, you don't risk cloning events with it, and you can test your Layer stand-alone
var newLayer = new Layer();
newLayer
.setName(name)
.bindToGroup(parent);
}
});
});
आपके कोड में पहले:
window.Layer = function() {
this.instance = $("<div>");
// Markup generated here
};
window.Layer.prototype = {
setName: function(newName) {
},
bindToGroup: function(parentNode) {
}
}
अचानक, आपके पास कॉपी पेस्ट किए बिना अपने कोड में कहीं से भी एक मानक परत बनाने का एक तरीका है। आप इसे पांच अलग-अलग जगहों पर कर रहे हैं। मैंने अभी आपको पांच कॉपी-पेस्ट किए हैं।
एक और:
// कार्यों के लिए नियम आवरण
var PageElements = function(ruleSet) {
ruleSet = ruleSet || [];
this.rules = [];
for (var i = 0; i < ruleSet.length; i++) {
if (ruleSet[i].target && ruleSet[i].action) {
this.rules.push(ruleSet[i]);
}
}
}
PageElements.prototype.run = function(elem) {
for (var i = 0; i < this.rules.length; i++) {
this.rules[i].action.apply(elem.find(this.rules.target));
}
}
var GlobalRules = new PageElements([
{
"target": ".draggable",
"action": function() { this.draggable({
cancel: "div#scrolling, .content",
containment: "document"
});
}
},
{
"target" :".resizable",
"action": function() {
this.resizable({
handles: "all",
zIndex: 0,
containment: "document"
});
}
}
]);
GlobalRules.run($("body"));
// If you need to add elements later on, you can just call GlobalRules.run(yourNewElement);
नियमों को पंजीकृत करने के लिए यह एक बहुत ही शक्तिशाली तरीका है यदि आपके पास ऐसी घटनाएं हैं जो मानक नहीं हैं, या सृजन की घटनाएं नहीं हैं। पब / सब नोटिफिकेशन सिस्टम के साथ जुड़ने पर यह भी गंभीर रूप से किक-गधा है और जब भी आप एलीमेंट बनाते हैं तो आप आग लगने की घटना के लिए बाध्य होते हैं। Fire'n'forget मॉड्यूलर घटना बाध्यकारी!