Knowledge sharing on web front-end

1. If conditional statement related

For the expression in the brackets of the if statement, ECMAScript will automatically call Boolean() transformation The function converts the result of this expression into a Boolean value. If the value is true, the following statement is executed, otherwise it is not executed.

2. Arguments related

Use the length attribute of the arguments object to intelligently determine how many parameters there are, and then apply the parameters reasonably.

For example, to implement an addition operation, accumulate all the numbers passed in, but the number of numbers is uncertain.

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. Internal properties of function

Inside the function, there are two special objects: arguments and this. arguments is an array-like object that contains all parameters passed into the function. Its main purpose is to save function parameters. But this object also has a property called callee, which is a pointer to the function that owns the arguments object.

For factorial functions, recursive algorithms are generally used, so the function must call itself internally; if the function name does not change, there is no problem, but once the function name is changed, the internal self-calls need to be modified one by one. . To solve this problem, we can use arguments.callee instead.

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

4. event object

##It is W3C’s practice to directly receive the event object , IE does not support it. IE defines an event object by itself, which can be obtained directly from window.event.

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

5. The target of the event

target in W3C and srcElement in IE both represent the event's target Target.

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.Prevent event bubbling

In the process of preventing event bubbling , W3C and IE adopt different methods, then we must make compatibility.

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

7. Block event default behavior

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

8. Context menu event: contextmenu

When we right-click on the web page, the menu that comes with windows will automatically appear. Then we can use the contextmenu event to modify the menu we specify, but only if the default behavior of right-click is cancelled.

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

Document mode in 9.js-document.compatMode

Document mode seems to be rarely used in development. The most common one is when getting the page width and height, such as document width and height, visible area width and height, etc.

There is a big difference between IE's rendering of the box model in Standards Mode and Quirks Mode. The interpretation of the box model in Standards Mode is the same as that of other standard browsers, but in Quirks Mode There is a big difference in mode, and without declaring Doctype, IE defaults to Quirks Mode. So for compatibility reasons, we may need to obtain the current document rendering method.

document.compatMode comes in handy, it has two possible return values:

BackCompat and CSS1Compat.

BackCompat: Standard compatibility mode is turned off. The width of the browser client area is document.body.clientWidth;

CSS1Compat: Standards compatibility mode is turned on. The browser client area width is document.documentElement.clientWidth.

For example:

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. Get Style across browsers

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 dynamically inserts css-related styleSheets, insertRule, addRule, and delete styles: deleteRule, removeRule

## Standard browsers support insertRule, and lower versions of IE support addRule.

12.

Get the width and height of the page##window.innerWidth, window.innerHeight and document.documentElement.clientWidth , document.documentElement.clientHeight

Note: The width of the page obtained with jquery does not include the width of the scroll bar

window.innerWidth and window.innerHeight (IE9 and above, recognized by Google, Firefox, width and height include the width of the scroll bar)

document.documentElement.clientWidth and document.documentElement.clientHeight (IE, Firefox, Google can recognize it, the width and height do not include the width of the scroll bar)

If the page does not have a scroll bar:

window.innerWidth==document.documentElement.clientWidth,

window .innerHeight==document.documentElement.clientHeight (IE8 and below do not recognize window.innerHeight and 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
        }
    }
}

The above is the detailed content of Knowledge sharing on web front-end. For more information, please follow other related articles on the PHP Chinese website!