जावास्क्रिप्ट डेवलपर्स के लिए 24 युक्तियाँ

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

1. === के बजाय === का उपयोग करें

जावास्क्रिप्ट के दो अलग-अलग प्रकार के तुलनात्मक संचालन हैं: === /! == और == =! =। तुलना के लिए हमेशा पहले जोड़े का उपयोग करना अच्छा रूप माना जाता है।

"यदि दो ऑपरेंड एक ही प्रकार और मूल्य के हैं, तो === सही लौटेगा, और! == गलत"
जावास्क्रिप्ट: द गुड पार्ट्स

२.मूल = बुराई

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

3. छोटे लेखन का उपयोग न करें

तकनीकी रूप से, आप घुंघराले ब्रेसिज़ और अर्धविराम के बिना कोड लिख सकते हैं। अधिकांश ब्राउज़र निम्न कोड की सही व्याख्या करेंगे:

if(someVariableExists)  
   x = false

?

if(someVariableExists)  
   x = false  
   anotherFunctionCall();  

-

if(someVariableExists) {  
   x = false;  
   anotherFunctionCall();  
}  

. :

if(someVariableExists) {  
   x = false;  
}  
anotherFunctionCall();  

. , , . , . ( . . .)

if(2 + 2 === 4) return 'nicely done';  

4. JS Lint

JSLint ( debugger, — . .), . .

JSLint JavaScript . , . , . JSLint - . . .”
– JSLint Documentation

, JSLint , .

IDE JetBrains WebStorm/PyCharm/PHPStorm JSLint.

. . .

5.

— . . .
JS — , body.

<p>And now you know my favorite kinds of corn. </p>  
<script type="text/javascript" src="path/to/file.js"></script>  
<script type="text/javascript" src="path/to/anotherFile.js"></script>  
</body>  
</html>

6. 'for"

«for» .

for(var i = 0; i < someArray.length; i++) {  
   var container = document.getElementById('container');  
   container.innerHtml += 'my number: ' + i;  
   console.log(i);  
}  

#container.

var container = document.getElementById('container');  
for(var i = 0, len = someArray.length; i < len;  i++) {  
   container.innerHtml += 'my number: ' + i;  
   console.log(i);  
}  

.

7.

For . .

var arr = ['item 1', 'item 2', 'item 3', ...];  
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';  

, ( ) .

( join()), .
— James Padolsey, james.padolsey.com

8.

« , , .»
— Douglas Crockford

var name = 'Jeffrey';  
var lastName = 'Way';  
  
function doSomething() {...}  
  
console.log(name); // Jeffrey -- or window.name  

var DudeNameSpace = {  
   name : 'Jeffrey',  
   lastName : 'Way',  
   doSomething : function() {...}  
}  
console.log(DudeNameSpace.name); // Jeffrey  

, , «DudeNameSpace».

9.

, . . -? , .

// Cycle through array and echo out each name.   
for(var i = 0, len = array.length; i < len; i++) {  
   console.log(array[i]);  
}  

10. (progressive enchantment)

JavaScript. « JS, ». .
Javascript? ( the Web Developer Toolbar .) . JS . JavaScript.

« » Progressive Enhancement - Graceful Degradation. . .

11. «SetInterval» «SetTimeOut»

:

setInterval(  
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000  
);  

, «eval». -. .

setInterval(someFunction, 3000);  

12. with

with . .

with (being.person.man.bodyparts) {  
   arms = true;  
   legs = true;  
}  

being.person.man.bodyparts.arms = true;  
being.person.man.bodyparts.legs= true;  

, . :

var o = being.person.man.bodyparts;  
o.arms = true;  
o.legs = true;  

13. {} New Object()

JavaScript. «new»,

var o = new Object();  
o.name = 'Jeffrey';  
o.lastName = 'Way';  
o.someFunction = function() {  
   console.log(this.name);  
}  

« » . , c

var o = {  
   name: 'Jeffrey',  
   lastName = 'Way',  
   someFunction : function() {  
      console.log(this.name);  
   }  
};  

— , {}

var o = {};  

, . .
— dyn-web.com, http://ww.dyn-web.com/tutorials/obj_lit.php

14. [] new Array()

.

var a = new Array();  
a[0] = "Joe";  
a[1] = 'Plumber';  

var a = ['Joe','Plumber'];  

« JavaSript — , . : — . — .
Douglas Crockford

15. ? „var“

var someItem = 'some string';  
var anotherItem = 'another string';  
var oneMoreItem = 'one more string';  

var someItem = 'some string',  
    anotherItem = 'another string',  
    oneMoreItem = 'one more string';  

. - , .

17. ,

, .

var someItem = 'some string'  
function doSomething() {  
  return 'something'  
}  

.

var someItem = 'some string';  
function doSomething() {  
  return 'something';  
}  

:
armed , .

ECMA (eng):

ECMAScript ( , , -, do-while, continue, break, return, throw) . . , , . , , .

18. „for… in“

. if hasOwnProperty

for(key in object) {  
   if(object.hasOwnProperty(key)) {  
      ...then do something...  
   }  
}  

„JavaScript: The Good Parts“ Douglas Crockford.

Object.prototype.hasOwnProperty . JavaScript Garden

for(prop in object) if (object.hasOwnProperty(prop)) {
    //...
}

.
. .

19.

? .

function TimeTracker(){  
 console.time("MyTimer");  
 for(x=5000; x > 0; x--){}  
 console.timeEnd("MyTimer");  
}

20. , , ...

( ), - . . JavaScript-.

Object-Oriented JavaScript
JavaScript: The Good Parts
Learning jQuery 1.3
Learning JavaScript

. !

21. Self-Executing Functions

- . .

(function doSomething() {
return {
name: 'jeff',
lastName: 'way'
};
})();

Immediately-Invoked Function Expression. . JavaScript Garden. . .

22. JavaScript

— ?
— , !
— !
— , !
— Sponge Bob Square Pants

. . .

JavaScript-, jQuery Mootools — AJAX. JavaScript ( )
jQuery „each“ , „for“ .

23. JSON.Parse

JavaScript 2 JSON, ( 2009), . Douglas Crockford, JSON, , . .
JSON, .

var response = JSON.parse(xhr.responseText);  
  
var container = document.getElementById('container');  
for(var i = 0, len = response.length; i < len; i++) {  
  container.innerHTML += '<li>' + response[i].name + ' : ' + response[i].email + '</li>';  
}  

C 4 , IE7 . caniuse.com/#search=JSON.parse
, jQuery json application-type: „application/json“ „text/javascript“, - $.get, $.post $.ajax. . .

24. „language“

- language script.

<script type="text/javascript" language="javascript">  
...  
</script>  

. .

:
JavaScript- :
Javascript Garden — english,
javascript.ru — http://learn.javascript.ru/

, . . .