J'écris du code JavaScript depuis longtemps et je ne me souviens pas de l'ère que cela a commencé. Je suis très excité par les réalisations de JavaScript ces dernières années; J'ai beaucoup de chance d'être le bénéficiaire de ces réalisations. J'ai écrit beaucoup d'articles, de chapitres et un livre qui y est dédié, mais je peux toujours trouver de nouvelles connaissances sur cette langue maintenant. Ce qui suit décrit les compétences en programmation qui m'ont fait soupirer "Ah!" dans le passé. Vous devriez essayer ces compétences maintenant, plutôt que d'attendre pour les découvrir accidentellement dans le futur.
Écriture concise
L'une de mes choses préférées dans JavaScript est la méthode d'abréviation de la génération d'objets et de tableaux. Dans le passé, si vous vouliez créer un objet, vous auriez besoin de le faire:
var car = nouveau objet (); car.colour = 'rouge'; Car.Wheels = 4; car.hubcaps = 'spinning'; car.age = 4;
La méthode d'écriture suivante peut réaliser le même effet:
var car = {Color: 'Red', roues: 4, hubcaps: 'spinning', Âge: 4}C'est beaucoup plus simple, vous n'avez pas besoin d'utiliser le nom de cet objet à plusieurs reprises. De cette façon, la voiture est définie. Peut-être que vous rencontrerez le problème de l'invalidUserriNession, qui n'est rencontré que lorsque vous utilisez IE. N'oubliez pas une chose et n'écrivez pas de virgules avant les accolades de clôture, et vous n'aurez aucun problème.
Une autre abréviation très pratique concerne les tableaux. La façon traditionnelle de définir un tableau est la suivante:
var moviesthatneedbetterwriters = new Array ('Transformers', 'Transformers2', 'Avatar', 'Indianajones 4');La version d'abréviation est comme ceci:
var moviesthatneedbetterwriters = ['Transformers', 'Transformers2', 'Avatar', 'IndianaJones 4'];
Pour les tableaux, il y a un problème ici, mais il n'y a en fait pas de fonction de groupe graphique. Mais vous constaterez souvent que quelqu'un définit la voiture ci-dessus comme celle-ci, comme celle-ci
var car = new Array (); car ['couleur'] = 'rouge'; car ['roues'] = 4; car ['hubcaps'] = 'spinning'; voiture ['âge'] = 4;
Les tableaux ne sont pas omnipotents; S'ils sont écrits incorrectement, ils seront déroutants. Les groupes de graphiques sont en fait la fonction des objets, et les gens ont confondu ces deux concepts.
Une autre méthode d'abréviation très cool consiste à utiliser des symboles conditionnels ternaires. Vous n'avez pas à l'écrire comme ci-dessous ...
direction var; if (x <200) {direction = 1; } else {direction = -1; }…Vous pouvez le simplifier avec une notation conditionnelle ternaire:
Var Direction = x <200? 1: -1;
Lorsque la condition est vraie, la valeur après le point d'interrogation est prise, sinon la valeur après la prise du côlon.
Stocker les données dans JSON
Avant de découvrir JSON, j'ai utilisé diverses méthodes folles pour stocker des données dans les types de données inhérents de JavaScript, tels que des tableaux, des chaînes, des glyphes faciles à diviser et d'autres choses ennuyeuses. Après que Douglas Crockford ait inventé JSON, tout a changé. En utilisant JSON, vous pouvez utiliser les propres fonctions de JavaScript pour stocker des données dans des formats complexes, et il n'est pas nécessaire de faire d'autres conversions supplémentaires, et vous pouvez y accéder directement. JSON est l'abréviation de "Notation d'objet JavaScript", qui utilise les deux méthodes d'abréviation mentionnées ci-dessus. Donc, si vous voulez décrire un groupe, vous pourriez écrire comme ceci:
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 Frussicite", "Rôle": "guitare principale"}], "année": "2009"}Vous pouvez utiliser JSON directement dans JavaScript, le résumer dans des fonctions ou même l'utiliser comme forme de valeur de retour d'une API. Nous appelons cela JSON-P, et de nombreuses API utilisent ce formulaire.
Vous pouvez appeler une source de fourniture de données et renvoyer directement les données JSON-P dans le code de script:
<div id = "Delicious"> </div> <script> Fonction Delicious (o) {var out = '<ul>'; pour (var i = 0; i <o.length; i ++) {out + = '<li> <a href = "' + o [i] .u + '">' + o [i] .d + '</a> </li>'; } out + = '</ul>'; document.getElementById ('Delicious'). innerHtml = out; } </ script> <script src = "http://feeds.decious.com/v2/json/codepo8/javascript?count=15&callback=delicious"> </ script>Cela appelle la fonction de service Web fournie par le site Web délicieux pour obtenir la liste de signets non ordonnée la plus récente au format JSON.
Fondamentalement, JSON est le moyen le plus léger de décrire des structures de données complexes, et elle peut fonctionner dans le navigateur. Vous pouvez même l'exécuter en php avec la fonction JSON_DECODE (). Une chose qui m'a surpris à propos des propres fonctions de JavaScript (mathématiques, array et chaîne) est qu'après avoir étudié les fonctions mathématiques et chaînes en JavaScript, j'ai trouvé qu'ils pouvaient grandement simplifier mon travail de programmation. En les utilisant, vous pouvez enregistrer un traitement de boucle complexe et des jugements conditionnels. Par exemple, lorsque j'ai besoin d'implémenter une fonction pour trouver le plus grand numéro dans le tableau des nombres, j'avais l'habitude d'écrire cette boucle comme ceci:
nombres var = [3 342,23,22,124]; var max = 0; for (var i = 0; i <nombres.length; i ++) {if (nombres [i]> max) {max = nombres [i]; }} alert (max);Nous pouvons le faire sans boucle:
nombres var = [3 342,23,22,124]; nombres.sort (fonction (a, b) {return b - a}); alerte (nombres [0]);Il convient de noter que vous ne pouvez pas trier () un tableau de caractères numériques, car dans ce cas, il ne triera que par ordre alphabétique. Si vous voulez en savoir plus sur l'utilisation, vous pouvez lire ce bon article sur Sort ().
Une autre fonction intéressante est math.max (). Cette fonction renvoie le plus grand nombre dans le paramètre:
Math.max (12,123,3,2,433,4); // Renvoie 433
Étant donné que cette fonction peut vérifier les nombres et renvoyer la plus grande, vous pouvez l'utiliser pour tester la prise en charge du navigateur pour une fonctionnalité:
var scrolltop = math.max (doc.documentElement.scrolltop, doc.body.scrolltop);
Ceci est utilisé pour résoudre des problèmes IE. Vous pouvez obtenir la valeur de défilement de la page actuelle, mais en fonction de la doctype sur la page, une seule des deux propriétés ci-dessus stockera cette valeur, et l'autre propriété sera indéfinie, vous pouvez donc obtenir ce numéro en utilisant math.max (). Lisez cet article et vous obtiendrez plus de connaissances sur l'utilisation des fonctions mathématiques pour simplifier JavaScript.
Il existe également une paire de fonctions très utiles qui fonctionnent des chaînes divisées () et join (). Je pense que l'exemple le plus représentatif serait d'écrire une fonction pour attacher le style CSS aux éléments de la page.
C'est comme ça. Lorsque vous ajoutez une classe CSS à l'élément de page, soit c'est la première classe CSS de cet élément, soit il a déjà quelques classes. Vous devez ajouter un espace après la classe existante, puis suivre la classe. Et lorsque vous souhaitez supprimer cette classe, vous devez également supprimer les espaces devant cette classe (c'était très important dans le passé car certains vieux navigateurs n'ont pas reconnu la classe suivie des espaces).
Donc, l'écriture originale ressemblera à ceci:
fonction addClass (elm, newclass) {var c = elm.className; elm.classname = (c === '')? newClass: C + '' + newClass; }Vous pouvez utiliser les fonctions Split () et JOIN () pour terminer automatiquement cette tâche:
fonction addClass (elm, newclass) {var classes = elm.classname.split (''); Classes.push (newClass); elm.className = Classes.Join (''); }Cela garantira que toutes les classes sont séparées par des espaces et que la classe que vous souhaitez ajouter est placée exactement la dernière.
Délégation d'événements
Les applications Web sont toutes motivées par l'événement. J'aime la gestion des événements, surtout j'aime définir moi-même les événements. Il rend votre produit évolutif sans modifier le code central. Il y a un gros problème (également une manifestation puissante) sur la suppression des événements sur la page. Vous pouvez installer un écouteur d'événements sur un élément et l'écouteur d'événements commence à fonctionner. Mais il n'y a aucune indication sur la page qu'il y a un auditeur. En raison de ce problème imprévisible (ce qui est particulièrement gênant pour certains débutants), et les divers problèmes de mémoire que "les navigateurs" comme IE6 utilisent trop d'événements d'événements, vous devez admettre qu'il est sage d'essayer d'utiliser le programmation des événements aussi peu que possible.
La commission de l'incident s'est donc produite.
Lorsqu'un événement sur un élément sur la page est déclenché, et dans la relation d'héritage DOM, tous les enfants de cet élément peuvent également recevoir cet événement. Pour le moment, vous pouvez utiliser un gestionnaire d'événements sur l'élément parent pour le gérer, plutôt que d'utiliser des écouteurs d'événements sur un tas d'éléments enfants pour le gérer. Qu'est-ce que cela signifie exactement? Disons-le de cette façon, il y a beaucoup d'hyperliens sur la page. Vous ne souhaitez pas utiliser ces liens directement. Vous souhaitez appeler ce lien via une fonction. Le code HTML est comme ceci:
<h2> Great Web Resources </h2> <ul id = "Resources"> <li> <a href = "http://opera.com/wsc"> Opéra Web Standards Curriculum </sitepoint.com "> Sitepoint <a href =" http://sitepoint.com "> Sitepoint </a> </li> <li> <A href = "http://alistapart.com"> Une liste à part </a> </li> <li> <a href = "http://yuiblog.com"> yui blog </a> </li> <li> <a href = "http://blameitonthevoices.com "> href = "http://oddlyspecific.com"> étrangement spécifique </a> </li> </ul>
Il s'agit d'une pratique courante de parcourir ces liens et d'attacher un gestionnaire d'événements à chaque lien:
// Exemple de gestion des événements typique (function () {var ressources = document.getElementById ('Resources'); var links = ressources.getElementsByTagName ('a'); var all = links.length; for (var i ++ i ++) {// attacher un écouteur à chaque lien lien [i]. var x = e.target;Nous pouvons également accomplir cette tâche avec un processeur d'événements:
(function () {var ressources = document.getElementById ('Resources'); Resources.AddeventListener ('click', gestionnaire, false); Fonction Handler (e) {var x = e.target; // obtenir le lien tha if (x.nodename.tolowercase () === 'a') {alert ('Event Delegation:' + x); E.PreventDault (); }) ();Étant donné que l'événement de clic se produit dans ces éléments de page, tout ce que vous avez à faire est de comparer leurs Nodenames et de découvrir quel élément doit répondre à l'événement.
Avertissement: les deux exemples sur les événements mentionnés ci-dessus peuvent fonctionner dans tous les navigateurs. À l'exception de IE6, vous devez utiliser un modèle d'événement sur IE6, plutôt qu'une simple implémentation standard W3C. C'est pourquoi nous vous recommandons d'utiliser certaines boîtes à outils.
L'avantage de cette approche ne se limite pas à la réduction de plusieurs processeurs d'événements en un seul. Pensez-y, par exemple, vous devez ajouter dynamiquement plus de liens vers ce tableau de lien. Après avoir utilisé la délégation des événements, vous n'avez pas besoin de faire d'autres modifications; Sinon, vous devez réinstaller cette table de lien et installer le gestionnaire d'événements pour chaque lien.
Fonctions anonymes et modularité
La chose la plus ennuyeuse de JavaScript est que les variables n'ont pas de portée à utiliser. Toute variable, fonction, tableau, objet, tant qu'elle n'est pas à l'intérieur de la fonction, est considérée comme globale, ce qui signifie que d'autres scripts de cette page peuvent également y accéder et l'emporter.
La solution consiste à mettre votre variable dans une fonction anonyme et à l'appeler immédiatement après sa définition. Par exemple, la méthode d'écriture suivante produira trois variables globales et deux fonctions globales:
var name = 'chris'; var age = '34'; var status = 'single'; fonction CreateMember () {// [...]} fonction getmemberdetails () {// [...]}S'il y a une variable appelée statut dans d'autres scripts sur cette page, des problèmes se produiront. Si nous les encapsulons dans une myapplication, ce problème sera résolu:
var myApplication = function () {var name = 'chris'; var age = '34'; var status = 'single'; fonction CreateMember () {// [...]} fonction getMemberDetails () {// [...]}} ();Cependant, de cette façon, il n'y a pas de fonction en dehors de la fonction. Si c'est ce dont vous avez besoin, c'est bien. Vous pouvez également omettre le nom de la fonction:
(function () {var name = 'chris'; var age = '34'; var status = 'single'; function CreateMember () {// [...]} function getMemberDetails () {// [...]}}) ();Si vous souhaitez utiliser l'intérieur de la fonction, vous devez apporter des modifications. Afin d'accéder à CreateMember () ou GetMemberDetails (), vous devez les transformer en propriétés MyApplication pour les exposer au monde extérieur:
var myApplication = function () {var name = 'chris'; var age = '34'; var status = 'single'; return {CreateMember: function () {// [...]}, getMemberDetails: function () {// [...]}}} (); //myapplication.createMember () et //myapplication.getMemberDetails () peuvent être utilisés.Ceci est appelé mode module ou singleton. Douglas Crockford en a parlé à plusieurs reprises, et il est largement utilisé dans la bibliothèque d'interface utilisateur de Yahoo Yui. Mais ce qui me rend gênant, c'est que je dois changer la structure de la phrase afin que les fonctions et les variables soient accessibles par le monde extérieur. De plus, je dois ajouter le préfixe de MyApplication lors de l'appel. Donc, je n'aime pas faire cela, je préfère simplement exporter des pointeurs vers des éléments qui doivent être accessibles par le monde extérieur. Après cela, la rédaction d'appels externes est simplifié:
var myApplication = function () {var name = 'chris'; var age = '34'; var status = 'single'; fonction CreateMember () {// [...]} fonction getMemberDetails () {// [...]} return {Create: CreateMember, get: getMemberDetails}} (); // Écrivez-le maintenant sous le nom de myApplication.get () et MyApplication.Create ().J'appelle cela «modèle de module révélateur».
Configurable
Une fois que j'ai publié le code JavaScript que j'ai écrit à ce monde, quelqu'un voulait le changer, généralement les gens voulaient accomplir des tâches qu'elle ne pouvait pas se compléter - mais généralement le programme que j'ai écrit n'était pas suffisamment flexible et n'a pas fourni de fonctions définies par l'utilisateur. La solution consiste à ajouter un objet d'élément de configuration à votre script. J'ai écrit une fois un article qui introduit en profondeur des objets d'élément de configuration JavaScript. Voici les points clés:
---- Dans votre script, ajoutez un objet appelé configuration.
---- Cet objet stocke toutes choses que les gens ont souvent besoin de changer lors de l'utilisation de ce script:
** ID CSS et nom de classe;
** Nom du bouton, mot d'étiquette, etc.;
** des valeurs telles que "nombre d'images affichées par page" et "taille des images affichées";
** Paramètres d'emplacement, d'emplacement et de langue.
--- Renvoyez cet objet à l'utilisateur en tant que propriété commune afin que l'utilisateur puisse le modifier et l'écraser.
C'est généralement ce que vous devez faire à la dernière étape de votre processus de programmation. Je les ai concentrés dans un exemple: «Cinq choses à faire à un script avant de la remettre au prochain développeur.»
En fait, vous voulez également que votre code soit utilisé d'une très bonne manière et apportent des modifications en fonction de leurs besoins respectifs. Si vous implémentez cette fonctionnalité, vous recevrez des e-mails moins déroutants de personnes qui se plaignent de votre script, ce qui vous dira que quelqu'un a modifié votre script et qu'il est très utile.
Interagir avec l'arrière-plan
L'une des choses importantes que j'ai apprises au cours de tant d'années d'expérience en programmation est que JavaScript est un excellent langage pour développer l'interaction d'interface, mais s'il est utilisé pour traiter les nombres ou accéder aux sources de données, elle n'est un peu insatisfaisante.
Au départ, j'ai appris JavaScript pour remplacer Perl parce que je déteste devoir copier le code dans le dossier CGI-BIN pour faire fonctionner Perl. Plus tard, j'ai réalisé que je devais utiliser un langage de travail backend pour traiter les données principales, et je ne peux pas laisser JavaScript faire tout. Plus important encore, nous devons considérer la sécurité et les caractéristiques linguistiques.
Si j'accède à un service Web, je peux obtenir les données au format JSON-P. Dans le navigateur client, je fais diverses données de données, mais lorsque j'ai un serveur, j'ai plus de moyens de convertir les données. Je peux générer des données de format JSON ou HTML du côté du serveur et les renvoyer au client, ainsi que des données de cache, etc. Si vous les comprenez et les préparez à l'avance, vous réaliserez des gains à long terme et économiserez beaucoup de maux de tête. Les programmes d'écriture adaptés à divers navigateurs sont une perte de temps, utilisez la boîte à outils!
Lorsque j'ai commencé le développement Web pour la première fois, j'ai eu du mal pendant longtemps pour utiliser Document.Tho ou document.layers lors de l'accès à la page. J'ai choisi Document.layers parce que j'aime l'idée que n'importe quelle couche est son propre document (et j'ai écrit trop de document.Write pour générer des éléments). Le modèle de couche a finalement échoué, j'ai donc commencé à utiliser Document.all. J'étais très heureux lorsque Netscape 6 a annoncé qu'il ne prenait en charge que les modèles W3C DOM, mais en fait, les utilisateurs s'en fichaient. Les utilisateurs voient simplement que de tels navigateurs ne peuvent pas afficher des choses que la plupart des navigateurs peuvent afficher normalement - c'est un problème avec notre encodage. Nous avons écrit du code à courte vue qui ne peut être exécuté que dans l'environnement actuel, mais malheureusement, notre environnement de fonctionnement est en constante évolution.
J'ai perdu trop de temps à gérer la compatibilité avec divers navigateurs et diverses versions. Être bon pour faire face à ce type de problème me fournit une bonne opportunité d'emploi. Mais maintenant, nous n'avons plus à supporter cette douleur.
Certaines boîtes à outils, telles que Yui, JQuery et Dojo, peuvent nous aider à résoudre ce type de problème. Ils résolvent divers problèmes de navigateur en abstraction de diverses implémentations d'interface, telles que l'incompatibilité de la version, les défauts de conception, etc., ce qui nous sauve de notre douleur. À moins que vous ne souhaitiez tester un certain navigateur bêta, n'ajoutez pas de code à votre propre programme pour corriger les défauts du navigateur, car vous oubliez probablement de supprimer votre code lorsque le navigateur a modifié ce problème.
D'un autre côté, s'appuyer entièrement sur les boîtes à outils est également un comportement à courte vue. Les boîtes à outils peuvent vous aider à vous développer rapidement, mais si vous n'avez pas une compréhension approfondie de JavaScript, vous ferez également quelque chose de mal.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.