Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Les bases du JavaScript orienté objet

by
Difficulty:IntermediateLength:LongLanguages:

French (Français) translation by Jeane Jade (you can also view the original English article)

Au cours des dernières années, JavaScript a gagné en popularité, en partie en raison de bibliothèques qui sont développés pour rendre les applications JavaScript/effets plus facile de créer pour ceux qui n'ont pas bien saisi le langage de base encore.

Alors que dans le passé, il était un argument commun est que JavaScript est un langage de base et a été très "slap dash", sans fondement réel; ce n'est plus le cas, en particulier avec l'introduction de la grande échelle des applications web et des "adaptations", tels que JSON (JavaScript Object Notation).

JavaScript peut avoir tout ce qu'un Orientée Objet du langage a à offrir, mais avec un certain effort supplémentaire à l'extérieur de la portée de cet article.

Nous allons Créer un Objet

Félicitations, vous venez de créer un objet. Il y a deux façons de créer un objet JavaScript: ils sont des "fonctions Constructeur" et "Littéral de notation". Celle ci-dessus est une fonction Constructeur, je vais vous expliquer ce que la différence est peu, mais avant que je le fais, voici ce qu'une définition de l'Objet ressemble à l'aide de la notation littérale.

Littéral est une option privilégiée pour le nom de l'espacement, de sorte que votre code JavaScript n'interfère pas (ou vice versa) avec d'autres scripts en cours d'exécution sur la page et aussi si vous êtes en utilisant cet objet comme un objet unique et ne nécessitant pas plus d'une instance de l'objet, tandis que la fonction de Constructeur type de notation est préférable si vous avez besoin de faire un travail initial avant que l'objet est créé ou besoin de plusieurs instances de l'objet où chaque instance peut être modifié au cours de la durée de vie du script. Nous allons continuer à construire sur nos deux objets simultanément, de sorte que l'on peut observer des différences.

Définir les Méthodes et les Propriétés

Constructeur de version:

Version littérale:

Pour chacun de ces objets, nous avons créé une propriété 'iAm' qui contient une chaîne de valeur qui est utilisée dans nos objets, la méthode 'whatAmI' alertes un message.

Les propriétés sont des variables créées à l'intérieur d'un objet et les méthodes sont des fonctions créées à l'intérieur d'un objet.

Maintenant est probablement un bon moment pour expliquer comment utiliser les propriétés et méthodes (bien que vous aurait déjà fait si vous êtes familier avec une bibliothèque).

Pour utiliser une propriété d'abord, vous saisissez à quel objet il appartient - dans ce cas, il est monobjet - et puis, pour faire référence à ses propriétés internes, vous mettez un point, puis le nom de la propriété de sorte qu'il finira par ressembler à myObject.iAm (ce sera le retour "d'un objet').

Pour les méthodes, il est le même, sauf pour exécuter la méthode, comme toute fonction, vous devez mettre entre parenthèses après; sinon, vous serez juste de retour d'une référence à la fonction et non pas ce que la fonction renvoie en fait. Donc, il va ressembler à myObject.whatAmI() (ce sera d'alerte "je suis un objet').

Maintenant, pour les différences:

  • Le constructeur de l'objet a ses propriétés et méthodes définies avec le mot-clé 'cette' en face d'elle, tandis que la version littérale n'est pas.
  • Dans le constructeur de l'objet les propriétés/méthodes ont leurs "valeurs" défini à la suite d'un signe égal '=' alors que dans la version littérale, ils sont définis après un deux-points ':'.
  • La fonction constructeur peut avoir (en option) un point-virgule ';' à la fin de chaque propriété/déclaration de la méthode alors que dans la version littérale si vous avez plus d'une propriété ou d'une méthode, ils DOIVENT être séparés par une virgule ',', et ils NE peuvent pas avoir des points-virgules après eux, sinon JavaScript renvoie une erreur.

Il y a aussi une différence entre la manière dont ces deux types d'objet de déclarations sont utilisés.

Pour utiliser un littéralement notés objet, il vous suffit de l'utiliser par la référence à son nom de variable, de sorte que, lorsque cela est nécessaire, vous appeler en tapant;

Avec constructeur fonctions dont vous avez besoin pour instancier (créer une nouvelle instance de l'objet à la fois, vous faites cela en tapant;

À l'aide d'une Fonction Constructeur.

Nous allons utiliser notre précédente fonction de constructeur et d'en tirer parti afin qu'il effectue une base (mais dynamique) opérations lorsque nous l'instancier.

Comme toute fonction JavaScript, on peut utiliser des arguments avec notre constructeur de la fonction;

Maintenant, nous allons instancier notre objet et l'appel de son whatAmI méthode, en remplissant les champs requis comme nous le faisons.

Cela permettra d'alerte " je suis un objet du langage JavaScript.'

Pour Instancier ou de ne pas Instancier

Je l'ai mentionné plus tôt, sur les différences entre l'Objet des Constructeurs et des Objets Littéraux et que, lorsqu'une modification est apportée à un Objet Littéral elle affecte que l'objet à travers l'ensemble du script, alors que quand une fonction Constructeur est instancié et puis une modification est apportée à cette instance, il n'affecte pas les autres instances de cet objet. Essayons un exemple;

Nous allons d'abord créer un Objet littéral;

Même si vous créez une nouvelle variable et de la pointer vers l'objet, il aura le même effet.

Maintenant, nous allons essayer un exercice similaire avec une fonction Constructeur.

Donc, comme prévu, les deux de retour de la valeur correcte, mais nous allons changer le myProperty pour l'une des instances.

Comme vous pouvez le voir dans cet exemple, même si nous avons changé la propriété de constructorOne cela n'a pas affecté myObjectConstructor et par conséquent, ne pas affecter constructorTwo. Même si constructorTwo a été instancié avant, nous avons changé le myProperty propriété de constructorOne, il ne serait pas affecter la myProperty propriété de constructorTwo que c'est un tout autre instance de l'objet à l'intérieur du JavaScript mémoire.

Alors, qui devriez-vous utiliser? Eh bien, il dépend de la situation, si vous avez seulement besoin d'un objet unique en son genre pour votre script (comme vous le verrez dans notre exemple, à la fin de cet article), puis d'utiliser un objet littéral, mais si vous avez besoin de plusieurs instances d'un objet, où chaque instance est indépendante des autres et peut avoir différentes propriétés ou des méthodes en fonction de la façon dont il est construit, puis utiliser une fonction constructeur.Alors, qui devriez-vous utiliser?

Et Que cette

Tout en expliquant les fonctions constructeur, il y avait beaucoup de 'ces' mots-clés étant jeté autour et je me dis, quel meilleur moment pour parler de la portée!

Maintenant, vous pourriez vous demander "qu'est-ce que ce champ d'application, vous parlez de'?' Champ d'application en JavaScript est fonction/objet de base, ce qui signifie que si vous êtes en dehors d'une fonction, vous ne pouvez pas utiliser une variable qui est définie à l'intérieur d'une fonction (sauf si vous utilisez une fermeture).

Cependant, il est à la portée de la chaîne, ce qui signifie qu'une fonction à l'intérieur d'une autre fonction peut accéder à une variable définie dans sa fonction parent. Prenons un oeil à quelques exemples de code.

Comme vous pouvez le voir dans cet exemple, var1 est définie dans l'objet global et est disponible pour toutes les fonctions et de l'objet, var2 est définie à l'intérieur d'fonction1 et est disponible à fonction1 et fonction2, mais si vous essayez de référence de l'objet qu'il vous donnera l'erreur " var2 est undefined, var3 est uniquement accessible à la fonction2.

Donc, qu'est-ce que cette référence? Bien dans un navigateur, 'ce' références de l'objet window, donc, techniquement, la fenêtre est notre objet global. Si nous sommes à l'intérieur d'un objet, " il "fera référence à l'objet lui-même, cependant, si vous êtes à l'intérieur d'une fonction, ce sera toujours référence à l'objet window et de même, si vous êtes à l'intérieur d'une méthode dans un objet," il " fera référence à l'objet.

En raison de notre chaîne d'étendue, si nous sommes à l'intérieur d'un sous-objet (un objet à l'intérieur d'un objet), " il " fera référence à la sous-objet et non l'objet parent.

Comme une note de côté, il est également utile d'ajouter que lors de l'utilisation de fonctions comme la fonction setInterval, setTimeout et eval, lors de l'exécution d'une fonction ou d'une méthode via l'un de ces, " il " se réfère à la fenêtre de l'objet que ce sont des méthodes de fenêtre, de sorte que setInterval() et de la fenêtre.setInterval() sont les mêmes.

Ok, maintenant que nous avons que de la route, nous allons faire un exemple réel et de créer une forme de validation de l'objet!

L'Utilisation du monde réel: Une Forme de Validation de l'Objet

Je dois d'abord vous présenter à la fonction addEvent qui nous permettra de créer et est une combinaison de ECMAScript (Firefox, Safari, etc.. ) la méthode addEventListener() et la fonction Script Microsoft ActiveX est attachEvent() fonction.

Cela crée une nouvelle fonction à trois arguments, d'être l'objet DOM nous sommes à la fixation de l'événement, le type qui est le type d'événement et le fn étant la fonction à exécuter lorsque l'événement est déclenché. Il vérifie d'abord si la méthode addEventListener est pris en charge, si oui il va l'utiliser, sinon il va vérifier pour attachEvent et si tout le reste échoue, vous êtes probablement à l'aide de IE5 ou quelque chose de tout aussi obsolète donc, nous allons ajouter l'événement directement sur sa propriété d'événement (note: la troisième option remplacer les fonction que peut avoir été attaché à la propriété d'événement alors que les deux premières vais l'ajouter comme une fonction supplémentaire à sa propriété d'événement).

Maintenant, nous allons mettre en place notre document de sorte qu'il est similaire à ce que vous pouvez voir lorsque vous développez jQuery choses.

En jQuery, vous auriez;

À l'aide de notre fonction addEvent nous avons;

Maintenant, pour notre objet de Formulaire.

Donc, c'est assez basique, mais peuvent facilement être étendues.

Pour briser ce bas nous avons d'abord créer une nouvelle propriété qui est juste le nom de la chaîne de notre "valides" classe css que lorsqu'il est appliqué au champ de formulaire, ajoute valide effets tels qu'une bordure verte. Nous avons également définir nos deux sous-objets, fname et lname, de sorte que nous pouvons définir leurs propres propriétés qui peuvent être utilisées par les méthodes d'ailleurs, ces propriétés sont minLength qui est le montant minimum de caractères ces champs peuvent avoir, maxLength qui est le max de caractères du champ peut avoir et fieldName qui n'est pas utilisé, mais peut être saisi pour des choses comme l'identification sur le terrain avec une interface utilisateur conviviale chaîne de caractères dans un message d'erreur (par exemple. Le prénom de champ est requis.').

Ensuite, nous créons un validateLength méthode qui accepte deux arguments: formEl de l'élément du DOM pour valider et le type qui se réfère à l'un des sous-objet pour l'utiliser (c'est à dire fname ou lname). Cette fonction vérifie si la longueur du champ est entre les minLength et maxLength gamme, si ce n'est pas alors nous retirer nos valide de classe (si elle existe) de l'élément et renvoie la valeur false, sinon, si c'est ensuite, nous ajoutons à la classe valide et renvoie la valeur true.

Ensuite, nous avons un validateEmail méthode qui accepte un élément du DOM comme un arguement, nous testons ensuite ce DOM éléments de valeur contre un e-mail de type expression régulière; nouveau, si elle passe, nous ajoutons notre classe et retourner true et vice versa.

Enfin, nous avons un getSubmit méthode. Cette méthode est donné à l'id du formulaire et des boucles à travers la saisie de tous les éléments à l'intérieur de la forme indiqué pour trouver celui qui a un type de soumettre (type="submit"). La raison de cette méthode est de retourner sur le bouton soumettre afin que nous puissions désactiver jusqu'à ce que le formulaire est prêt à se soumettre.

Disons-le de cette programme de validation de l'objet à travailler sur une forme réelle. Nous avons d'abord besoin de notre HTML.

Maintenant, nous allons accéder à ces objets d'entrée à l'aide de JavaScript et de les valider lorsque le formulaire soumet.

Nous allons briser ce code.

Nous terminons notre code dans la fonction addEvent ainsi, lorsque la fenêtre est chargé de ce script s'exécute. Tout d'abord nous emparer de notre formulaire à l'aide de son IDENTIFIANT et de le mettre dans une variable nommée ourForm, puis nous de saisir notre bouton envoyer (à l'aide de notre Formulaire objets getSubmit méthode) et le mettre dans une variable nommée submit_button, puis réglez les boutons de soumission désactivé attribut de "personnes handicapées".

Ensuite, nous définissons un checkForm fonction. Il stocke toutes les entrées à l'intérieur du champ de formulaire dans un tableau et de nous attacher à une variable nommée.. vous l'avez deviné.. entrées! Ensuite, elle définit des instructions if imbriquées qui test de chacun des champs à l'intérieur de l'intrants tableau à l'encontre de nos méthodes de Formulaire. C'est la raison pour laquelle nous a renvoyé true ou false dans nos façons de faire, donc, si elle retourne true, on passe que si l'instruction et de continuer sur l'autre, mais si elle retourne false, sortir de la si les déclarations.

À la suite de notre définition de la fonction, nous exécutons la checkForm de la fonction lorsque la page au départ de charges et de joindre également la fonction à un événement keyup et un événement d'envoi.

Vous demandez peut-être, pourquoi attacher à présenter si nous avons désactivé le bouton soumettre. Eh bien, si vous êtes concentré sur un champ de saisie et appuyez sur la touche entrée, il va tenter de soumettre le formulaire et nous avons besoin de tester pour cela, d'où la raison de notre checkForm fonction renvoie la valeur true (soumet le formulaire) ou faux (ne pas soumettre le formulaire).

Conclusion

Donc, nous avons appris comment définir les différents types d'objets à l'intérieur de JavaScript et de créer des propriétés et des méthodes. Nous avons aussi appris une chouette fonction addEvent et appris à utiliser notre objet dans une base de l'exemple du monde réel.

Ceci conclut les bases de JavaScript Orientation de l'Objet. J'espère que cela peut vous commencer sur votre chemin à la construction de votre propre bibliothèque JavaScript! Si vous avez aimé cet article et sont intéressés à d'autres JavaScript sujets liés à la poster dans les commentaires, comme je serais heureux de continuer à écrire. Merci pour la lecture.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.