introduire
Cet article présente principalement le prochain article du modèle de création d'objets. L'utilisation de diverses techniques peut éviter considérablement les erreurs ou écrire du code très rationalisé.
Modèle 6: sucre de syntaxe de fonction
Syntaxe Fonction Le sucre est une extension pour ajouter rapidement des méthodes (fonctions) à un objet. Cela utilise principalement les caractéristiques du prototype. Le code est relativement simple. Examinons d'abord le code d'implémentation:
La copie de code est la suivante:
if (typeof function.prototype.method! == "fonction") {
Function.prototype.method = fonction (nom, implémentation) {
this.prototype [name] = implémentation;
retourner ceci;
};
}
Lors de l'extension d'un objet, vous pouvez l'utiliser comme ceci:
La copie de code est la suivante:
var personne = fonction (nom) {
this.name = name;
}
.Method ('getName',
fonction () {
Renvoie ce.name;
})
.Method ('setName', fonction (name) {
this.name = name;
retourner ceci;
});
De cette façon, nous ajoutons deux méthodes: getName et setName à la fonction personne. Ensuite, vérifions le résultat:
La copie de code est la suivante:
var a = new personne ('Adam');
console.log (a.getName ()); // 'Adam'
console.log (a.setName ('eve'). getName ()); // 'Eve'
Modèle 7: constante de l'objet
Les constantes d'objet sont le mode de réalisation de diverses méthodes fournies par SET, GET, IFDEFINED dans un objet. De plus, la méthode de définition ne conservera que le premier ensemble d'objets, et le paramètre ultérieur ne sera pas valide, ce qui a atteint l'objectif que d'autres ne peuvent pas surcharger. Le code d'implémentation est le suivant:
La copie de code est la suivante:
var constante = (function () {
var constantes = {},
posseprop = object.prototype.hasownproperty,
// Seuls ces trois types de valeurs sont autorisés
autorisé = {
chaîne: 1,
Numéro: 1,
booléen: 1
},
prefix = (math.random () + "_"). Slice (2);
retour {
// Définissez la propriété avec le nom du nom
set: function (nom, valeur) {
if (this.isdefined (name)) {
retourne false;
}
if (! ownperprop.call (autorisé, type de valeur)) {
retourne false;
}
constantes [préfixe + name] = valeur;
Retour Vrai;
},
// déterminer s'il y a un nom nommé de propriété
isDefined: function (name) {
return ownProp.Call (constantes, préfixe + nom);
},
// Obtenez l'attribut nommé nom
get: function (name) {
if (this.isdefined (name)) {
RETOUR CONSTANTS [PRÉFIX + NAME];
}
retourner null;
}
};
} ());
Le code de vérification est le suivant:
La copie de code est la suivante:
// Vérifiez s'il existe
console.log (constant.isdefined ("maxwidth")); // FAUX
// Définition
console.log (constant.set ("maxwidth", 480)); // vrai
// retester
console.log (constant.isdefined ("maxwidth")); // vrai
// Essayez de redéfinir
console.log (constant.set ("maxwidth", 320)); // FAUX
// déterminer si la définition d'origine existe toujours
console.log (constant.get ("maxwidth")); // 480
Mode 8: mode bac à sable
Le mode Sandbox fournit un contexte distinct pour un ou plusieurs modules sans affecter le contexte d'autres modules. Par exemple, il existe un bac à sable avec trois méthodes, DOM et AJAX. Si deux d'entre eux sont appelés à former un environnement, il n'y a pas d'interférence avec les trois environnements. Le code d'implémentation de sandbox est le suivant:
La copie de code est la suivante:
fonction sandbox () {
// Convertir les paramètres en tableau
var args = array.prototype.slice.call (arguments),
// Le dernier paramètre est le rappel
rappel = args.pop (),
// sauf pour le dernier paramètre, tous les autres modules à sélectionner
modules = (args [0] && types args [0] === "String")? args: args [0],
je;
// Forcer le nouvel opérateur
if (! (Cette instance de sandbox)) {
retourner un nouveau sandbox (modules, rappel);
}
// ajouter des propriétés
this.a = 1;
this.b = 2;
// ajouter des modules à cet objet
// s'il n'y a pas de module ou si le paramètre passé est "*", alors tous les modules sont passés
if (! modules || modules == '*') {
modules = [];
pour (i dans sandbox.modules) {
if (sandbox.modules.hasownproperty (i)) {
modules.push (i);
}
}
}
// Initialiser le module requis
pour (i = 0; i <modules.length; i + = 1) {
Sandbox.modules [modules [i]] (this);
}
// appelle le rappel
rappel (this);
}
// Ajouter un objet prototype par défaut
Sandbox.prototype = {
Nom: "Mon application",
Version: "1.0",
getName: function () {
Renvoie ce.name;
}
};
Ensuite, nous définissons le module initial par défaut:
La copie de code est la suivante:
Sandbox.modules = {};
Sandbox.modules.dom = fonction (box) {
box.getElement = function () {
};
box.getStyle = function () {
};
box.foo = "bar";
};
Sandbox.modules.event = fonction (box) {
// Accès au prototype de sandbox si nécessaire:
// box.constructor.prototype.m = "mmmm";
box.Attachevent = function () {
};
box.detachevent = function () {
};
};
Sandbox.modules.ajax = fonction (box) {
box.Makerequest = function () {
};
box.getResponse = function () {
};
};
La méthode d'appel est la suivante:
La copie de code est la suivante:
// Méthode d'appel
Sandbox (['ajax', 'événement'], fonction (box) {
console.log (typeof (box.foo));
// il n'y a pas de sélection DOM, donc box.foo n'existe pas
});
Sandbox ('ajax', 'dom', fonction (box) {
console.log (typeof (box.attachevent));
// il n'y a aucun événement sélectionné, donc le playevent défini dans l'événement n'existe pas non plus
});
Sandbox ('*', fonction (box) {
console.log (boîte); // Toutes les méthodes définies ci-dessus sont accessibles
});
Grâce à trois méthodes d'appel différentes, nous pouvons voir que le contexte des trois méthodes est différent. Le premier n'a pas FOO; Le second n'a pas de littyevent, car seuls AJAX et DOM sont chargés, mais l'événement n'est pas chargé; Le troisième ne charge pas tout.
Modèle 9: membres statiques
Les membres statiques ne sont que des propriétés statiques fournies par une fonction ou un objet, qui peut être divisé en privé et public, tout comme le public statique et statique privé en C # ou Java.
Regardons d'abord les membres du public. Les membres du public sont très simples. Les méthodes et fonctions que nous déclarons sont généralement publiques, comme:
La copie de code est la suivante:
// constructeur
var gadget = function () {
};
// Méthode statique publique
Gadget.isshiny = function () {
Retour "You Bet";
};
// Méthode normale à ajouter sur le prototype
Gadget.prototype.setprice = fonction (prix) {
this.price = prix;
};
// appelle des méthodes statiques
console.log (gadget.isshiny ()); // "tu parie"
// Créez une instance et appelez la méthode
var iPhone = new gadget ();
iPhone.SetPrice (500);
console.log (typeof gadget.setPrice); // non défini "
console.log (typeof iphone.isshiny); // non défini "
Gadget.prototype.isshiny = gadget.isshiny;
console.log (iPhone.isshiny ()); // "tu parie"
Quant aux membres statiques privés, nous pouvons utiliser leurs fonctionnalités de fermeture pour les implémenter. Voici deux méthodes de mise en œuvre.
La première méthode d'implémentation:
La copie de code est la suivante:
var gadget = (function () {
// Variables / propriétés statiques
var compter = 0;
// CLOSURE Renvoie une nouvelle implémentation du constructeur
return function () {
console.log (compteur + = 1);
};
} ()); // Exécuter immédiatement
var g1 = new gadget (); // Journaux 1
var g2 = new gadget (); // Logs 2
var g3 = new gadget (); // Logs 3
On peut voir que bien qu'il s'agisse d'un nouvel objet à chaque fois, le nombre est toujours incrémenté, atteignant l'objectif des membres statiques.
La deuxième méthode:
La copie de code est la suivante:
var gadget = (function () {
// Variables / propriétés statiques
var compteur = 0,
Newgadget;
// implémentation du nouveau constructeur
Newgadget = function () {
compteur + = 1;
};
// Autoriser l'accès aux méthodes
Newgadget.prototype.getLastid = function () {
compteur de retour;
};
// Écrasement du constructeur
return newgadget;
} ()); // Exécuter immédiatement
var iPhone = new gadget ();
iPhone.getLastid (); // 1
var iPod = new gadget ();
iPod.getLastid (); // 2
var iPad = new gadget ();
ipad.getLastid (); // 3
Le nombre est également incrémenté, qui est réalisé en utilisant la fonction de fermeture de sa méthode d'autorisation interne.
Résumer
Il s'agit du prochain article du mode de création d'objets. Les deux articles ensemble ont 9 modèles. Ce sont les modes de création d'objets que nous utilisons souvent dans la programmation quotidienne JavaScript. Différents scénarios jouent différents rôles. J'espère que tout le monde choisira le mode applicable en fonction de ses besoins respectifs.