Wissensaustausch im Web-Frontend

1. Wenn sich die bedingte Anweisung auf

für den Ausdruck in den Klammern der if-Anweisung bezieht, ruft ECMAScript automatisch Boolean() Transformation Die Funktion wandelt das Ergebnis dieses Ausdrucks in einen booleschen Wert um. Wenn der Wert wahr ist, wird die folgende Anweisung ausgeführt, andernfalls wird sie nicht ausgeführt.

2. Argumente im Zusammenhang

Verwenden Sie das Längenattribut des Argumentobjekts, um intelligent zu bestimmen, wie viele Parameter vorhanden sind, und wenden Sie die Parameter dann sinnvoll an.

Zum Beispiel möchten Sie eine Additionsoperation implementieren, um alle übergebenen Zahlen zu akkumulieren, aber die Anzahl der Zahlen ist ungewiss.

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.

Funktionsinterne Attribute

Innerhalb der Funktion gibt es zwei spezielle Objekte: Argumente und This. arguments ist ein Array-ähnliches Objekt, das alle an die Funktion übergebenen Parameter enthält. Sein Hauptzweck besteht darin, Funktionsparameter zu speichern. Aber dieses Objekt hat auch eine Eigenschaft namens callee, die ein Zeiger auf die Funktion ist, die das Arguments-Objekt besitzt.

Für faktorielle Funktionen wird im Allgemeinen ein rekursiver Algorithmus verwendet. Wenn sich der Funktionsname also nicht ändert, ruft sich die Funktion intern auf Selbstaufrufe müssen einzeln geändert werden. Um dieses Problem zu lösen, können wir stattdessen

arguments.callee verwenden.

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

4 Ereignisobjekt

empfängt direkt das Ereignisobjekt, das ist W3C Dieser Ansatz wird vom IE nicht unterstützt. Der IE selbst definiert ein Ereignisobjekt, das direkt von window.event abgerufen werden kann.

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

5. Das Ziel des Ereignisses

target in W3C und srcElement im IE repräsentieren beide The Ziel der Veranstaltung.

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.Sprudeln des Ereignisses verhindern

Blasenbildung verhindern Dabei W3C und IE verwenden unterschiedliche Methoden, daher müssen wir sie kompatibel machen.

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

7. Standardverhalten von Ereignissen blockieren

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

8. Kontextmenü-Ereignis: Kontextmenü

Wenn wir mit der rechten Maustaste auf die Webseite klicken, wird automatisch das mit den Fenstern gelieferte Menü angezeigt. Dann können wir das Kontextmenü-Ereignis verwenden, um das von uns angegebene Menü zu ändern, jedoch nur, wenn das Standardverhalten des Rechtsklicks aufgehoben wird.

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';
        });
    });
});

Dokumentmodus in 9.js - document.compatMode

Der Dokumentmodus scheint in der Entwicklung selten verwendet zu werden Am häufigsten wird die Seitenbreite und -höhe ermittelt, z. B. die Breite und Höhe des Dokuments, die Breite und Höhe des sichtbaren Bereichs usw.

IEs Darstellung des Box-Modells unterscheidet sich stark zwischen dem Standardmodus und dem Quirks-Modus. Die Interpretation des Box-Modells im Standardmodus ist die gleiche wie bei anderen Standardbrowsern, im Quirks-Modus jedoch Ein großer Unterschied im Modus, und ohne die Angabe von Doctype verwendet der IE standardmäßig den Quirks-Modus. Aus Kompatibilitätsgründen müssen wir daher möglicherweise die aktuelle Dokumentrenderingmethode abrufen.

document.compatMode ist praktisch, es hat zwei mögliche Rückgabewerte:

BackCompat und CSS1Compat.

BackCompat: Der Standardkompatibilitätsmodus ist deaktiviert. Die Breite des Browser-Client-Bereichs beträgt document.body.clientWidth;

CSS1Compat: Der Standardkompatibilitätsmodus ist aktiviert. Die Breite des Browser-Clientbereichs beträgt document.documentElement.clientWidth.

Zum Beispiel:

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. Holen Sie sich Stil in allen Browsern

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 fügt dynamisch CSS-bezogene StyleSheets, insertRule, addRule und Löschstile ein: deleteRule, removeRule

Standardbrowser unterstützen insertRule und niedrigere Versionen von IE unterstützen addRule.

12.Ermitteln Sie die Breite und Höhe der Seite

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

Hinweis: Die mit jquery erhaltene Breite der Seite beinhaltet nicht die Breite der Bildlaufleiste

window.innerWidth und window.innerHeight (IE9 und höher, erkannt von Google, Firefox, Breite und Höhe umfassen die Breite der Bildlaufleiste)

document.documentElement.clientWidth und document .documentElement.clientHeight (IE, Firefox, Google können es erkennen, die Breite und Höhe beinhalten nicht die Breite der Bildlaufleiste)

Wenn die Seite keine Bildlaufleisten hat:

Fenster .innerWidth==document.documentElement.clientWidth,

window .innerHeight==document.documentElement.clientHeight (IE8 und niedriger erkennen window.innerHeight und window.innerWidth nicht)

//跨浏览器获取视口大小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
        }
    }
}

Das obige ist der detaillierte Inhalt vonWissensaustausch im Web-Frontend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!