Sept choses à noter lors de l'apprentissage de JavaScript [à lire absolument]_Connaissances de base

Description des connaissances :

Lorsque vous apprenez JavaScript, faites attention aux sept détails suivants pour rendre notre code plus facile à comprendre et plus efficace tout en remplissant la même fonction.

1.Code simplifié

Exemple : Créer un objet

C'était comme ça avant :

Var voiture = nouvel objet();

Car.color = "rouge";

Car.wheels = 4;

Voiture.age = 8;

Et maintenant ça peut s'écrire ainsi :

Voiture Var = {couleur : 'rouge', roues :4, âge :8>

Par exemple : Créer un tableau

C'était comme ça avant :

Var studentArray = new Array('zhangsan', 'lisi', 'zhaowu', 'wuliu');

Et maintenant ça peut s'écrire ainsi :

Var studentArray = {'zhangsan', 'lisi', 'zhaowu', 'wuliu'};

Exemple : Utiliser l'opérateur ternaire pour simplifier le code

L'écriture précédente de

était :

Var result;

if(x > 100)

{

    Result = 1;

}else{

    Result = -1;

}

Et maintenant, cela peut s'écrire :

Var résultat = x >100 ? 1 : -1;

2. Utilisez JSON comme format de données

Utilisez le format Json pour stocker les données :

var band = {

 "name":"The Red Hot Chili Peppers",

 "members":[

  {

   "name":"Anthony Kiedis",

   "role":"lead vocals"

  },

  {

   "name":"Michael 'Flea' Balzary",

   "role":"bass guitar, trumpet, backing vocals"

  },

  {

   "name":"Chad Smith",

   "role":"drums,percussion"

  },

  {

   "name":"John Frusciante",

   "role":"Lead Guitar"

  }

 ],

 "year":"2009"

}

Vous pouvez également utiliser JS pour stocker des données, le code est le suivant :

<div id = “dataDiv”></div>

<script>

    Function saveData(data)

{

    Var out =“<ul>”;

    For(var i=0; i<data.length; i++)

{

    Out += “<li><a href =”'+data[i].url+'”>+

data[i].d+</a></li>”;

}

Out += ‘</ul>';

Document.getElementById(‘dataDiv').innerHTML = out;

}

</script>

Vous pouvez même utiliser les données stockées générées par le JS ci-dessus comme valeur de retour de l'API

e689660efc10baf32b3614d0f3fc8ed4

2cacc6d41bbb37262a98f745aa00fbf0

3. Essayez d'utiliser les fonctions natives JavaScript

Par exemple : Obtenez la valeur maximale dans un ensemble de données

var maxData = Math.max(0,20,50,10);

alert(maxData); //La valeur maximale renvoyée est 50

Par exemple : utilisez JS pour ajouter un style de classe à un élément. L'extrait de code est le suivant :

.

Function addClass(elm, newclass)

{

    Var classes = elm.className.split(‘ ‘ );

    Classes.push(newclass);

    Elm.className = classes.join(‘ ');

}

4. Délégation événementielle

Par exemple :

<h2>Great Web resources</h2>

<ul id="resources">

 <li><a href="http://opera.com/wsc">Opera Web Standards

Curriculum</a></li>

 <li><a href="http://sitepoint.com">Sitepoint</a></li>

 <li><a href="http://alistapart.com">A List Apart</a></li>

 <li><a href="http://yuiblog.com">YUI Blog</a></li>

 <li><a href="http://blameitonthevoices.com">Blame it on the

voices</a></li>

 <li><a href="http://oddlyspecific.com">Oddly specific</a></li>

</ul>

Meilleure façon d'écrire des scripts :

(function(){

 var resources = document.getElementById('resources');

 resources.addEventListener('click',handler,false);

 function handler(e){

  var x = e.target; // get the link tha

  if(x.nodeName.toLowerCase() === 'a'){

   alert('Event delegation:' + x);

   e.preventDefault();

  }

 };

})();

5. Fonctions anonymes

var myApplication = function(){

 var name = 'Chris';

 var age = '34';

 var status = 'single';

 function createMember(){

  // [...]

 }

 function getMemberDetails(){

  // [...]

 }

 return{

  create:createMember, get:getMemberDetails

 }

}();

//myApplication.get() and myApplication.create() now work.

6. Code configurable

Si vous souhaitez que le code que vous écrivez soit plus facile à utiliser ou à modifier pour les autres, il doit être configurable. La solution consiste à ajouter un objet de configuration au script que vous écrivez. Les points clés sont les suivants :

1. Ajoutez un objet appelé configuration dans votre script.

2. Stockez dans l'objet de configuration toutes les choses que d'autres pourraient vouloir modifier, comme l'ID CSS, le nom de la classe, la langue, etc.

3. Renvoyez cet objet en tant que propriété publique afin que d'autres puissent le remplacer.

7. Compatibilité des codes

La compatibilité est quelque chose que les débutants ont tendance à négliger. Habituellement, lorsqu'ils apprennent Javascript, ils sont testés dans un navigateur fixe, et ce navigateur est très probablement IE. C'est très fatal, car de nos jours, parmi les principaux navigateurs grand public, IE. a le pire soutien aux normes. Le résultat constaté par l'utilisateur final peut être que le code que vous avez écrit ne peut pas s'exécuter correctement dans un certain navigateur. Vous devriez tester votre code dans tous les principaux navigateurs. Cela peut prendre du temps, mais cela devrait être fait.

Les sept choses ci-dessus à noter lors de l'apprentissage de JavaScript [à lire absolument] sont tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde soutiendra Script Home.