जावास्क्रिप्ट सीखने के लिए एक अपेक्षाकृत सरल भाषा है। हालाँकि, इसमें पर्याप्त से अधिक त्रुटियाँ हैं। क्या आप वाकई उन्हें अनुमति नहीं देते हैं? आज हम 11 सबसे आम गलतियों को देखते हैं।
गलती 1 - ग्लोबल वेरिएबल्स का उपयोग करना
यदि आप केवल जावास्क्रिप्ट से परिचित हैं, तो आप शायद सोचते हैं कि यह महान है जब सभी चर वैश्विक हैं। वास्तव में, आप इस उपकरण की सभी जटिलताओं को नहीं जानते होंगे। वैश्विक चर वे चर होते हैं जो कोड के किसी भी हिस्से से सुलभ होते हैं, भले ही वे विभिन्न .js फ़ाइलों में लोड किए गए हों। लुभावना लगता है, है ना? परिवर्तन के लिए कोई भी चर हमेशा उपलब्ध होता है।
वास्तव में, नहीं।
यह एक बुरा विचार है क्योंकि आप अनायास ही मूल्यों को अधिलेखित कर सकते हैं। कहें कि आपके पास एक ऑनलाइन स्टोर है और टोकरी में जोड़े गए वस्तुओं के मूल्यों की गणना करने के लिए जावास्क्रिप्ट का उपयोग करें। यहाँ एक नमूना कोड है:
var total = 0,
अब, मान लें कि आप किसी पृष्ठ पर ट्वीट्स प्रदर्शित करने के लिए एक कोड का उपयोग करते हैं, या अपने उत्पादों की एक मिनी गैलरी बनाते हैं। और इसमें इस तरह कोड हो सकता है:
var total = 15;
या
var tax = function () { };
अब आपको एक समस्या है। दो महत्वपूर्ण चर ओवरराइट किए गए हैं और आपका कोड ठीक से काम नहीं कर रहा है। इसके लिए भुगतान करना अनमोल समय का पुनर्लेखन है।
तो उपाय क्या है? एक शब्द में,
एनकैप्सुलेशन ; लेकिन इससे बचने के और भी कई तरीके हैं। सबसे पहले, आप एक कॉल के रूप में सभी कोड लिख सकते हैं, अनाम कार्य:
(function () { var total = 0, tax = 0.05;
और बाहर से कोई कोड फ़ंक्शन के अंदर कोड को नहीं मिलता है। यह "व्यक्तिगत" कोड के लिए बहुत अच्छा काम करता है, लेकिन यह उस कार्यक्षमता को प्रदान नहीं करता है जिसकी हमें आवश्यकता है। उदाहरण के लिए, यदि हम एक टोकरी-काउंटर चाहते हैं जिसे अन्य टेम्पलेट के रूप में उपयोग कर सकते हैं, तो ऐसा करना अच्छा होगा:
var cartTotaler = (function () { var total = 0; tax = 0.05;
वैश्विक चर के बारे में थोड़ा और अधिक: ध्यान दें कि यदि आप चर बनाते समय चर कीवर्ड का उपयोग नहीं करते हैं, तो जावास्क्रिप्ट इंजन इसे डिफ़ॉल्ट रूप से वैश्विक के रूप में परिभाषित करता है। उदाहरण के लिए:
(function () { tax = 0.05; }()); var totalPrice = 100 + (100 * tax);
कर चर हमारे फ़ंक्शन के बाहर उपलब्ध है क्योंकि इसे घोषित करते समय शब्द
संस्करण का उपयोग नहीं किया गया था। इसके लिए देखें।
त्रुटि 2 - अर्धविराम के बारे में भूल गए
जावास्क्रिप्ट में कोई भी बयान अर्धविराम के साथ समाप्त होना चाहिए। यह बहुत सरल है। यदि आप भूल जाते हैं, तो कंपाइलर आपके लिए काम करेगा। तो, आप उन्हें नहीं डाल सकते हैं?
खैर, कुछ जगहों पर यह महत्वपूर्ण है। उदाहरण के लिए, यदि आपके पास लूप बॉडी में कई स्टेटमेंट चल रहे हैं। अन्यथा, संकलक एक त्रुटि फेंक देगा। लाइन के अंत के बारे में क्या?
जावास्क्रिप्ट समुदाय इस पर विभाजित है। बैरिकेड्स के दोनों तरफ मजबूत तर्क दिए गए हैं। यहाँ मेरा तर्क है: यदि आप इस प्रश्न में (यहां तक कि सरलतम कोड में) संकलक पर भरोसा करते हैं, तो आप आग से खेलते हैं।
उदाहरण के लिए, ऐसा सरल कार्य:
function returnPerson (name) { return { name : name }; }
ऐसा लगता है कि इसे एक अच्छी छोटी वस्तु लौटानी चाहिए ... लेकिन संकलक तय करेगा कि आप वापसी के बाद अर्धविराम लगाना चाहते थे, इसलिए कुछ भी नहीं लौटेगा, और वस्तु को नजरअंदाज कर दिया जाएगा। आपको निम्न कार्य करना चाहिए:
return { name : name };
इसलिए, मेरी सलाह है कि आप अर्धविराम लगाएं; ईमानदारी से, यह आदत में बहुत जल्दी हो जाता है। हालांकि, एक वेब डेवलपर के रूप में, आप शायद अन्य भाषाओं (उदाहरण के लिए, PHP) का उपयोग करते हैं, जहां आपको अर्धविराम लगाने की आवश्यकता नहीं है। फिर क्यों?
नोट: यदि आप प्रत्येक स्थिति के बारे में नहीं जानते हैं जहां इसे कम करने की अनुमति है, तो जोखिम न लेना बेहतर है।गलती 3 - == का उपयोग करना
यदि आप अब पहले जावास्क्रिप्ट डेवलपर से आने के लिए कहते हैं: "जावास्क्रिप्ट में सबसे आम त्रुटि क्या है?", सबसे अधिक संभावना है कि वह जवाब देगा: "=== के बजाय = का उपयोग करना"। इसका क्या मतलब है?
इसे आज़माएं:
if (1 == 1) { console.log("!"); }
आपको कोड काम करने की उम्मीद है, है ना? ठीक है, अब निम्नलिखित प्रयास करें:
if (1 == '1') { console.log("!"); }
हाँ, "सत्य!" आपके कंसोल में कटा हुआ ... और हाँ, यह बुरा है। निम्नलिखित यहाँ होता है, == समकारी ऑपरेटर है। यह दो चरों को यथासंभव समान बनाता है। हमारे मामले में, स्ट्रिंग "1" को नंबर 1 में बदल दिया गया है, और हमारा if-statement
सही है ।
समाधान, जैसा कि आप इसे समझते हैं, === का उपयोग करना है; यह सब ऑपरेटरों के मामले में मान्य है! == और! =।
और अब, मौज-मस्ती के लिए, दोहरी समानता से निकली कुछ सबसे अच्छी गलतियाँ:
'' == '0'
गलती 4 - रैपिंग प्रकार की वस्तुओं का उपयोग करना
जावास्क्रिप्ट कृपया (!) हमें आसान (!) प्रकार के निर्माण के लिए कुछ प्रकार के रैपर देता है।
new Number(10); new String("!"); new Boolean(true); new Object(); new Array("", "", "");
सबसे पहले, यह सुपर असुविधाजनक है। यह सब कीस्ट्रोक्स की काफी कम संख्या के साथ किया जा सकता है।
10; ""; true; {}; ["", "", ""];
लेकिन रुकिए, यह सब नहीं है: ये दोनों चीजें बिल्कुल समान नहीं हैं। यहाँ इस विषय पर डगलस क्रोकफोर्ड * क्या कहते हैं:
उदाहरण के लिए, नया बूलियन (झूठा) एक ऑब्जेक्ट का उत्पादन करता है जिसमें एक वैल्यूऑफ विधि होती है जो एक लिपटे मूल्य को वापस करती है।
- जावास्क्रिप्ट: द गुड पार्ट्स, पृष्ठ 114इसका मतलब यह है कि यदि आप
टाइपोफ नया नंबर (10) या
टाइपोफ नई स्ट्रिंग ("हैलो!") चलाते हैं, तो आपको एक 'ऑब्जेक्ट' मिलेगा - वह नहीं जो आप चाहते थे। साथ ही, शेल का उपयोग करने से अप्रत्याशित प्रतिक्रिया हो सकती है।
तो जावास्क्रिप्ट हमें इन वस्तुओं को क्यों देता है? आंतरिक उपयोग के लिए। आदिम मूल्यों की कोई विधि नहीं है (क्योंकि वे वस्तु नहीं हैं); इसलिए, जब किसी आदिम ऑब्जेक्ट पर एक विधि को कॉल किया जाता है (उदाहरण के लिए, "हेलो लोग!" प्रतिस्थापित ("लोग", "हब्रेलुडी")), जावास्क्रिप्ट स्ट्रिंग के लिए एक आवरण बनाता है, काम करता है, और फिर ऑब्जेक्ट को अनसुना कर देता है।
जावास्क्रिप्ट के लिए आवरण छोड़ें और आदिम मूल्यों का उपयोग करें।
त्रुटि 5 - फॉर-इन का उपयोग करते समय कोई विशेषता सत्यापन नहीं
हम सभी सरणियों की गणना से परिचित हैं; हालाँकि, आपको ऑब्जेक्ट के गुणों पर पुनरावृति करने की आवश्यकता हो सकती है। (पाचन। दरअसल, सरणी के तत्व एक वस्तु के गिने हुए गुण हैं।) यदि आपने पहले ऐसा नहीं किया है, तो आपने फॉर-इन लूप का उपयोग किया है:
var prop, obj = { name: "", job: "", age: 55 }; for (var prop in obj) { console.log(prop + ": " + obj[prop]); }
यदि आप यह कोड चलाते हैं, तो आपको निम्न आउटपुट देखना चाहिए:
name: job: age: 55
हालाँकि, ब्राउज़र में चेन के नीचे गुण और विधियाँ शामिल होंगी। सबसे अधिक संभावना है, आप नहीं चाहते कि इन गुणों को सूचीबद्ध किया जाए। आपको उन
ऑब्जेक्ट्स को फ़िल्टर करने के लिए
hasOwnProperties का उपयोग करना होगा जो ऑब्जेक्ट नहीं हैं:
Function Dog (name) { this.name = name; } Dog.prototype.legs = 4; Dog.prototype.speak = function () { return "!"; }; var d = new Dog(""); for (var prop in d) { console.log( prop + ": " + d[prop] ); } console.log("====="); for (var prop in d) { if (d.hasOwnProperty(prop)) { console.log( prop + ": " + d[prop] ); } }
कभी-कभी आपको गुणों की आवश्यकता होती है, लेकिन आप कुछ तरीकों को फ़िल्टर करना चाहते हैं। यह
टाइपोफ़ का उपयोग करके किया जा सकता है:
for (var prop in d) { if (typeof d[prop] !== 'function') { console.log( prop + ": " + d[prop] ); } }
किसी भी मामले में, हमेशा अवांछित परिणामों से बचने के लिए भाव स्पष्ट होते हैं।
त्रुटि 6 - के साथ या eval का उपयोग करना
सौभाग्य से, अधिकांश स्रोत आज या उसके
साथ नहीं सीखते हैं। लेकिन अगर आप पुराने या बहुत आधिकारिक स्रोतों का उपयोग नहीं करते हैं (कभी-कभी इंटरनेट पर खोजने के लिए अच्छी सामग्री वास्तव में कठिन होती है), तो आप
वहां से खोज कर सकते हैं या उनका उपयोग कर सकते हैं।
एक भयानक शुरुआत, डेवलपर।
तो, चलो शुरू
करते हैं । दो मुख्य कारण जो आप इसका उपयोग नहीं कर सकते हैं:
- यह आपके कोड को धीमा कर देता है।
- यह हमेशा स्पष्ट नहीं होता है कि आप क्या कर रहे हैं।
बिंदु एक अपनी जमीन खड़ा है। तो चलिए एक पल के लिए देख लेते हैं। यहां बताया गया है कि कैसे काम करता है: आप एक वस्तु को एक अभिव्यक्ति के साथ भेजते हैं; तब, ब्लॉक के अंदर, आप ऑब्जेक्ट के गुणों को चर के रूप में एक्सेस कर सकते हैं:
var person = { name: "", age : 10 }; with (person) { console.log(name);
लेकिन क्या होगा अगर हमारे पास ऑब्जेक्ट के साथ समान नाम वाला वैरिएबल है? मूल रूप से, यदि दोनों हैं, तो चर का उपयोग किया जाएगा। लेकिन आप के साथ वस्तु के लिए गुण नहीं जोड़ सकते हैं। यदि कोई संपत्ति नहीं है या चर मौजूद है, तो चर यह कथन के बाहर से कर सकता है:
var person = { name: "", age : 10 }, name = ""; with (person) { console.log(name);
चलो
आगे बढ़ने के लिए। संक्षेप में, आप एक फ़ंक्शन के लिए कोड की एक पंक्ति पारित कर सकते हैं, और यह इसे निष्पादित करेगा।
eval( "Console.log('!');" );
हानिरहित, शक्तिशाली भी लगता है? वास्तव में, यह मुख्य समस्या है - बहुत अधिक शक्ति। जाहिर है, इस तरह से लाइनें लिखने का कोई कारण नहीं है, क्योंकि 1) सरल तरीके से क्यों नहीं लिखा जाता है? और 2) eval धीमा हो जाता है और साथ ही साथ। इस प्रकार, eval का मुख्य उपयोग उस कोड को निष्पादित करना है जिसकी आपको फिलहाल आवश्यकता नहीं है। आप इसे सर्वर से या सीधे उपयोगकर्ता से प्राप्त कर सकते हैं। क्या आप वाकई साइट उपयोगकर्ताओं को अपने कोड का पूर्ण नियंत्रण देना चाहते हैं? मुझे उम्मीद है कि नहीं इसके अलावा, वह हैकर्स के लिए अपनी वेबसाइट खोलता है: EVAL का उपयोग करना एक संकेत है जो कहता है: "मैं दूर हूं, और कुंजी गलीचा के नीचे है।" यदि आप अपने या अपने उपयोगकर्ताओं से प्यार करते हैं: इसका उपयोग न करें।
त्रुटि 7 - हम parseInt का उपयोग करते समय संख्या प्रणाली का उपयोग करने के बारे में भूल जाते हैं
जावास्क्रिप्ट हमें एक छोटा फ़ंक्शन देता है जो एक स्ट्रिंग को एक संख्या से एक संख्या में बदलने में मदद करता है:
parseInt("200");
और वहां क्या हुआ? क्या दूसरा उदाहरण 43 नहीं होना चाहिए? वास्तव में,
parseInt केवल दशमलव प्रणाली के साथ काम नहीं करता है। जब वह 0 से शुरू होने वाली रेखा को देखता है, तो वह इसे एक अष्टक संख्या मानता है। इसलिए, हमें संख्या प्रणालियों के बारे में नहीं भूलना चाहिए; वे आधार संख्या के बारे में कार्य करते हैं।
parseInt("020", 10);
त्रुटि 8 - अगर और जब बयान का उपयोग कर रहे हैं तो ब्रैकेट का उपयोग नहीं किया जाता है
जावास्क्रिप्ट के गुणों में से एक लचीलापन है। लेकिन कभी-कभी वह आपके खिलाफ हो सकता है। यह
अगर और
जब बयान में यौगिक में घुंघराले ब्रेसिज़ के साथ होता है। यदि कथन में कोड की केवल एक पंक्ति है, तो ब्रैकेट वैकल्पिक हैं:
if (true) console.log(" if");
यह बहुत सुविधाजनक है, क्योंकि आप एक ही लाइन पर बयान जारी रख सकते हैं:
var arr = ["", "", "", "", "", "", "", "", "", ""], i = arr.length - i; while (i) console.log( arr[i--] );
लेकिन यह कई कारणों से उचित नहीं है। सबसे पहले, यह तकनीक अस्पष्ट छोड़ती है:
if (true) console.log(" if"); console.log(" if");
देखो मेरा क्या मतलब है? दूसरी पंक्ति ऑपरेटर में नहीं है, लेकिन यह बहुत विश्वसनीय लगती है। ब्रैकेट यहाँ स्पष्टता लाते हैं। इसके अलावा, यदि आप एक पंक्ति जोड़ना चाहते हैं तो, कोष्ठक को न भूलें। बेहतर उन्हें तुरंत जोड़ें, यह बहुत आसान है। कर लो।
त्रुटि 9 - DOM के तत्वों को एक-एक करके जोड़ना
हाँ, हाँ, यह जावास्क्रिप्ट नहीं है। लेकिन 100 में से 99 मामलों में, जावास्क्रिप्ट डोम को प्रभावित करता है। हालाँकि आप DOM में कई गलतियाँ कर सकते हैं, यहाँ सबसे बड़ी है।
JavaScript का उपयोग करके DOM तत्व को एम्बेड करना मज़ेदार और उपयोगी है, लेकिन दुर्भाग्य से यह पेज लोड करता है। इसलिए एक-एक करके कई DOM तत्वों को डालना एक बुरा विचार है:
var list = document.getElementById("list"), items = ["", "", "", ""], el; for (var i = 0; items[i]; i++) { el = document.createElement("li"); el.appendChild( document.createTextNode(items[i]) ); list.appendChild(el);
यहां आपको इसके बजाय क्या करना चाहिए: दस्तावेज़ टुकड़े का उपयोग करें। दस्तावेज़ के टुकड़े - डोम तत्वों को बचाने के लिए कंटेनर; फिर, अलग प्रविष्टि के बजाय, आप एक झपट्टा में सब कुछ कर सकते हैं। एक दस्तावेज़ टुकड़ा अपने आप में एक नोड नहीं है, और कुछ भी नहीं होगा यदि आप इसे ऑब्जेक्ट मॉडल में दिखाते हैं। यह अपने DOM को बिछाने से पहले तत्वों को रखने के लिए एक अदृश्य नेटवर्क होगा। यहाँ एक उदाहरण है:
var list = document.getElementById("list"), frag = document.createDocumentFragment(), items = ["", "", "", ""], el; for (var i = 0; items[i]; i++) { el = document.createElement("li"); el.appendChild( document.createTextNode(items[i]) ); frag.appendChild(el);
त्रुटि 10 - आप जावास्क्रिप्ट नहीं सीखते हैं
जावास्क्रिप्ट jQuery
नहीं है ठीक है? यदि आप उपरोक्त कई गलतियाँ करते हैं, तो आपको संभवतः जावास्क्रिप्ट पढ़ने की आवश्यकता है। जावास्क्रिप्ट एक ऐसी भाषा है जिसका उपयोग बहुत कम या बिना सीखने के साथ किया जा सकता है, इसलिए बहुत से लोग इस पर समय बर्बाद नहीं करते हैं। उनमें से एक मत बनो। कई अच्छी भाषा की पाठ्यपुस्तकें हैं, इसलिए आपके पास कोई बहाना नहीं है। यदि आप सभी जानते हैं कि jQuery (MooTools, आदि) है, तो आप अपने आप को एक बुरी जगह पर रख रहे हैं।
कई लोग जावास्क्रिप्ट को ठीक से सीखने में समय बर्बाद नहीं करते हैं।त्रुटि 11 - आप सभी नियमों का पालन करते हैं
अंतिम और अंतिम गलती - आप सभी नियमों का पालन करते हैं। हाँ, और कुछ यहाँ सूचीबद्ध हैं। हर किसी की तरह, उन्हें तोड़ने के लिए नियम। तथ्य यह है कि यदि आप समझते हैं कि एक या दूसरी तकनीक का उपयोग क्यों नहीं किया जा सकता है, तो यह एक उपकरण बन जाता है जिसे आप
सही स्थिति में
सही ढंग से लागू कर सकते हैं। JSON को पार्स करने का एकमात्र तरीका एकमात्र निष्कासन है। बेशक, सुरक्षा की जांच करने के कई तरीके हैं (पुस्तकालय का उपयोग करना बेहतर है)। यदि आप जानते हैं कि आप क्या कर रहे हैं और यदि यह आवश्यक है, तो आपको "बुरे अभ्यास" का उपयोग करने से डरना नहीं चाहिए।
बेशक, कभी भी गलती न करें 10।
डगलस क्रॉकफोर्ड - एक अमेरिकी प्रोग्रामर, जावास्क्रिप्ट के डेवलपर, ने JSON, याहू के एक प्रमुख डेवलपर, साथ ही याहूयूआई पुस्तकालय के निर्माता को लोकप्रिय बनाया।