웹 애플리케이션에는 현재 많은 JavaScript 코드가 있으며, 우리는 항상 더 빠른 솔루션을 찾고 있습니다.
1. 이벤트 프록시를 사용하여 이벤트 모니터링을보다 효율적으로 만듭니다.
2. 우리는 기능 분해 기술을 사용하여 주어진 방법이 일정 기간 내에 호출되는 횟수를 제한합니다. 이벤트 기능의 고주파 트리거링을 방지하는 방법 (중국어 번역)을 참조하십시오.
3. 우리는 JavaScript 로더를 사용하여 실제로 필요한 리소스의 일부를로드합니다.
우리 페이지를 더 빠르고 효율적으로 만드는 또 다른 방법이 있습니다. 즉, DOM 요소를 지속적으로 쿼리하고 다양한 스타일을 적용하는 대신 JS를 통해 스타일 시트에 특정 스타일을 동적으로 추가하고 삭제하는 것입니다. 작동 방식은 다음과 같습니다.
스타일 시트를 얻으십시오
스타일 규칙을 추가하기 위해 모든 스타일 시트를 선택할 수 있습니다. 명확한 스타일 시트가있는 경우 HTML 페이지에서 <link> 또는 <style> 태그에 ID 속성을 추가 한 다음이 DOM 요소의 시트 속성을 통해 CSSSTYLESHEET 객체를 직접 가져올 수 있습니다. 스타일 시트는 다음과 같이 가로 질 수 있습니다.
코드 사본은 다음과 같습니다.
// 배열과 같은 (배열 같은) 스타일 목록 스타일리스트를 반환합니다
var sheets = document.stylesheets;
/*
반환 값은 다음과 유사합니다.
스타일 시트리스트
{
0 : CSSSTYLESHEET,
1 : CSSSTYLESHEET,
2 : CSSSTYLESHEET,
3 : CSSSTYLESHEET,
4 : CSSSTYLESHEET,
길이 : 5,
항목 : 기능
}
*/
// 미디어 속성을 무시하고 첫 번째 시트를 가져옵니다
var sheet = document.stylesheets [0];
특별한주의를 기울여야 할 것은 스타일 시트의 미디어 속성입니다. 화면에 표시하려면 인쇄 스타일 시트에 CSS 규칙을 추가해서는 안됩니다. CSSSTYLESHEET 객체의 속성 정보를 자세히 살펴볼 수 있습니다.
코드 사본은 다음과 같습니다.
// 콘솔은 첫 번째 스타일 시트의 정보를 출력합니다.
console.log (document.stylesheets [0]);
/*
반품 값 :
CSSSTYLESHEET
cssrules : cssrulelist [object]
비활성화 : 거짓
href : "http://davidwalsh.name/somesheet.css"
미디어 : Medialist [Object]
Ownernode : Link [Object]
OwnerRule : NULL
ParentStylesheet : NULL
규칙 : cssrulelist [object]
제목 : NULL
유형 : "Text/CSS"
*/
// 미디어 유형 가져 오기 (미디어 유형)
console.log (document.stylesheets [0] .media.mediatext)
/*
반환 값은 다음과 같습니다.
이 스타일에 적용되는 "All"또는 "Print"또는 기타 미디어
*/
모든 경우에, 당신은 확실히 스타일 시트를 통해 규칙을 추가 할 수있는 방법이 있습니다.
새 스타일 시트를 만듭니다
대부분의 경우,이를 수행하는 가장 좋은 방법은 이러한 동적 규칙을 저장하기위한 새로운 <style> 요소를 만드는 것일 수 있습니다. 이것은 또한 매우 간단합니다.
코드 사본은 다음과 같습니다.
var sheet = (function () {
// <style> 태그를 만듭니다
var style = document.createelement ( "스타일");
// 미디어 (/미디어 쿼리, 미디어 쿼리) 속성을 추가 할 수 있습니다.
// style.setAttribute ( "미디어", "화면")
// style.setAttribute ( "미디어", "만 화면 및 (max-width : 1024px)")
// WebKit Hack :(
style.appendChild (document.createtextNode ( ""));
// 페이지에 <style> 요소를 추가합니다
document.head.appendChild (스타일);
리턴 스타일. 시트;
}) ();
비극은 WebKit이 올바르게 생성하기 위해 약간의 해킹이 필요하지만이 시트에 대해서만 돌봐야한다는 것입니다.
규칙을 삽입하십시오
IE의 이전 버전에서는 스타일 시트의 InserTrule 방법을 사용할 수 없었지만 이제는 규칙 주입의 표준입니다. insertrule 메소드는 스타일 시트와 동일한 전체 CSS 규칙을 작성해야합니다.
코드 사본은 다음과 같습니다.
Sheet.insertrule ( "Header {float : 왼쪽; 불투명도 : 0.8;}", 1);
이 JavaScript API 방법은 약간 소박한 것처럼 보이지만 이와 같이 작동합니다. 두 번째 매개 변수 인덱스는 규칙에 삽입 될 위치 (인덱스)를 나타냅니다. 이것은 또한 동일한 규칙/코드를 삽입 할 수 있도록 매우 유용하여 후면 규칙을 적용 할 수 있습니다. 기본 인덱스는 -1이며 전체 세트의 끝을 나타냅니다. 추가/게으른 제어 규칙을 갖고 싶다면 색인 문제를 피하기 위해 특정 규칙에 중요한 태그를 추가 할 수도 있습니다.
규칙을 추가 - 비표준 addrule 방법
CSSSTYLESHEET 객체에는 CSS 규칙을 스타일 시트에 등록 할 수있는 AddRule 메소드가 있습니다. Addrule 메소드는 세 가지 매개 변수를 수락합니다. 첫 번째 매개 변수는 선택기이고, 두 번째 매개 변수는 CSS 규칙 코드이고, 세 번째는 0에서 시작하는 정수 인덱스이며, 스타일의 위치 (동일한 선택기)를 나타냅니다.
코드 사본은 다음과 같습니다.
sheet.addrule ( "#mylist li", "float : 왼쪽; 배경 : 빨간색! 중요;", 1);
Addrule 방법의 반환 값은 항상 -1 이므로이 값은 실질적인 의미가 없습니다.
이 접근법의 장점은 페이지에서 추가 된 요소가 자동으로 스타일을 적용한다는 것입니다. 즉, 특정 요소에 추가 할 필요가 없으며 대신 페이지에 직접 주입 할 필요가 있습니다. 물론 더 효율적입니다!
보안 애플리케이션 규칙
모든 브라우저가 InserTrule 메소드를 지원하는 것은 아니기 때문에 규칙 응용 프로그램을 처리하기 위해 래퍼 함수를 만드는 것이 가장 좋습니다. 다음은 빠른 방법입니다.
코드 사본은 다음과 같습니다.
함수 addcssrule (시트, 선택기, 규칙, 색인) {
if (sheet에서 "insertrule") {
sheet.insertrule (selector + "{" + rules + "}", index);
}
else if if ( "addrule"에서 시트) {
Sheet.Addrule (선택기, 규칙, 색인);
}
}
// 사용 방법
addcssrule (document.stylesheets [0], "헤더", "float : left");
이 도구 방법은 새로운 스타일 규칙이 추가되는 모든 사례를 다루어야합니다. 응용 프로그램의 오류에 대해 걱정이된다면 {} catch (e) {} 블록으로 메소드의 코드를 랩핑해야합니다.
미디어 쿼리 규칙을 삽입하십시오
미디어 쿼리 규칙을 추가하는 두 가지 방법이 있습니다. 첫 번째는 표준 insertrule 메소드를 사용하는 것입니다.
코드 사본은 다음과 같습니다.
Sheet.insertrule (
"@Media 전용 화면 및 (max-width : 1140px) {Header {display : none;}}"
);
물론, IE의 이전 버전은 InserTrule을 지원하지 않기 때문에 다른 방법은 스타일 요소를 작성하고 적절한 미디어 속성을 지정한 다음 새 스타일 시트에 스타일을 추가하는 것입니다. 이를 위해서는 여러 스타일의 요소를 사용해야 할 수도 있지만 쉽습니다. 객체를 만들고, 미디어 쿼리와 색인을 지정하고, 그런 식으로 만들 수 있습니다.
스타일 시트에 규칙을 동적으로 추가하는 것은 효율적인 방법이며 생각보다 쉬울 수 있습니다. 이 솔루션은 코드와 요소 처리 모두에서 구덩이에 떨어지지 않도록 다음 큰 응용 프로그램에서 사용해야 할 수도 있습니다.