एक सुंदर जावास्क्रिप्ट कोड संरचना के लिए वस्तुओं का उपयोग करना

प्रविष्टि

सभी को शुभ दिन। मैं आपको छुट्टियों पर बधाई देता हूं और विषय पर आगे बढ़ता हूं।

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



पिछले कुछ वर्षों में, जावास्क्रिप्ट पुस्तकालयों ने नौसिखिया डेवलपर्स को साइट के साथ अतिरिक्त अन्तरक्रियाशीलता जोड़ने की क्षमता दी है। उनमें से कुछ, जैसे कि jQuery, में एक सिंटैक्स इतना सरल है कि शून्य प्रोग्रामिंग अनुभव वाले लोग सीख चुके हैं कि कैसे जल्दी से अपने पन्नों में "घंटियाँ और सीटी" जोड़ सकते हैं। यह उपयोगकर्ता कोड से कुछ दर्जन लाइनों को प्लगइन, कॉपी और पेस्ट करने के लिए आवश्यक है। परिणाम - ग्राहक प्रभावित होता है और आप अपने रिज्यूमे में jQuery जोड़ते हैं।



लेकिन एक पल रुकिए। मान लीजिए कि अब आवश्यकताएँ बदल गई हैं। अब तीन तत्वों के लिए काम करने वाला कोड दस के लिए काम करना चाहिए। या आपके कोड को थोड़ा अलग अनुप्रयोग के लिए पुन: उपयोग किया जाना चाहिए जिसमें सभी पहचानकर्ता अलग हैं। कोड में खो जाने के लिए कैसे नहीं, जो कि प्लगइन या कॉल की एक पंक्ति नहीं है जैसे शो () और छिपाने ()?

प्रस्तुत है वस्तु शाब्दिक अर्थ

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



ऑब्जेक्ट लिटरल प्रोग्रामिंग पैटर्न कोड को व्यवस्थित करने का एक ऐसा तरीका है, जिससे आपको लगता है कि आप शुरुआत में ही सोचेंगे कि आपका कोड क्या करेगा और ऐसा करने के लिए किन हिस्सों में जगह होनी चाहिए। यह आपके कोड को "वैश्विक नामस्थान को प्रदूषित करने" से रोकने का एक अच्छा तरीका है, जो सभी परियोजनाओं (विशेष रूप से अन्य) के लिए अच्छा अभ्यास है। ऑब्जेक्ट लिट्रेल भी एक तरह से अतिक्रमित व्यवहार है।

var myObjectLiteral = {

myBehavior1 : function () {

/* - */

},



myBehavior2 : function () {

/* */

}

};



* This source code was highlighted with Source Code Highlighter .

कृत्रिम रूप से सरलीकृत उदाहरण के रूप में, मैं सूची आइटम पर क्लिक करने पर सामग्री दिखाने या छिपाने के लिए एक jQuery का टुकड़ा दूंगा:

$( document ).ready( function () {

$( '#myFeature li' )

.append( '<div/>' )

.each( function () {

$( this ).find( 'div' )

.load( 'foo.php?item=' + $( this ).attr( 'id' ));

})

.click( function () {

$( this ).find( 'div' ).show();

$( this ).siblings().find( 'div' ).hide();

});

});



* This source code was highlighted with Source Code Highlighter .

काफी सरल है। और फिर भी, इस उदाहरण में, कुछ चीजें हैं जो आप बाद में बदलना चाह सकते हैं - उदाहरण के लिए, जिस तरह से आपने सामग्री डाउनलोड करने के लिए URL सेट किया है, जहां परिणामी सामग्री डाउनलोड करनी है, आदि। ऑब्जेक्ट लिटरल व्यू में, फ़ंक्शन इन पहलुओं को स्पष्ट रूप से अलग करते हैं। यह इस तरह लग सकता है:

var myFeature = {

config : {

wrapper : '#myFeature' ,

container : 'div' ,

urlBase : 'foo.php?item='

},



init : function (config) {

$.extend(myFeature.config, config);

$(myFeature.config.wrapper).find( 'li' ).

each( function () {

myFeature.getContent($( this ));

}).

click( function () {

myFeature.showContent($( this ));

});

},



buildUrl : function ($li) {

return myFeature.config.urlBase + $li.attr( 'id' );

},



getContent : function ($li) {

$li.append(myFeature.config.container);

var url = myFeature.buildUrl($li);

$li.find(myFeature.config.container).load(url);

},



showContent : function ($li) {

$li.find( 'div' ).show();

myFeature.hideContent($li.siblings());

},



hideContent : function ($elements) {

$elements.find( 'div' ).hide();

}

};



$( document ).ready( function () { myFeature.init(); });



* This source code was highlighted with Source Code Highlighter .

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

एक और उदाहरण

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

चरण 1: HTML संरचना

अच्छा अर्थ कोड HTML लिखना अच्छा जावास्क्रिप्ट कोड लिखने के लिए आवश्यक है, तो आइए इस बारे में सोचें कि HTML हमारे कार्य के लिए कैसा दिख सकता है। HTML चाहिए:

• जावास्क्रिप्ट अक्षम के साथ सुलभ (और काम) करें।
• जावास्क्रिप्ट सक्षम करने के लिए एक पूर्वानुमानित DOM प्रदान करें।
• अनावश्यक आईडी और कक्षा से बचने में मदद करें।

इन सिद्धांतों को देखते हुए:

< div id ="myFeature" >

< ul class ="sections" >

< li >

< h2 >< a href ="/section/1" > Section 1 </ a ></ h2 >

< ul >

< li >

< h3 >< a href ="/section/1/content/1" > Section 1 Title 1 </ a ></ h3 >

< p > The excerpt content for Content Item 1 </ p >

</ li >

< li >

< h3 >< a href ="/section/1/content/2" > Section 1 Title 2 </ a ></ h3 >

< p > The excerpt content for Content Item 2 </ p >

</ li >

< li >

< h3 >< a href ="/section/1/content/3" > Section 1 Title 3 </ a ></ h3 >

< p > The excerpt content for Content Item 3 </ p >

</ li >

</ ul >

</ li >



< li >

< h2 >< a href ="/section/2" > Section 2 </ a ></ h2 >

< ul >

< li >

< h3 >< a href ="/section/2/content/1" > Section 2 Title 1 </ a ></ h3 >

< p > The excerpt content for Content Item 1 </ p >

</ li >

< li >

< h3 >< a href ="/section/2/content/2" > Section 2 Title 2 </ a ></ h3 >

< p > The excerpt content for Content Item 2 </ p >

</ li >

< li >

< h3 >< a href ="/section/2/content/3" > Section 2 Title 3 </ a ></ h3 >

< p > The excerpt content for Content Item 3 </ p >

</ li >

</ ul >

</ li >



< li >

< h2 >< a href ="/section/3" > Section 3 </ a ></ h2 >

< ul >

< li >

< h3 >< a href ="/section/3/content/1" > Section 3 Title 1 </ a ></ h3 >

< p > The excerpt content for Content Item 1 </ p >

</ li >

< li >

< h3 >< a href ="/section/3/content/2" > Section 3 Title 2 </ a ></ h3 >

< p > The excerpt content for Content Item 2 </ p >

</ li >

< li >

< h3 >< a href ="/section/3/content/3" > Section 3 Title 3 </ a ></ h3 >

< p > The excerpt content for Content Item 3 </ p >

</ li >

</ ul >

</ li >



</ ul >

</ div >



* This source code was highlighted with Source Code Highlighter .

कृपया ध्यान दें कि हमने सेक्शन नेविगेशन को प्रदर्शित करने के लिए मार्कअप को सक्षम नहीं किया है, इन भागों को jQuery द्वारा जोड़ा जाएगा, क्योंकि वे केवल jQuery के साथ काम करेंगे; गैर-जावास्क्रिप्ट उपयोगकर्ताओं को केवल सुंदर शब्दार्थ मार्कअप मिलेगा। (यदि यहां से कुछ भी आश्चर्यजनक या भ्रमित लगता है, तो आप POSH (सादा-पुराना अर्थ HTML) और प्रगतिशील संवर्द्धन कर सकते हैं।

चरण 2: सुविधा तैयार करें

किसी कार्य के लिए ऑब्जेक्ट बनाने में मेरा पहला कदम ऑब्जेक्ट के लिए स्टब्स बनाना है। स्टब्स प्लेसहोल्डर हैं जो आपके कोड संरचना की योजना बनाने में आपकी सहायता करते हैं। हमारी वस्तु के निम्नलिखित तरीके होंगे:

var myFeature = {

'config' : { },

'init' : function () { },

'buildSectionNav' : function () { },

'buildItemNav' : function () { },

'showSection' : function () { },

'showContentItem' : function () { }

};



* This source code was highlighted with Source Code Highlighter .

myFeature.config



ध्यान देने योग्य myFeature.config



, जो एक स्थान पर डिफ़ॉल्ट मान संग्रहीत करता है। जब हम myFeature.init ()



विधि को परिभाषित करते हैं तो हम डिफ़ॉल्ट मानों को ओवरराइड करने की क्षमता जोड़ देंगे।

चरण 3: कोड

इस कंकाल का निर्माण करने के बाद, हम कोड लिखना शुरू कर सकते हैं। आइए एक सरल myFeature.config



ऑब्जेक्ट और myFeature.init ()



विधि बनाकर शुरू करें:

'config' : {

// #myFeature

'container' : $( '#myFeature' )

},



'init' : function (config) {

// init()

if (config && typeof (config) == 'object' ) {

$.extend(myFeature.config, config);

}



// / DOM

//

myFeature.$container = myFeature.config.container;



myFeature.$sections = myFeature.$container.

//

find( 'ul.sections > li' );



myFeature.$section_nav = $( '<p/>' )

.attr( 'id' , 'section_nav' )

.prependTo(myFeature.$container);



myFeature.$item_nav = $( '<p/>' )

.attr( 'id' , 'item_nav' )

.insertAfter(myFeature.$section_nav);



myFeature.$content = $( '<p/>' )

.attr( 'id' , 'content' )

. insertAfter(myFeature.$item_nav);



//

// ""

myFeature.buildSectionNav(myFeature.$sections);

myFeature.$section_nav.find( 'li:first' ).click();



// HTML

myFeature.$container.find( 'ul.sections' ).hide();



// ( )

myFeature.initialized = true ;

}



* This source code was highlighted with Source Code Highlighter .

अगला, myFeature.buildSectionNav ()



विधि बनाएँ:

'buildSectionNav' : function ($sections) {



//

$sections.each( function () {



var $section = $( this );



//

$( '<li/>' )

// h2

//

.text($section.find( 'h2:first' ).text())



//

.appendTo(myFeature.$section_nav)



// data()

.data( 'section' , $section)



// click

.click(myFeature.showSection);

});



* This source code was highlighted with Source Code Highlighter .

अगला, myFeature.buildItemNav()



विधि बनाएँ:

'buildItemNav' : function ($items) {

$items.each( function () {



var $item = $( this );



//

$( '<li>' )



// h3

//

.text($item.find( 'h3:first' ).text())



// add the list item to the item navigation

.appendTo(myFeature.$item.nav)



// data()

.data( 'item' , $item)



// click

.click(myFeature.showContentItem);

});



* This source code was highlighted with Source Code Highlighter .

अंत में, हम अनुभागों और सामग्री तत्वों को प्रदर्शित करने के लिए तरीके लिखेंगे:

'showSection' : function () {

var $li = $( this );



//

myFeature.$item_nav.empty();

myFeature.$content.empty();



// jQuery

// data() buildSectionNav

var $section = $li.data( 'section' );



//

$li.addClass( 'current' )

.siblings().removeClass( 'current' );



//

var $items = $section.find( 'ul li' );



//

myFeature.buildItemNav($items);



// ""

myFeature.$item_nav.find( 'li:first' ).click();



},



'showContentItem' : function () {

var $li = $( this );



//

$li.addClass( 'current' )

.siblings().removeClass( 'current' );



// jQuery

// data() buildSectionNav

var $item = $li.data( 'item' );



//

myFeature.$content.html($item.html());

}



* This source code was highlighted with Source Code Highlighter .

सब कुछ करने के लिए छोड़ दिया है myFeature.init()



:

$( document ).ready(myFeature.init);



* This source code was highlighted with Source Code Highlighter .

आप पूरी तस्वीर यहां देख सकते हैं (+ कुछ सीएसएस देखने के लिए)।

चरण 4: आवश्यकताएँ बदलें

अंतिम समय में आवश्यकताओं को बदलने के बिना एक भी परियोजना नहीं कर सकती है, है ना? ऑब्जेक्ट लिटरल दृष्टिकोण आवश्यक परिवर्तन को जल्दी और दर्द रहित तरीके से करने में मदद करता है।



अगर हमें AJAX का उपयोग करके अंश की सामग्री प्राप्त करने की आवश्यकता है, और HTML से नहीं तो क्या होगा? बैकएंड सेटिंग को छोड़कर:

var myFeature = {



'config' : {

'container' : $( '#myFeature' ),



//

// URL

'getItemURL' : function ($item) {

return $item.find( 'a:first' ).attr( 'href' );

}



},



'init' : function (config) {

//

},



'buildSectionNav' : function ($sections) {

//

},



'buildItemNav' : function ($items) {

//

},



'showSection' : function () {

//

},



'showContentItem' : function () {



var $li = $( this );



$li.addClass( 'current' ).

siblings().removeClass( 'current' );



var $item = $li.data( 'item' );

var url = myFeature.config.getItemURL($item);



// myFeature.$content.html($item.html());

myFeature.$content.load(url);



}



};



* This source code was highlighted with Source Code Highlighter .

अधिक लचीलापन चाहिए? कई चीजें हैं जिन्हें आप कॉन्फ़िगर कर सकते हैं (और इसलिए फिर से परिभाषित करें)। उदाहरण के लिए, आप प्रत्येक नेविगेशन आइटम के लिए शीर्षक पाठ को खोजने और संसाधित करने के तरीके को निर्दिष्ट करने के लिए myFeature.config का उपयोग कर सकते हैं:

var myFeature = {

'config' : {

'container' : $( '#myFeature' ),



'itemNavSelector' : 'h3' ,



'itemNavProcessor' : function ($selection) {

return 'Preview of ' +

$selection.eq(0).text();

}

},



'init' : function (config) {

//

},



'buildSectionNav' : function ($sections) {

//

},



'buildItemNav' : function ($items) {



$items.each( function () {

var $item = $( this );



var myText = myFeature.config.itemNavProcessor(

$item.find(myFeature.config.itemNavSelector)

);



$( '<li/>' )



.text(myText)

.appendTo(myFeature.$item_nav)

.data( 'item' , $item)

.click(myFeature.showContentItem);

});

},



'showSection' : function () {

//

},



'showContentItem' : function () {

//

}



};



* This source code was highlighted with Source Code Highlighter .

डिफ़ॉल्ट कॉन्फ़िगरेशन ऑब्जेक्ट को जोड़ने के बाद, आप myFeature.init ()



कॉल करके इसे ओवरराइड कर सकते हैं

$( document ).ready( function () {

myFeature.init({ 'itemNavSelector' : 'h2' });

});



* This source code was highlighted with Source Code Highlighter .

निष्कर्ष

यदि आप इस लेख में कोड उदाहरणों को देखते हैं, तो आपको ऑब्जेक्ट लिटरल की एक बुनियादी समझ होनी चाहिए, और आप इस दृष्टिकोण का उपयोग अधिक जटिल इंटरैक्शन बनाने के लिए कैसे कर सकते हैं।



एक उदाहरण यहाँ से लिया गया है ।

आगे पढ़ रहे हैं

• मार्कअप-आधारित विनीत व्यापक डोम-तैयार निष्पादन
• ऑब्जेक्ट शाब्दिक के लिए प्यार दिखाओ