1. Espace de noms :
L'espace de noms dans JS est étendu à l'aide des propriétés de l'objet. Par exemple, un utilisateur définit un objet A, avec des attributs B et C sous l'objet A, et les attributs B et C sont des objets. Par conséquent, a = {b: {}, c: {}}, alors l'utilisateur peut définir la même méthode et attribut dans l'objet B et l'objet C. Par conséquent, B et C appartiennent à différents espaces de noms. Lorsque nous appelons les méthodes dans les objets B et C, nous pouvons les appeler via Ablike () et ACLILI (). Bien sûr, A est une propriété dans l'objet Window.
Mais il y a une situation, par exemple: la page boke.js présente jquery.js et prototype.js (ils ajouteront $ attributs à l'objet Window), et un conflit se produit.
Par conséquent, il y a noconflict () dans jQuery.js pour gérer les conflits. Processus d'exécution: la page introduit d'abord le prototype. À l'heure actuelle, le prototype occupera l'attribut $ de la fenêtre. Ensuite, lorsque jQuery est introduit, jQuery stockera l'attribut $ de la fenêtre précédente dans _ $, puis utilisera l'attribut $ par lui-même. Pour le moment, vous pouvez appeler la méthode jQuery via $. Lorsque vous n'avez pas besoin d'utiliser jQuery mais que vous souhaitez utiliser le prototype, vous pouvez appeler $ .NoConflict (), puis $ sera restauré dans un objet prototype. Pour le moment, vous pouvez utiliser la méthode du prototype via $.
La copie de code est la suivante:
var _ $ = fenêtre. $, _jQuery = window.jquery;
Noconflict: fonction (Deep) {
fenêtre. $ = _ $;
if (deep) window.jquery = _jQuery;
retourner jQuery; // Valeur de retour, vous pouvez attribuer de la valeur à d'autres noms de variables, tels que Chaojidan, afin que vous puissiez appeler des méthodes dans jQuery via Chaojidan.
}
2. Extension d'objet :
Si l'objet d'espace de noms a, nous devons étendre la fonction. Par exemple: j'ai besoin de copier toutes les propriétés et méthodes de l'objet A dans l'objet B. Je n'ai pas à écrire le code un par un dans les objets B.
La copie de code est la suivante:
mixage de fonction (cible, source) {
var args = [] .slice.call (arguments), i = 1,
iscover = typeof args [args.length-1] == "booléen"? args.pop (): true; // Non écrit, la valeur par défaut est vraie, la valeur par défaut est remplacée.
if (args.length == 1) {
Target =! this.window? ce:{};
// s'il n'y a qu'un seul paramètre d'objet, étendez cet objet. Par exemple: j'appelle le mix (b) Dans le contexte de l'objet A, alors c'est A pour le moment, de sorte que les propriétés et les méthodes de B seront ajoutées à l'objet A. Cependant, si le mix (b) est appelé dans la fenêtre, les propriétés et les méthodes de l'objet B seront ajoutées à un objet vide et renvoient cet objet vide pour empêcher les propriétés et méthodes d'écriture et les méthodes du même nom dans l'objet de fenêtre. (Seuls les objets de fenêtre ont des propriétés de fenêtre)
i = 0;
}
while ((source = args [i ++])) {
pour (clé dans la source) {
if (isCover ||! (clé dans Target)) // Si écraser, attribuez directement la valeur. Si vous n'écrasez pas, déterminez d'abord si la clé existe dans l'objet cible. S'il existe, aucune valeur ne sera attribuée.
{
Target [key] = source [key];
}
}
}
cible de retour;
}
Les enquêteurs de grandes entreprises aiment vérifier les tableaux. Vous pouvez le vérifier. Chaque élément du tableau peut être un objet, et même si l'objet A et l'objet B ont les mêmes propriétés et méthodes, elles ne sont pas égales. Les chaînes et les chiffres, tels que 123 et "123", peuvent être trouvés complètes en recherchant en ligne.
3.Arrayisation :
Il existe de nombreux objets de tableau de classe dans le navigateur, arguments, documents.forms, document.links, form.elements, document.getElementsByTagName, childNodes, etc. (htmlcollection, nodelist).
Il y a aussi un objet personnalisé avec un style d'écriture spécial
La copie de code est la suivante:
var arraylike = {
0: "A",
1: "B",
Longueur: 2
}
Cet objet est écrit comme l'objet jQuery.
Nous devons convertir l'objet de tableau de classe mentionné ci-dessus en un objet de tableau.
[] .slice.Call peut être résolu. Cependant, le HTMLCollection et le NodeList dans l'ancienne version d'IE ne sont pas des sous-classes de l'objet, et la méthode [] .slice.Call ne peut pas être utilisée.
Par conséquent, nous pouvons remplacer une méthode de tranche.
La copie de code est la suivante:
A.slice = window.dispatchEvent? function (nœuds, start, end) {return [] .slice.call (nœuds, start, end); }
// Si la fenêtre a la propriété DispatchEvent, il prouve qu'il prend en charge la méthode [] .slice.Call et la détection des capacités.
: fonction (nœuds, démarrage, fin) {
var ret = [], n = nœuds.length;
if (end == undefined || typeof end === "nombre" && isFinite (end)) {// && priority est supérieur à ||, donc la fin n'est pas écrite, ou la fin est un numéro fini et entre
start = paSeInt (start, 10) || 0; // Si le démarrage n'existe pas ou n'est pas un nombre, alors la valeur est attribuée à 0.
end = end == Undefined? N: Parseint (fin, 10); // Si la fin n'existe pas, la valeur est n.
if (start <0) start + = n;
if (end <0) end + = n;
if (end> n) end = n;
for (var i = start; i <end; i ++) {
ret [i-start] = nœuds [i]; // la version basse IE utilise le formulaire d'affectation du tableau
}
}
retour retour;
}
4. Jugement de type :
Il existe cinq types de données simples de js: null, non défini, booléen, numéro, chaîne.
Il existe également des types de données complexes: objet, fonction, regexp, date, objets personnalisés, tels que: personne, etc.
Le typeof est généralement utilisé pour juger booléen, nombre, chaîne, instanceof est généralement utilisé pour juger les types d'objets. Mais ils ont tous des défauts. Par exemple: l'instance de tableau dans le Fireme n'est pas une instance de tableau dans la fenêtre parent, l'appel de l'instance renvoie false. (Cette question a été posée lors du recrutement du campus 360). type de nouveau boolean (true) // "objet", enveloppez l'objet. Boolean, Number et String sont trois types d'objets d'emballage, qui sont discutés dans la programmation de programme avancée JS.
Beaucoup de gens utilisent le type de document. Tout pour déterminer si c'est IE. En fait, c'est très dangereux. Étant donné que Google et Firefox aiment également cette propriété, cette situation se produit sous Google Chrome: typeof document.all // non défini cependant, document.all // htmlallcollection, en utilisant le typeof pour déterminer qu'il n'est pas défini, mais cette valeur de propriété peut être lue.
Mais maintenant, vous pouvez utiliser le objet.prototype.tostring.Call de la méthode pour déterminer le type. Cette méthode peut sortir directement [[classe]] à l'intérieur de l'objet. Cependant, les objets IE8 et ci-dessous ne peuvent pas utiliser cette méthode. Vous pouvez utiliser Window == document // true document == window // false ie6,7,8.
NODETYPE (1: élément 2: attribut 3: texte texte 9: document)
Méthodes pour juger les types à jQuery:
La copie de code est la suivante:
classe2Type = {}
jQuery.each ("Boolean Number String Fonction Array Date Regexp Object" .split (""), fonction (i, name) {
class2Type ["[objet" + name + "]"] = name.tolowercase ();
// class2Type = {"[objet boolean]": booléen, "[numéro d'objet]": numéro, "[string d'objet]": string, "[Fonction objet]": fonction, "[objet Array]": Array ......}
});
jQuery.Type = fonction (obj) {// Si obj est null, non défini, etc., la chaîne "null", "undefined". Sinon, appelez la méthode TOSTRING, jugez si elle peut être appelée et si elle est possible, renvoyez l'objet (fenêtre, Dom et autres objets ActiveXObject dans la version inférieure de IE)
retour obj == null? String (obj): class2Type [toString.call (obj)] || "objet";
}
5.
Lors de l'exploitation du nœud DOM par JS, la page doit construire l'arbre DOM. Par conséquent, la méthode de la fenêtre. One charge est généralement utilisée. Cependant, la méthode Onload ne sera pas exécutée après le chargement des ressources. Afin de faire en sorte que la page réponde plus rapidement aux opérations utilisateur, nous n'avons besoin d'utiliser les opérations JS que après la construction de l'arborescence DOM. Au lieu d'attendre que toutes les ressources soient chargées (image, flash).
Par conséquent, l'événement téléchargé DomContent se produit, qui est déclenché après la construction de l'arborescence DOM. Cependant, l'ancienne version d'IE ne le prend pas en charge, il y a donc un hack.
La copie de code est la suivante:
if (document.readystate === "complet") {// Au cas où le fichier JS est chargé uniquement après le chargement du document DOM. À l'heure actuelle, la méthode FN (la méthode que vous souhaitez exécuter) est exécutée via ce jugement. Car une fois le document chargé, la valeur du document.readystate est terminée
setTimeout (FN); // Exécuter de manière asynchrone, que le code derrière lui soit exécuté en premier. C'est l'utilisation de jQuery, vous n'avez pas besoin de le comprendre.
}
else if (document.addeventListener) {// prend en charge l'événement DomContent.
Document.AddeventListener ("DomContentloaded", fn, false); // bulles
window.addeventListener ("Load", fn, false); // Dans le cas où le fichier JS est chargé après la construction de l'arborescence DOM. Cette fois, l'événement téléchargé DomContent ne sera pas déclenché (le déclencheur a été terminé), il ne déclenchera que l'événement de chargement
}
autre{
Document.Attachevent ("OnReadyStateChange", function () {// Pour la sécurité des iframes sous IE, l'exécution d'ONLOLOD sera prioritaire, et parfois non.
if (document.readystate === "complet") {
fn ();
}
});
window.Attachevent ("onload", fn); // Il jouera toujours un rôle au cas où d'autres événements d'écoute ne seront pas récupérés, donc au moins la méthode FN peut être déclenchée par l'événement Onload.
var top = false; // voir s'il est dans le iframe
Essayez {// Window.FrameElement est l'objet iframe ou cadre contenant cette page. Sinon, c'est nul.
top = window.frameElement == null && document.DocumentElement;
} catch (e) {}
if (top && top.doscroll) {// s'il n'y a pas d'iframe, et c'est IE
(fonction doscrollcheck () {
essayer{
top.doscroll ("gauche"); // dans c'est
} catch (e) {
return setTimeout (DoscrollCheck, 50); // s'il n'a pas encore été construit, continuez à écouter
}
fn ();
})
}
}
La méthode FN doit contenir la suppression de tous les événements de liaison.
Bien sûr, IE peut également utiliser le hack de report de script. Le principe est: le script spécifié par Defer ne sera exécuté qu'après la construction de l'arborescence DOM. Cependant, cela nécessite l'ajout de fichiers JS supplémentaires et est rarement utilisé dans des bibliothèques distinctes.
Principe d'utilisation: ajoutez des balises de script au document et utilisez Script.src = "xxx.js" pour écouter l'événement OnReadyStateChange de Script. Lorsque ce.readystate == "complet", la méthode FN est exécutée.
En d'autres termes, ce n'est qu'après la construction de DOM XXX.js, et c'est ceci.readystate deviendra complet.
Ce qui précède est les notes de lecture pour le premier chapitre de la conception du framework JavaScript. Le contenu est relativement simple, ce qui permet à tout le monde de mieux comprendre le contenu de base de ce chapitre.