जावास्क्रिप्टमध्ये स्पॅगेटी कोड कसा टाळावा

पणजी, भारत १२ जुलै, २०२६ ALN: जावास्क्रिप्ट ही वेब साइट्सवर वापरली जाणारी एक अत्यंत लोकप्रिय प्रोग्रामिंग भाषा आहे. सर्व प्रमुख ब्राउझर जावास्क्रिप्टला समर्थन देतात. जवळजवळ प्रत्येक वेबसाइट UI क्रियाकलापांसाठी जावास्क्रिप्टचा वापर करते. तरीही, अनेक लोक जावास्क्रिप्टला एक आकर्षक प्रोग्रामिंग भाषा मानत नाहीत.

याचे कारण म्हणजे जावास्क्रिप्टच्या प्रकाराबद्दलची अनिश्चितता. बहुतेक लोक म्हणतात की ती एक कार्यात्मक भाषा आहे, परंतु त्यात ऑब्जेक्ट्सची व्याख्या करता येते. त्यामुळे जावास्क्रिप्ट एक ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग (OOP) भाषा आहे का? पण त्यात वारसा नाही, त्यामुळे ती OOP कशी होईल? जावास्क्रिप्ट एक अत्यंत सामान्य भाषा आहे ज्यात कमी निर्बंध आहेत, आणि त्यामुळे तिचा वापर कसा करावा याबद्दल अनिश्चितता निर्माण होते. परिणामी, बहुतेक वेळा स्पॅगेटी कोड तयार होतो.

या लेखात, मी जावास्क्रिप्टमध्ये ऑब्जेक्ट्स कसे परिभाषित करायचे हे दर्शवणार आहे, ज्यामुळे लांब फाईल्स आणि अनेक जागतिक कार्ये टाळता येतील. याला अनेक फायदे आहेत:

• कोडची वाचनक्षमता: ऑब्जेक्ट्समध्ये विभागणी केल्याने कार्ये मॉड्यूलनुसार विभाजित केली जातात.
• कोडची देखभाल सुलभ करते: कोडचे व्यवस्थापन सोपे होते.
• कोड पुनरुपयोग: कार्ये पुनरुपयोग करणे सोपे होते.
• कॅप्सुलेशनला समर्थन: या लेखात मी या लाभावर विस्ताराने चर्चा करणार नाही, परंतु हे विषयाचे एक प्रारंभिक परिचय आहे.

आता, जावास्क्रिप्ट एक डायनॅमिक भाषा आहे का? जावास्क्रिप्ट एक डायनॅमिक भाषा आहे. डायनॅमिक भाषा म्हणजे उच्च स्तराची भाषा जी रनटाइममध्ये कार्ये पार करते, जसे की व्हेरिएबल्सची व्याख्या करणे, नवीन कार्ये तयार करणे, आणि विद्यमान ऑब्जेक्ट्सचा विस्तार करणे. हे सर्व कार्ये रनटाइममध्ये पार केली जातात.

जावास्क्रिप्ट एक डायनॅमिक भाषा आहे हे जाणून घेणे महत्त्वाचे आहे. ज्यांनी डायनॅमिक भाषेसोबत काम केलेले नाही, ते जावास्क्रिप्टला एक कमजोर, चुकीची, आणि डिबग करणे कठीण असलेली भाषा मानतात. परंतु, डायनॅमिक भाषेच्या फायद्यांचा उपयोग शिकल्यावर, तुम्हाला साधे परंतु शक्तिशाली साधने मिळतात - तुम्हाला फक्त धैर्य आणि सहनशीलता दाखवावी लागेल.

मी चार वर्षे वेब डेव्हलपमेंटमध्ये काम करत आहे आणि जावास्क्रिप्टमध्ये बरेच काही लिहिले आहे, परंतु मी नेहमी त्याचा वापर कमी करण्याचा प्रयत्न केला. अलीकडे, मला एक प्रोजेक्ट मिळाला ज्यामुळे मला जावास्क्रिप्टमध्ये एक जटिल प्रणाली विकसित करावी लागली, ज्यात मॉड्यूलरिटी, योग्य त्रुटी हाताळणी, इव्हेंट व्यवस्थापन, आणि इतर अनेक गोष्टींची आवश्यकता होती. सुरुवातीला मी खूप घाबरलो आणि काम स्वीकारण्यास नकार दिला. पण शेवटी, मी स्वीकारले आणि काम करताना मला अनेक साधने सापडली ज्या बहुतेक लोकांना माहित नाहीत आणि जावास्क्रिप्टमध्ये प्रोग्रामिंगसाठी अत्यंत उपयुक्त ठरू शकतात.

या लेखात मी पुढील विषयांवर चर्चा करणार आहे:

• जावास्क्रिप्ट फाईल्समध्ये ऑब्जेक्ट्सचा योग्य वापर
• “क्लासेस” तयार करण्याचे विविध मार्ग
• अॅप्लिकेशनमध्ये स्कोपिंगची व्याख्या
• रेग्युलर एक्सप्रेशनचा वापर
• त्रुटींचे योग्य हाताळणे
• नेमस्पेससह काम करणे
• इव्हेंट्ससाठी यंत्रणा तयार करणे
• डायनॅमिक भाषेमध्ये प्रगत क्षमता

ऑब्जेक्ट कसा तयार करावा

तुम्ही वेब डेव्हलपर्स आहात का? जर होय, तर तुम्ही जावास्क्रिप्टमध्ये काहीतरी लिहिले असेल. तुमच्याकडे प्रत्येक वेबसाइटवर सरासरी 10-40 कार्ये असतील. आणि जागतिक व्हेरिएबल्स (var) असतीलच. जर तुमचा उत्तर होय असेल, तर माझा प्रश्न आहे - सर्व कार्ये पृष्ठावर किंवा स्वतंत्र फाईलमध्ये व्याख्यायित आहेत का? तुम्ही व्हेरिएबल्स आणि कार्यांना स्वतंत्र युनिट्समध्ये (ऑब्जेक्ट्स) गटबद्ध केले आहे का?

उदाहरण फाईल जावास्क्रिप्ट कोडसह

या लेखाच्या शेवटी, मी ऑब्जेक्ट्समध्ये विभागलेला जावास्क्रिप्ट कोड दर्शवणारी एक उदाहरण फाईल जोडली आहे.

कार्ये आणि व्हेरिएबल्सचे ऑब्जेक्ट्समध्ये गटबद्ध करणे

ऑब्जेक्टची व्याख्या JSON फॉरमॅटवर आधारित आहे, ज्याला जावास्क्रिप्ट ऑब्जेक्ट नोटेशन असेही म्हणतात.

साधी व्याख्या

खालील उदाहरणात, एक ऑब्जेक्ट व्याख्यायित केला आहे ज्यामध्ये अनेक गुणधर्म आहेत:

var oUser = { sName : 'eran', nAge : 30, bMarried : true };
// पर्यायी सिंटॅक्स (वरील सारखेच अर्थ)
var oUser = { 'sName' : 'eran', 'nAge' : 30, 'bMarried' : true };

ज्यावेळी:

• JSON मध्ये ऑब्जेक्ट वक्र कोष्ठकांमध्ये असतो.
• प्रत्येक गुणधर्म एक गुणधर्म नाव आणि मूल्य यांच्यात विभाजित असतो.
• प्रत्येक गुणधर्म जोडणी एक अल्पविरामाने विभाजित असतो.
• गुणधर्माचे नाव कोटांमध्ये किंवा कोटांशिवाय व्याख्यायित केले जाऊ शकते.
• गुणधर्माचा प्रकार त्यात ठेवलेल्या मूल्यावर अवलंबून असतो.
• JSON फॉरमॅटमध्ये ऑब्जेक्टची व्याख्या करणे ऑब्जेक्टची रचना निश्चित करते.

ऑब्जेक्टसह काम करण्याचे उदाहरण:

// वापरकर्त्याचे नाव बदला
oUser.sName = "liron";

ऑब्जेक्ट्सच्या अ‍ॅरेची व्याख्या

खालील उदाहरणात, एक ऑब्जेक्ट व्याख्यायित केला आहे जो ऑब्जेक्ट्सच्या अ‍ॅरेचा प्रतिनिधित्व करतो:

var arrColors = [ 'red', 'green', 'yellow' ];
var arrCar = [ {sManufacturer : 'toyota', sModel : 'corolla'}, { sManufacturer : 'subaro', sModel :'impreza'}];

ज्यावेळी:

• JSON मध्ये अ‍ॅरे वर्तुळाकार कोष्ठकांमध्ये असतो.
• अ‍ॅरेमधील प्रत्येक घटक एक ऑब्जेक्ट दर्शवतो.
• सर्वात वरच्या ओळीत साध्या प्रकारांचे घटक व्याख्यायित केले जाऊ शकतात.
• दुसऱ्या ओळीत ऑब्जेक्ट्स म्हणून घटक व्याख्यायित केले जाऊ शकतात.

अ‍ॅरेमधील एक घटक वापरण्याचे उदाहरण:

if (arrCar[0].sManufacturer == 'toyota') {
 // काहीतरी करा
}

जटिल व्याख्या

खालील उदाहरणात, एक ऑब्जेक्ट व्याख्यायित केला आहे जो दुसऱ्या ऑब्जेक्टमध्ये समाविष्ट आहे, कार्य प्रकाराचे गुणधर्म आणि ऑब्जेक्टमध्ये अ‍ॅरेचा वापर दर्शवतो:

var oUser = {
 sName : 'eran', 
 arrChildren : ,
 oStatus : {bIsHappy : true, bIsFriendly : true}, 
 introduce : function { alert(this.sName); }
};

ज्यावेळी:

• प्रत्येक गुणधर्म एका ओळीत लिहिला आहे.
• arrChildren गुणधर्म अ‍ॅरे प्रकाराचा आहे आणि सध्या त्यात कोणतेही मूल्य नाही.
• oStatus गुणधर्म एक अंतर्गत ऑब्जेक्ट आहे.
• Introduce गुणधर्म एक कार्य आहे.

ऑब्जेक्टसह काम करण्याचे उदाहरण:

// अ‍ॅरेमध्ये मुलगा जोडा
oUser.arrChildren.push({sName : 'gali'});
// अंतर्गत ऑब्जेक्टमध्ये प्रवेश करा
oUser.oStatus.bIsHappy = true;
// ऑब्जेक्ट कार्य चालवा
oUser.introduce ;

अ‍ॅप्लिकेशन स्तरावर ऑब्जेक्टची व्याख्या

अ‍ॅप्लिकेशन स्तरावर ऑब्जेक्टची व्याख्या करण्याचे दोन मार्ग आहेत.

मार्ग 1 – अप्रत्यक्ष व्याख्या (implicit)

अ‍ॅप्लिकेशन स्तरावर ऑब्जेक्ट तयार करण्यासाठी, पृष्ठावर कुठेतरी एक व्हेरिएबल व्याख्यायित करणे आवश्यक आहे. हे सुनिश्चित करा की ते कार्यामध्ये व्याख्यायित केलेले नाही.

var oUser = { sName : 'eran', nAge : 30, bMarried : true };

मार्ग 2 – थेट व्याख्या (explicit)

या मार्गाने, आपण विंडो ऑब्जेक्टसह काम करतो आणि त्यात तयार केलेला ऑब्जेक्ट जोडतो.

window["oUser"] = { sName : 'eran', nAge : 30, bMarried : true };

महत्त्वाचे म्हणजे, दोन्ही मार्ग समान कार्य करतात. फक्त एक फरक आहे की मार्ग 1 मध्ये, पृष्ठ स्तरावर व्हेरिएबल व्याख्यायित केल्यास, तो आपोआप विंडो ऑब्जेक्टमध्ये जोडला जातो.

सारांश

या लेखात, जावास्क्रिप्टमध्ये ऑब्जेक्टची व्याख्या करण्याचा एक सोपा मार्ग पाहिला. या पद्धतीचे अनेक फायदे आहेत. मी तुम्हाला या पद्धतीचा प्रयत्न करण्याची शिफारस करतो, फक्त काळजी घ्या - हे व्यसन लागणारे आहे.

उदाहरण फाईल जावास्क्रिप्ट कोडसह

समारोप

जावास्क्रिप्टच्या बाह्य फाईलमध्ये लिहिलेल्या कोडमध्ये आणि पृष्ठामध्ये लिहिलेल्या कोडमध्ये काही फरक आहे का?

कार्यात्मक दृष्टिकोनातून, काही फरक नाही. ब्राउझर बाह्य जावास्क्रिप्ट फाईल आयात करतो आणि त्याच्या सामग्रीला पृष्ठावर चिकटवतो. त्यामुळे, तुम्ही बाह्य फाईलमध्ये किंवा पृष्ठामध्ये ऑब्जेक्ट्स व्याख्यायित करू शकता आणि दोन्ही समान वर्तन करतील.

फंक्शन A ला फंक्शन B मधून कसे कॉल करावे जेव्हा दोन्ही फंक्शन्स ऑब्जेक्टशी संबंधित असतात

आपण राखलेले शब्द 'this' वापरू. दुसरा पर्याय म्हणजे, कारण हा ऑब्जेक्ट अ‍ॅप्लिकेशन स्तरावर तयार केला आहे, तुम्ही पूर्ण ऑब्जेक्ट नावाने त्याला कॉल करू शकता.

var oSearch = {
 performSearch : function(sQuery) {
 // पर्यायी 1 - राखलेले शब्द 'this' वापरून
 this.executeSearch(sQuery,false);
 // पर्यायी 2 - अ‍ॅप्लिकेशन ऑब्जेक्ट 'oSearch' ला कॉल करणे
 oSearch.executeSearch(sQuery,false);
 },
 executeSearch : function(sQuery, bIsAjax) {
 // कार्यान्वयनाची मागणी हाताळा
 }
}

महत्त्वाचे म्हणजे, जर तुम्ही थेट फंक्शनला कॉल केला, तर तुम्हाला त्रुटी मिळेल - तुम्हाला वरील दोन मार्गांपैकी एक वापरावा लागेल.

ערן.