Que devrait savoir chaque programmeur JavaScript?

Pas jQuery. Non YUI. Non (etc. etc.)

Les cadres peuvent être utiles, mais ils cachent souvent les détails parfois laids de la façon dont JavaScript et le DOM fonctionnent réellement de votre part. Si votre objectif est de pouvoir dire "Je sais que JavaScript", l'investissement de beaucoup de temps dans un cadre s'oppose à cela.

Voici quelques fonctionnalités de langage JavaScript que vous devriez connaître pour explorer ce qu'il fait et ne pas être pris au piège, mais qui ne sont pas immédiatement évidents pour beaucoup de personnes:

• Cet object.prop et object['prop'] sont la même chose (alors pouvez-vous arrêter d'utiliser eval , merci); Les propriétés de l'objet sont toujours des chaînes (même pour les tableaux); Ce qui for … in est pour (et ce que ce n'est pas ).

• Le reniflement de la propriété; Ce qui est undefined est (et pourquoi il sent ); Pourquoi l'opérateur apparemment peu connu est bénéfique et différent de typeof / undefined ; hasOwnProperty ; Le but de la delete .

• Que le type de données Number est vraiment un flotteur; Les difficultés d'utilisation de flotteurs indépendantes de la langue; En évitant le piège octal parseInt .

• Paramétrage de la fonction imbriquée; La nécessité d'utiliser var dans la portée que vous voulez éviter les globaux accidentels; Comment les étendues peuvent être utilisées pour les fermetures; Le problème de la boucle de fermeture .

• Comment les variables globales et window propriétés des window entrent en collision; Comment les variables globales et les éléments du document ne devraient pas entrer en collision mais ne font pas dans IE; La nécessité d'utiliser var dans la portée mondiale aussi pour éviter cela.

• Comment l'énoncé de la function agit pour « hisser » une définition avant le code qui l'a précédé; La différence entre les déclarations de fonction et les expressions de fonction; Pourquoi les expressions de fonctions nommées ne doivent pas être utilisées .

• Comment fonctionnent les constructeurs, la propriété prototype et le new opérateur; Méthodes d'exploitation pour créer le système de classe / sous-classe / instance normal que vous vouliez réellement; Lorsque vous voudrez peut-être utiliser des objets basés sur la fermeture au lieu du prototypage. (La plupart du matériel didactique JS est absolument terrible à ce sujet, ça m'a pris des années pour le faire tout droit dans ma tête.)

• Comment this est déterminé au moment de l'appel, non lié; Comment, par conséquent, le passage de méthode ne fonctionne pas comme vous l'attendiez d'autres langues; La façon dont les fermetures ou la Function#bind peuvent être utilisées pour contourner cela.

• D'autres fonctionnalités ECMAScript Fifth Edition, telles que indexOf , pour forEach et les méthodes de programmation fonctionnelle sur Array ; Comment réparer les anciens navigateurs pour vous assurer de pouvoir les utiliser; En les utilisant avec des expressions de fonctions anonymes en ligne pour obtenir un code compact et lisible.

• Le flux de contrôle entre le navigateur et le code utilisateur; Exécution synchrone et asynchrone; Les événements qui se déclenchent à l'intérieur du flux de contrôle (p. Ex. Focus) par rapport aux événements et aux délais d'attente qui surviennent lorsque le contrôle revient; La façon dont l'appel d'une alert semblable à une synchrone supposée synchrone peut finir par provoquer une réintégration potentiellement désastreuse.

• Comment les scripts entre fenêtres affectent l' instanceof ; Comment les scripts entre fenêtres affectent le flux de contrôle sur différents documents; Comment postMessage espérons-le réparer.

Voir cette réponse concernant les deux derniers éléments.

Surtout, vous devriez voir JavaScript de manière critique, en reconnaissant que c'est pour des raisons historiques un langage imparfait (même plus que la plupart des langues) et éviter les pires problèmes. Le travail de Crockford sur ce front vaut certainement la lecture (bien que je ne soit pas entièrement d'accord avec lui sur lequel sont les "Good Parts").

Qu'il puisse être désactivé.

Comprendre les choses écrites dans le Javascript de Crockford : The Good Parts est une très bonne supposition selon laquelle une personne est un programmeur JS décent.

Vous pouvez presque savoir comment utiliser une bonne bibliothèque comme JQuery et ne pas encore connaître les parties cachées de Javascript.

Une autre note est les outils de débogage sur différents navigateurs. Un programmeur JS devrait savoir comment déboguer son code dans différents navigateurs.

Oh! Et sachant que JSLint va totalement nuire à vos sentiments!

Si vous voulez être un véritable ninja JavaScript, vous devriez connaître les réponses à toutes les questions dans le Quiz Quiz Perfect de Perfect Perfection .

Un exemple pour stimuler votre appétit:

 (function f(f){ return typeof f(); })(function(){ return 1; }); 

Quelle est l'expression de cette expression?

• "nombre"
• "indéfini"
• "fonction"
• Erreur

Vous ne connaissez pas JavaScript si vous ne le savez pas:

1. Fermetures
2. Héritage basé sur le prototype
3. Le modèle du module
4. Le W3C-DOM
5. Comment fonctionnent les événements

… que javascript n'est pas java 🙂

Beaucoup, beaucoup de gens qui commencent avec le développement du site Web m'ont dit que javascript est simplement un simple java!

1. Familiarisez-vous avec au moins une bibliothèque Javascript (Jquery, Prototype, etc.).

2. Découvrez comment utiliser les outils de débogage des principaux navigateurs (MSIE 7-8, Firefox, Chrome, Safari)

3. Lire sur l'industrie: le site Web de Douglas Crockford est un trésor, tandis que Ajaxian.com est un bon blog pour se tenir au courant d'idées nouvelles, intéressantes ou étranges pour le Javascript. Il existe un certain nombre d'autres ressources, mais ce sont celles qui m'ont beaucoup aidé.

Les objets Javascript et fonctionnent comme un citoyen de première classe , des rappels , à ne pas oublier les événements , puis JQuery .

Ce Javascript n'est pas quelque chose qui peut être appris dans une heure!

Les variables sont globales à moins qu'elles soient déclarées locales!

Bad (DoSomething () est seulement appelé 10 fois):

 function CountToTen() { for(i=0; i< 10; i++) { DoSomething(i); } } function countToFive() { for(i=0; i<5; i++) { CountToTen(); } } CountToFive(); 

Bon (DoSomething () s'appelle 50 fois comme prévu):

 function CountToTen() { var i; for(i=0; i< 10; i++) { DoSomething(i); } } function countToFive() { var i; for(i=0; i<5; i++) { CountToTen(); } } CountToFive(); 

Comment utiliser les bonnes pièces, et comment éviter les pièces horribles .

Pour savoir que Javascript était initialement appelé LiveScript et que le préfixe 'Java' a été ajouté à des fins de marketing, non parce que Java et Javascript sont liés (ce qu'ils ne sont pas).

Oh et pour posséder toute version de 'Javascript de David Flanagan ': le Guide définitif ' (cette information se trouve à la page 2).

… et pour avoir apprécié ceux qui ont précédé la tentative d'obscurcir le document d'Internet Explorer 4. tout le document [Netscape Navigator 4's document.layers [] avant que Jpeg ne prenne la peine.

MODIFIER:

Comme l'a souligné @Kinopiko, JavaScript a été appelé projet Mocha à l'origine ( certaines sources estiment également qu'on l'appelait le projet LiveWire), mais il est généralement admis que la langue (écrite par Brendan Eich) devait être diffusée en tant que LiveScript avant que le préfixe Java ne soit adopté Au début de 1996.

Il faut savoir ce qui suit pour dire "Je sais JavaScript":

1. Le JavaScript est bon mais DOM est un point de douleur
2. Les problèmes croisés du navigateur peuvent vous rendre fou
3. À moins que le code ne soit testé sur au moins 4 navigateurs différents, vous ne pouvez pas dire qu'il est sans bug
4. Fermeture …………. Doit savoir
5. Son prototype est basé ……….. Un bon amusement pour apprendre ça
6. Mot de passe du débogueur ….. Aide en crise

Ce JavaScript est beaucoup plus différent que d'autres langues que ce que vous pourriez penser. Regardez ce superbe Google Tech Talk pour avoir une impression: http://www.youtube.com/watch?v=hQVTIJBZook

Qu'est-ce que chaque codeur javascript devrait savoir?

Que dire, je peux éteindre vos efforts avec 2 clics. Donc, si possible, fournissez un repli.

Je recommande fortement de lire Javascript: The Good Parts

Vous connaissez javascript si vous pouvez utiliser le tableau, le numéro, la chaîne, la date et l'objet de manière efficace. Plus points pour Math et RegExp. Vous devriez pouvoir écrire des fonctions et utiliser des variables (dans la portée correcte, c'est-à-dire comme «méthodes» d'un objet).

Je vois quelques commentaires sur la connaissance des fermetures, la syntaxe de la fonction extravagante, blabla. Tout cela n'est pas pertinent pour cette question. C'est comme si vous dites que vous êtes un coureur si vous pouvez exécuter le coup de 100 mètres sous 11 secondes.

Je dis qu'il faut peut-être quelques semaines pour devenir compétent en javascript. Ensuite, il faut des années et des dizaines de livres et des milliers de lignes de programmation pour devenir un expert, un ninja, etc.

Mais ce n'était pas la question.

Oh, et le DOM ne fait pas partie de javascript, et jQuery n'est pas non plus. Donc, je pense que les deux sont également sans rapport avec la question.

JSLint http://www.JSLint.com/

Après avoir lu tout ce qui précède, il est également très bien d'apprendre Javascript en utilisant un framework comme jQuery. La vérité est que c'est la première façon dont beaucoup de gens ont choisi JS en premier lieu. Pas de honte à cela.

Tableau . length méthode de length n'est pas un nombre d'éléments de tableau, mais l'indice le plus élevé. Même lorsque l'élément a été défini à undefined

 var a = []; a.length; // === 0 a[10]; // === undefined a[10] = undefined; a.length; // === 11 a.pop(); // === undefined a.length; // === 10 

Ce comportement ne se distingue guère d'un bug de conception de langue.

JQuery serait ma meilleure recommandation. Non seulement pour le code lui-même, c'est l'idiome, le style, la réflexion derrière ce qui est très digne d'être émulé.

Ce javascript est la langue la plus largement utilisée dans le monde. (Probablement)

Apprendre vraiment une langue et comprendre ses différentes facettes provient de (années d'expérience). Si vous voulez être un meilleur programmeur, je dirais, comprendre les modèles de conception, comment et quand les utiliser et / ou même lorsque vous les utilisez sans en avoir conscience; Architecture technique et expérience utilisateur.

Connaître la langue (JavaScript) signifie que vous pouvez choisir n'importe quel cadre et l'utiliser à volonté. Vous aurez inévitablement besoin de plonger dans le code source, et si tout ce que vous connaissez est la syntaxe d'un cadre ou 2 ou 3, alors vous n'allez pas loin. En disant que, entrer dans le code source de certains frameworks différents est probablement l'une des meilleures façons de voir comment JavaScript peut être utilisé. En essayant de passer par le code dans Firebug ou Web Inspector, vérifiez la documentation JavaScript, en particulier les documents Mozilla et Webkit, pour mieux comprendre ce que vous regardez.

Comprendre la différence entre la programmation orientée objet et fonctionnelle, que JavaScript est un mélange sexy des deux et quand et comment utiliser les deux pour créer une base de code killer et des applications géniales vous feront un meilleur programmeur JavaScript.

Il suffit de lire des livres, en particulier les «bonnes parties» de Crockford, qui se contentent de présenter ses opinions sur ce qui est bon en JavaScript, tout en ignorant la plupart des parties IMPRESSIONNANTES de JavaScript vous mettra au mauvais pied.

Vérifier le code écrit par quelqu'un comme Thomas Fuchs, d'autre part, vous donnera beaucoup plus de renseignements sur le pouvoir d'écrire un JavaScript étonnant et efficace.

En essayant de mémoriser quelques astuces ou WTFs, cela ne vous aidera pas non plus, vous allez choisir si vous commencez à coder et à parcourir un code de bibliothèque / frameworks, en particulier un commentaire utile, pour voir pourquoi ils ont utilisé certains Propriétés / valeurs et pas d'autres pourquoi et quand il est bon d'utiliser des opérandes et des opérateurs spécifiques, tout cela est là dans le code de l'utilisation du cadre. Quelle meilleure façon d'apprendre par exemple? : ^)

En Javascript, la performance est importante.

Il n'y a pas de compilateur intelligent pour optimiser votre code, donc vous devriez être plus prudent lorsque vous écrivez un code javascript que des langages comme C #, Java …

Les littéraux d'objet parce qu'ils sont si gentils à écrire.

Les éléments suivants sont également importants:

1) Hissage variable. 2) Les chaînes de cadres et les objets d'activation.

Et des choses comme celles-ci: 🙂

3) wtfjs.com

4) tout est un objet http://www.lifeinafolder.com/images/Js.jpg

1. Sachant qu'il y a une vie avec et sans with() et où dessiner la ligne.
2. Vous pouvez créer des erreurs personnalisées avec l'instruction throw pour arrêter délibérément le temps d'exécution javascript.

JavaScript ne supporte pas le mot-clé de retour et l'instruction de retour avec le caractère de nouvelle ligne comme le code suivant (ou essayez-le sur ma page jsFiddle )

 function foo() { return { bar: 'something' }; } $(function() { document.write(foo()); }); 

Je ne comprends pas pourquoi JavaScript ne prend pas en charge ce style car il est beaucoup plus facile de lire un code source JavaScript très complexe lorsque vous comparez avec le style par défaut de JavaScript.

PS. J'ai écrit JavaScript depuis près de 6 ans. Mais je viens de trouver ce bug avec moi-même lorsque j'essaie d'exécuter la fonction suivante. Il revient toujours indéfini. Lorsque j'utilise le débogueur et que j'entre dans cette fonction, tout fonctionne bien. Je pense que ce devrait être le pire bug de programmation de ma vie.

 function JqGridInlineEditor_GenerateTool(cellvalue, options, rowObject, disableEdit, disableDelete) { return (!disableEdit ? '<a class="button edit" href="javascript: void(0);" onclick="JqGridInlineEditor_EditRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Edit.gif'), 'Click here to Edit or \nDouble-click row to edit.') : '') + (!disableDelete ? '<a class="button delete" href="javascript: void(0);" onclick="JqGridInlineEditor_DeleteRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Delete.png'), 'Click here to Delete or \nSelect row and then press Delete') : '') + (!disableEdit ? '<a class="button save" style="display:none" href="javascript: void(0);" onclick="JqGridInlineEditor_SaveRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Save.png'), 'Click here to Save or \nPress Enter') : '') + (!disableEdit ? '<a class="button cancel" style="display:none" href="javascript: void(0);" onclick="JqGridInlineEditor_RestoreRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Cancel.png'), 'Click here to Cancel or \nPress Esc') : ''); } 

Étant donné que JS est un langage fonctionnel, un programmeur JS décent doit être capable d'écrire Y-combinator et d'expliquer comment il fonctionne en haut de la tête.

… à propos de Google Web Toolkit , ce qui signifie que votre projet javascript pourrait probablement être développé de manière beaucoup plus conventionnelle.