웹 프론트엔드에서의 지식 공유

1. If 조건문 관련

if 문의 괄호 안의 표현식에 대해 ECMAScript는 자동으로 Boolean() 변환 함수를 호출하여 이 표현식의 결과를 부울 값으로 변환합니다. 값이 true이면 다음 명령문이 실행되고, 그렇지 않으면 실행되지 않습니다.

2.인수 관련

인수 개체의 길이 속성을 사용하여 매개변수가 몇 개인지 지능적으로 파악한 다음 매개변수를 합리적으로 적용합니다.

예를 들어, 전달된 모든 숫자를 누적하는 덧셈 연산을 구현하려고 하는데 숫자의 개수가 불확실합니다.

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.함수 내부 속성

함수 내부에는 두 가지 특수 개체인 인수와 this가 있습니다. 인수는 함수에 전달된 모든 매개변수를 포함하는 배열형 객체입니다. 주요 목적은 함수 매개변수를 저장하는 것입니다. 하지만 이 개체에는 인수 개체를 소유한 함수에 대한 포인터인 callee라는 속성도 있습니다.

재귀 알고리즘은 일반적으로 계승 함수에 사용되므로 함수는 내부적으로 자신을 호출해야 합니다. 함수 이름이 변경되지 않으면 문제가 없지만 일단 함수 이름이 변경되면 내부 자체 호출을 수정해야 합니다. 하나씩. 이 문제를 해결하기 위해 대신 arguments.callee를 사용할 수 있습니다.

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

4. event object

는 IE가 자체적으로 이벤트 개체를 정의하지 않는 이벤트 개체를 직접 가져옵니다. window.event에서.

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

5. 이벤트 대상

W3C의 대상과 IE의 srcElement는 모두 이벤트의 대상을 나타냅니다.

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.이벤트 버블링 방지

버블링을 방지하는 과정에서 W3C와 IE는 서로 다른 방식을 사용하므로 호환되도록 만들어야 합니다.

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

7. 차단 이벤트 기본 동작

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

8. 컨텍스트 메뉴 이벤트: contextmenu

웹 페이지를 마우스 오른쪽 버튼으로 클릭하면 창과 함께 제공되는 메뉴가 자동으로 나타납니다. 그런 다음 contextmenu 이벤트를 사용하여 지정한 메뉴를 수정할 수 있지만, 이는 마우스 오른쪽 버튼 클릭의 기본 동작이 취소된 경우에만 가능합니다.

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

9.js의 문서 모드 - document.compatMode

문서 모드는 개발에서 거의 사용되지 않는 것 같습니다. 문서 너비와 높이와 같은 페이지 너비와 높이를 가져올 때입니다. 가시 영역의 너비와 높이 등

표준 모드와 Quirks 모드의 IE 박스 모델 렌더링에는 큰 차이가 있습니다. 표준 모드의 박스 모델 해석은 다른 표준 브라우저의 해석과 동일하지만 Quirks 모드에서는 큰 차이가 있습니다. 차이점은 Doctype을 선언하지 않으면 IE는 기본적으로 Quirks 모드로 설정된다는 것입니다. 따라서 호환성상의 이유로 현재 문서 렌더링 방법을 가져와야 할 수도 있습니다.

document.compatMode는 유용하며 BackCompat 및 CSS1Compat이라는 두 가지 반환 값이 있습니다.

BackCompat: 표준 호환성 모드가 꺼졌습니다. 브라우저 클라이언트 영역의 너비는 document.body.clientWidth입니다.

CSS1Compat: 표준 호환 모드가 켜져 있습니다. 브라우저 클라이언트 영역 너비는 document.documentElement.clientWidth입니다.

예:

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. 여러 브라우저에서 스타일 가져오기

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는 CSS 관련 styleSheets, insertRule, addRule 및 스타일 삭제를 동적으로 삽입합니다. deleteRule, RemoveRule

Stand 아르드 브라우저는 insertRule을 지원하고, IE의 하위 버전은 addRule을 지원합니다.

12.페이지의 너비와 높이를 가져옵니다

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

참고: jquery를 사용하여 페이지 너비 페이지에 스크롤 막대 너비가 포함되지 않습니다

window.innerWidth 및 window.innerHeight(IE9 이상, Google, Firefox에서 인식, 너비와 높이에는 스크롤 막대 너비가 포함됨)

document.documentElement.clientWidth 및 document.documentElement.clientHeight(모두 IE, Firefox 및 Google에서 인식되며 너비와 높이는 스크롤 막대의 너비를 포함하지 않음)

페이지에 스크롤 막대가 없는 경우:

window.innerWidth==document.documentElement.clientWidth,

window.innerHeight==document.documentElement.clientHeight (IE8 이하는 window.innerHeight 및 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
        }
    }
}

위 내용은 웹 프론트엔드에서의 지식 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!