Notes de lecture de conception de framework JavaScript Seed module_javascript skills

1. Espace de noms  :

L'espace de noms en js est étendu en utilisant les propriétés des objets. Par exemple, l'utilisateur définit un objet A. Sous l'objet A, il y a des attributs B et des attributs C. En même temps, les attributs B et C sont des objets. Par conséquent, A={B:{},C:{}}, l'utilisateur peut alors définir les mêmes méthodes et propriétés dans l'objet B et l'objet C. Par conséquent, B et C appartiennent à des espaces de noms différents. Lorsque nous appelons des méthodes dans les objets B et C, nous pouvons les appeler via A.B.like() et A.C.like(). Bien sûr, A appartient aux propriétés de l’objet window.

Mais il y a une situation, par exemple : la page boke.jsp introduit jquery.js et prototype.js (ils ajouteront l'attribut $ à l'objet window), puis 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. À ce stade, le prototype occupera l'attribut $ de la fenêtre. Ensuite, lorsque jquery sera introduit, jquery stockera l'attribut $ de la fenêtre précédente dans _$, puis utilisera l'attribut $ lui-même. À ce stade, vous pouvez appeler la méthode jquery via $. Lorsque vous n'avez pas besoin d'utiliser jquery maintenant mais que vous souhaitez utiliser un prototype, vous pouvez appeler $.noConflict() et $ sera restauré dans l'objet prototype. Pour le moment, vous pouvez utiliser la méthode prototype via $.

Copier le code Le code est le suivant :

var _$ = window.$, _jQuery= window.jQuery
noConflict:fonction (profond){
                fenêtre.$ = _$;
   if(deep) window.jQuery = _jQuery;
                                   return jQuery ;
>

2. Extension d'objet  :

Maintenant que nous avons l'objet espace de noms, nous devons étendre la fonctionnalité. Par exemple : je dois copier toutes les propriétés et méthodes de l’objet A vers l’objet B. Je n'ai pas besoin d'écrire du code dans les objets B un par un.

Copier le code Le code est le suivant :

fonction mix(cible, source){
var args = [].slice.call(arguments),i=1,
IScover = Typeof ARGS [ARGS.Length-] == "Boolean" ? Args.pop () : True ; // N'écrivez pas, la valeur par défaut est true et la valeur par défaut est couverte.
if(args.length == 1){                                          target = !this.window? ceci :{};
// S'il n'y a qu'un seul paramètre d'objet, développez cet objet. Par exemple : j'appelle mix(B) dans le contexte de l'objet A, alors c'est A, donc les propriétés et méthodes de B seront ajoutées à l'objet A. Mais si mix(B) est appelé dans window, les propriétés et méthodes de l'objet B seront ajoutées à un objet vide, et l'objet vide sera renvoyé pour éviter d'écraser les propriétés et méthodes du même nom dans l'objet window. (Seul l'objet window a l'attribut window)
je =0;
>
​while((source = args[i ])){
　　pour(saisir la source){
Si (iSCOVER ||! (Clé dans la cible) // Si elle est couverte, elle sera directement attribuée. Si elle ne couvre pas, déterminez d'abord si la clé est dans l'objet cible, si elle existe, elle n'attribuera pas de valeur
　　  {
　　　　　cible[clé] = source[clé];
                      }
           }
>
Cible de retour ;
>

Les enquêteurs des grandes entreprises aiment poser des questions sur la vérification des duplications des 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, ils ne le sont pas. égal. Les chaînes et les nombres, tels que 123 et "123", etc., vous pouvez trouver une méthode complète en effectuant une recherche en ligne.

3. Arrayisation  :

Il existe de nombreux objets de type tableau sous le navigateur, tels que arguments, document.forms, document.links, form.elements, document.getElementsByTagName, childNodes, etc. (HTMLCollection, NodeList).

Il existe également un objet personnalisé écrit d'une manière spéciale

Copier le code Le code est le suivant :

var tableauLike = {
​​ 0 :"un",
1 : "b",
longueur : 2
>

La façon dont cet objet est écrit est la façon dont les objets jQuery sont écrits.

Nous devons convertir l'objet de type tableau ci-dessus en un objet tableau.

La méthode

[].slice.call peut résoudre ce problème. Cependant, HTMLCollection et NodeList sous l'ancienne version d'IE ne sont pas des sous-classes d'Object et la méthode [].slice.call ne peut pas être utilisée.

Nous pouvons donc remplacer une méthode slice.

Copier le code Le code est le suivant :

A.slice = window.dispatchEvent ? function(nodes,start,end){ return [].slice.call(nodes,start,end }
); // Si la fenêtre a l'attribut dispatchEvent, cela prouve qu'elle prend en charge la méthode [].slice.call et la détection de capacité.
:function(nœuds, début, fin){
                      var ret = [],n=nodes.length;
​​​​ Start = PARSEINT (Start, 10) || 0; // Si le début n'existe pas ou n'est pas un nombre, on lui attribue 0.
                                                                    fin = fin == non défini ? 　　　　　if(start < 0) 　　 start = n;
　　　　if(end<0) end = n;
　　　　if(end>n) end = n;
　　　　　for(var i = start;i RET [I-Start] = NODES [i]; // La version basse d'IE utilise la forme d'affectation de tableau
                                                                                                                                                                                                                                                                　　　　}
　　　　retour ret;
>

4. Type de jugement :

　Les cinq types de données simples de js sont : null, non défini, booléen, nombre et chaîne.

Il existe également des types de données complexes : Objet, Fonction, RegExp, Date, objets personnalisés, tels que Personne, etc.

Typeof est généralement utilisé pour déterminer le booléen, le nombre, la chaîne et instanceof est généralement utilisé pour déterminer le type d'objet. Mais ils ont tous des défauts. Par exemple : l'instance de tableau dans firame n'est pas l'instance de tableau de la fenêtre parent, et l'appel de instanceof renverra false. (Cette question a été posée lors du recrutement de l'école 360). typeof new Boolean(true) // "object" , objet d'empaquetage. Il existe trois objets d'empaquetage booléen, nombre et chaîne, qui sont abordés dans la programmation avancée js.

De nombreuses personnes utilisent typeof document.all pour déterminer s'il s'agit d'IE. En fait, c'est très dangereux, car Google et Firefox aiment également cet attribut, donc cette situation se produit sous Google Chrome : typeof document.all // non défini Cependant. , document.all //HTMLAllCollection, jugé par typeof comme étant indéfini, mais cette valeur d'attribut peut être lue.

Mais vous pouvez maintenant utiliser la méthode Object.prototype.toString.call pour déterminer le type. Cette méthode peut directement afficher la [[Classe]] à l'intérieur de l'objet. Cependant, cette méthode ne peut pas être utilisée pour les objets fenêtre dans IE8 et versions antérieures. Vous pouvez utiliser window == document // true document == window // false sous IE6,7,8.

NodeType (1 : Élément 2 : Attribut 3 : Texte Texte 9 : document)

Méthode utilisée pour déterminer le type en jquery :

Copier le code Le code est le suivant :

classe2type ={}
jQuery.each("Numéro booléen Chaîne Fonction Tableau Date RegExp Objet".split(" "),function(i,name){
class2type [ "[objet " nom "]" ] = nom.toLowerCase();
//class2type = {"[object Boolean]":boolean,"[object Number ]":number ,"[object String ]":string ,"[object Function ]":function ,"[object 　　Array ]":array . .....🎜> 　　});
jQuery.type = function(obj){ //Si obj est nul, non défini, etc., renvoie la chaîne "null", "non défini". Sinon, appelez la méthode toString, jugez si elle peut être appelée et renvoyez l'objet (objets ActiveXobject tels que window et Dom dans les versions inférieures d'IE)
return obj == null ? String(obj) : class2type [ toString.call(obj) ] || "objet";
>

5.domReady

Lorsque js exploite des nœuds dom, la page doit construire un arbre dom. Par conséquent, la méthode window.onload est généralement utilisée. Mais la méthode onload ne sera exécutée que lorsque toutes les ressources seront chargées. Afin que la page réponde plus rapidement aux opérations de l'utilisateur, nous n'avons besoin d'utiliser les opérations js qu'une fois l'arborescence DOM construite. Il n'est pas nécessaire d'attendre que toutes les ressources soient chargées (images, flash).

Ainsi, l'événement DOMContentLoaded apparaît, qui est déclenché après la construction de l'arborescence Dom. Mais l'ancienne version d'IE ne le prend pas en charge, il y a donc un hack.

Copier le code Le code est le suivant :

if(document.readyState === "complete"){ //Dans le cas où le fichier js est chargé uniquement après le chargement du document Dom. À ce stade, la méthode fn (la méthode que vous souhaitez exécuter) est exécutée via ce jugement. Parce qu'une fois le document chargé, la valeur de document.readyState est complète
            setTimeout(fn);                                                                                                        setTimeout(fn);    Voici l'utilisation dans jQuery, vous n'avez pas besoin de la comprendre.
>
else if(document.addEventListener){//Supporte l'événement DOMContentLoaded
              document.addEventListener("DOMContentLoaded",fn,false); window.addEventListener("load",fn,false); //Dans le cas où le fichier js est chargé après la construction de l'arborescence DOM. A ce moment, l'événement DOMContentLoaded ne sera pas déclenché (il a été déclenché), seul l'événement de chargement
sera déclenché. >
autre{
document.attachEvent("onreadystatechange",function(){//Pour la sécurité iframe sous IE, parfois l'exécution du chargement est prioritaire, parfois non.
　　if(document.readyState ==="complete"){
　　　fn();
　　}
});
window.attachEvent("onload",fn); //Cela fonctionnera toujours, au cas où d'autres événements de surveillance ne seraient pas obtenus, afin qu'au moins la méthode fn puisse être déclenchée via l'événement onload.
var top = false;//Vérifiez s'il est dans iframe
Try{//window.frameElement est l'objet iframe ou frame contenant cette page. Sinon, c'est nul.
              top = window.frameElement == null && document.documentElement;
}attraper(e){}
If(top && top.doScroll){ //S'il n'y a pas d'iframe et que c'est IE
(fonction doScrollCheck(){
                  essayer{
　　　　top.doScroll("left");//Sous IE, si l'arborescence Dom est construite, vous pouvez appeler la méthode doScroll de html　　　
　　　　}attraper(e){
Return settimeout (doscrollcheck, 50); // S'il n'est pas construit, continuez à écouter
                 }
                                   fn();
             })
>
>

La méthode fn doit inclure la suppression de tous les événements liés.

Bien sûr, IE peut également utiliser le script defer hack. Le principe est le suivant : le script avec defer spécifié ne sera pas exécuté tant que l'arborescence DOM n'est pas construite. Mais cela nécessite l'ajout de fichiers js supplémentaires, qui sont rarement utilisés dans une bibliothèque distincte.

Principe d'utilisation : ajoutez une balise de script au document et utilisez script.src = "xxx.js" pour écouter l'événement onreadystatechange du script. Lorsque this.readyState == "complete", exécutez la méthode fn.

C'est-à-dire qu'une fois le DOM construit, xxx.js sera exécuté et son this.readyState deviendra complet.

Ce qui précède sont les notes de lecture du premier chapitre sur la conception du framework JavaScript. Le contenu est relativement concis, afin que chacun puisse mieux comprendre le contenu de base de ce chapitre.