Partage de connaissances sur le front-end web

1. If conditionnelle liée

Pour l'expression entre parenthèses de l'instruction if, ECMAScript appellera automatiquement Boolean() transformation La fonction convertit le résultat de cette expression en valeur booléenne. Si la valeur est vraie, l'instruction suivante est exécutée, sinon elle n'est pas exécutée.

2. Arguments liés

Utilisez l'attribut length de l'objet arguments pour déterminer intelligemment le nombre de paramètres, puis appliquez les paramètres de manière raisonnable.

Par exemple, vous souhaitez mettre en œuvre une opération d'addition pour cumuler tous les nombres transmis, mais le nombre de nombres est incertain.

function box() {var sum = 0;if (arguments.length == 0) return sum; //如果没有参数，退出for(var i = 0;i < arguments.length; i++) { //如果有，就累加sum = sum + arguments[i];
        }return sum; //返回累加结果    }
    alert(box(5,9,12));

3.Attributs internes de la fonction

Il y a deux objets spéciaux à l'intérieur de la fonction : les arguments et ceci. arguments est un objet de type tableau qui contient tous les paramètres passés dans la fonction. Son objectif principal est de sauvegarder les paramètres de la fonction. Mais cet objet possède également une propriété appelée appelé, qui est un pointeur vers la fonction propriétaire de l’objet arguments.

L'algorithme récursif est généralement utilisé pour les fonctions factorielles, donc la fonction s'appellera certainement en interne ; si le nom de la fonction ne change pas, il n'y a pas de problème, mais une fois le nom de la fonction modifié, le nom interne les auto-appels doivent être modifiés un par un. Pour résoudre ce problème, nous pouvons utiliser arguments.callee à la place.

function box(num) {if (num <= 1) {return 1;
        } else {return num * arguments.callee(num-1);//使用 callee 来执行自身        }
    }

4 objet événement

reçoit directement l'objet événement, qui est W3C Cette approche n'est pas prise en charge par IE. IE définit lui-même un objet événement, qui peut être obtenu directement à partir de window.event.

input.onclick = function (evt) {var e = evt || window.event; //实现跨浏览器兼容获取 event 对象    alert(e);
};

5. La cible de l'événement

target dans le W3C et srcElement dans IE représentent tous deux Le cible de l’événement.

function getTarget(evt) {var e = evt || window.event;return e.target || e.srcElement; //兼容得到事件目标 DOM 对象}
document.onclick = function (evt) {var target = getTarget(evt);
    alert(target);
};

6.Empêcher les bulles d'événements

Empêcher les bulles Dans le processus, Le W3C et IE adoptent des méthodes différentes, il faut donc les rendre compatibles.

function stopPro(evt) {var e = evt || window.event;
    window.event ? e.cancelBubble = true : e.stopPropagation();
}

7. Bloquer le comportement par défaut de l'événement

function preDef(evt) {var e = evt || window.event;if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

8. Événement de menu contextuel : menu contextuel

Lorsque nous faisons un clic droit sur la page Web, le menu fourni avec Windows apparaîtra automatiquement. Ensuite, nous pouvons utiliser l'événement contextmenu pour modifier le menu que nous spécifions, mais uniquement si le comportement par défaut du clic droit est annulé.

function addEvent(obj, type, fn) { //添加事件兼容if (obj.addEventListener) {
        obj.addEventListener(type, fn);
    } else if (obj.attachEvent) {
        obj.attachEvent('on' + type, fn);
    }
}function removeEvent(obj, type, fn) { //移除事件兼容if (obj.removeEventListener) {
    ob    j.removeEventListener(type, fn);
    } else if (obj.detachEvent) {
        obj.detachEvent('on' + type, fn);
    }
}


addEvent(window, 'load', function () {var text = document.getElementById('text');
    addEvent(text, 'contextmenu', function (evt) {var e = evt || window.event;
        preDef(e);var menu = document.getElementById('menu');
        menu.style.left = e.clientX + 'px';
        menu.style.top = e.clientY + 'px';
        menu.style.visibility = 'visible';
        addEvent(document, 'click', function () {
            document.getElementById('myMenu').style.visibility = 'hidden';
        });
    });
});

Mode document dans 9.js - document.compatMode

Le mode document semble être rarement utilisé en développement. la chose la plus courante est d'obtenir la largeur et la hauteur de la page, telles que la largeur et la hauteur du document, la largeur et la hauteur de la zone visible, etc.

Le rendu du modèle de boîte par IE est très différent entre le mode Standards et le mode Quirks. L'interprétation du modèle de boîte en mode Standards est la même que celle des autres navigateurs standards, mais en mode Quirks, il y a. une grande différence de mode, et sans déclarer Doctype, IE par défaut est le mode Quirks. Ainsi, pour des raisons de compatibilité, nous devrons peut-être obtenir la méthode actuelle de rendu des documents.

document.compatMode est pratique, il a deux valeurs de retour possibles : BackCompat et CSS1Compat.

BackCompat : le mode de compatibilité standard est désactivé. La largeur de la zone client du navigateur est document.body.clientWidth;

CSS1Compat : le mode de compatibilité standard est activé. La largeur de la zone client du navigateur est document.documentElement.clientWidth.

Par exemple :

function getViewport(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}

10. Obtenez du style sur tous les navigateurs

function getStyle(element, attr) {if (typeof window.getComputedStyle != 'undefined') {//W3Creturn window.getComputedStyle(element, null)[attr];
    } else if (typeof element.currentStyle != 'undeinfed') {//IEreturn element.currentStyle[attr];
    }
}

11.js insère dynamiquement des feuilles de style, insertRule, addRule et des styles de suppression liés au CSS : deleteRule, removeRule

Les navigateurs standard prennent en charge insertRule et les versions inférieures d'IE prennent en charge addRule.

12.Obtenir la largeur et la hauteur de la page

window.innerWidth, window.innerHeight et document. documentElement.clientWidth , document.documentElement.clientHeight

Remarque : La largeur de la page obtenue avec jquery n'inclut pas la largeur de la barre de défilement

window.innerWidth et window.innerHeight (IE9 et supérieur, reconnu par Google, Firefox, la largeur et la hauteur incluent la largeur de la barre de défilement)

document.documentElement.clientWidth et document .documentElement.clientHeight (IE, Firefox, Google peuvent le reconnaître, la largeur et la hauteur n'incluent pas la largeur de la barre de défilement)

Si la page n'a pas de barres de défilement :

fenêtre .innerWidth==document.documentElement.clientWidth,

window .innerHeight==document.documentElement.clientHeight (IE8 et versions antérieures ne reconnaissent pas window.innerHeight et window.innerWidth)

//跨浏览器获取视口大小function getInner() {if (typeof window.innerWidth != 'undefined') { //IE8及以下undefinedreturn {
            width : window.innerWidth,
            height : window.innerHeight
        }
    } else {return {
            width : document.documentElement.clientWidth,
            height : document.documentElement.clientHeight
        }
    }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!