영어 원문: 눈에 거슬리지 않는 JavaScript의 7가지 규칙
원래 주소: http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/
원저자: Chris Heilmann
번역 주소: http://www.zhuoqun.net/html/y2008/1103.html
앞 글: 커준이 얼마 전 우리에게 JavaScript를 교육할 때 슬라이드에서 이 One 기사를 포함하여 많은 고전적인 기사를 추천했습니다. 읽고 나면 기분은 매우 좋지만, 기사 내용을 깊이 이해하지 못하는 경우가 많습니다. 마침 이 기사의 중국어 버전을 찾지 못해 번역해 보고자 하는 생각이 들었습니다. 그것을 공유하고 이해를 깊게 할 수 있다는 것입니다. 이 기사의 저자인 Chris Heilmann은 Yahoo!의 영국 엔지니어(Kejun에 따르면 "대부" 인물)이며, 이 기사의 번역도 그에 의해 승인되었습니다.
여기서 한 가지 더, 저는 이전에 많은 것을 번역했지만 그 당시에는 번역을 위해 더 많은 것을 번역했고 기술적인 기사를 많이 이해하지 못했기 때문에 지금까지 번역가로 일하고 있습니다. 앞으로도 일부 기사를 계속 번역할 예정이지만 주의 깊게 이해해야 할 고전 기사만 번역해야 합니다. 시간이 있다면 더 많은 코드를 작성하는 것이 좋습니다.
용어 번역: "Unobtrusive JavaScript"라는 용어와 관련해 특별히 적절한 번역이 생각나지 않습니다. 인터넷에서 검색한 결과 일부는 "low-key JavaScript"로 번역되고 일부는 "non-intrusive JavaScript"로 번역되고 일부는 대만에서 "no intrusive JavaScript"로 번역되는 것을 발견했습니다... 많은 연구 끝에, 나는 "no intrusive JavaScript"를 사용하기로 결정했습니다. 이 번역은 "obtrusive JavaScript"입니다(비록 여전히 나에게는 적합하지 않지만). 자세한 내용은 이 문서를 참조하세요. 실제로 "Unobtrusive JavaScript"에는 많은 의미가 담겨 있어 한 단어로 요약하기가 어렵습니다. 관심이 있으신 분은 Wikipedia에서 "Unobtrusive JavaScript"에 대한 설명을 살펴보시면 됩니다. 그리고 번역은 작가의 뜻을 표현하는 것이라고 생각하며 반드시 단어 그대로 번역할 필요는 없습니다. 따라서 독자의 이해를 돕기 위해 글에서 일부를 삭제하고 일부를 추가했는데, 이는 다음과 같습니다. 원문의 의미를 훼손하지 않고 기본적으로 수행됩니다.
또 한 가지 주의할 점은 제 번역 실력이 너무 아마추어여서 번역에 실수가 있을 수 있으니 정정해 주시기 바랍니다.
수년간 눈에 띄지 않는 JavaScript를 개발하고, 가르치고, 작성한 후에 저는 다음 지침을 발견했습니다. 이러한 방식으로 JavaScript를 설계하고 실행하는 것이 더 나은 이유를 이해하는 데 조금이나마 도움이 되기를 바랍니다. 이러한 규칙은 더 높은 품질과 유지 관리가 더 쉬운 제품을 더 빠르게 제공하는 데 도움이 되었습니다.
1. 어떤 가정도 하지 마십시오(JavaScript는 신뢰할 수 없는 보조자입니다).
아마도 눈에 거슬리지 않는 JavaScript의 가장 중요한 특징은 어떤 가정도 하지 말아야 한다는 것입니다.
JavaScript가 사용 가능하다고 가정하지 말고 가능하다고 생각하는 것이 좋습니다. 직접적으로 의존하기보다는 사용할 수 없습니다.
메서드와 속성을 테스트하고 작동하는지 확인할 때까지 브라우저가 메서드와 속성을 지원한다고 가정하지 마세요.
HTML 코드가 생각만큼 정확하다고 가정하지 말고, 매번 확인하고, 사용할 수 없는 경우에는 아무것도 하지 마십시오.
JavaScript 기능을 입력 장치와 독립적으로 만듭니다. 다른 스크립트가 JavaScript 기능에 영향을 미칠 수 있으므로 스크립트 범위를 최대한 안전하게 지정해야 합니다.
스크립트 디자인을 시작하기 전에 가장 먼저 고려해야 할 사항은 스크립트할 HTML 코드를 확인하고 목표 달성에 도움이 될 수 있는 것이 있는지 확인하는 것입니다.
2. 후크 및 노드 관계 찾기(HTML은 스크립팅의 초석입니다.)
스크립트 작성을 시작하기 전에 JavaScript를 작성하려는 HTML을 살펴보세요. HTML이 체계화되지 않았거나 알 수 없는 경우 좋은 스크립팅 솔루션을 갖는 것은 거의 불가능합니다. JavaScript에서 너무 많은 마크업을 생성하거나 응용 프로그램이 JavaScript에 너무 의존하게 될 가능성이 높습니다.
HTML에서 고려해야 할 몇 가지 사항이 있는데, 바로 후크와 노드 관계입니다.
<1>.HTML Hook
HTML의 원본이자 가장 중요한 Hook은 ID이며, ID는 가장 빠른 DOM 메소드인 getElementById를 통해 접근할 수 있습니다. 유효한 HTML 문서의 모든 ID가 고유한 경우(IE에는 이름과 ID에 관한 버그가 있지만 일부 좋은 라이브러리는 이 문제를 해결함) ID를 사용하는 것은 안전하고 안정적이며 테스트하기 쉽습니다.
다른 후크로는 HTML 요소가 있으며 HTML 요소는 getElementsByTagName 메서드를 통해 액세스할 수 있지만 CSS 클래스는 대부분의 브라우저에서 기본 DOM 메서드를 통해 액세스할 수 없습니다. 그러나 CSS 클래스 이름에 액세스할 수 있는 메서드를 제공하는 외부 클래스 라이브러리가 많이 있습니다(getElementsByClassName과 유사).
<2>.HTML 노드 관계
HTML의 또 다른 흥미로운 점은 태그 간의 관계입니다. 다음 질문에 대해 생각해 보십시오.
DOM 탐색을 최소화하면서 가장 쉽게 대상 노드에 도달할 수 있는 방법은 무엇입니까?
어떤 표시를 수정하면 수정이 필요한 최대한 많은 하위 노드에 액세스할 수 있습니까?
다른 요소에 접근하는 데 사용할 수 있는 특정 요소에는 어떤 속성이나 정보가 있습니까?
DOM을 탐색하는 것은 리소스 집약적이고 느리기 때문에 이를 수행하기 위해 브라우저에서 이미 사용되는 기술을 사용해야 합니다.
3. 탐색은 전문가에게 맡기십시오(CSS, DOM 탐색 속도 향상).
DOM을 스크립팅하고 메소드 또는 속성(getElementsByTagName, nextSibling, PreviousSibling, parentNode 및 기타)을 사용하여 DOM을 탐색하는 것은 많은 사람들을 혼란스럽게 합니다. . 흥미로운. 흥미로운 점은 우리가 이미 다른 기술인 CSS를 통해 이러한 작업을 수행했다는 것입니다.
CSS는 CSS 선택기를 사용하여 대상 요소에 액세스하고 DOM을 탐색하여 시각적 속성을 변경하는 기술입니다. DOM을 사용하는 복잡한 JavaScript 부분은 CSS 선택기로 대체될 수 있습니다.
var n = document.getElementById('nav');
만약(엔){
var as = n.getElementsByTagName('a');
if(as.length > 0){
for(var i=0;as[i];i++){
as[i].style.color = '#369′;
as[i].style.textDecoration = '없음';
}
}
}
/* 다음 코드는 위와 동일한 기능을 갖습니다.*/
#nav a{
색상:#369;
텍스트 장식:없음;
}
이것은 잘 활용될 수 있는 매우 강력한 기술입니다. DOM의 상위 수준 요소에 클래스를 동적으로 추가하거나 요소 ID를 변경하여 이를 달성할 수 있습니다. DOM을 사용하여 문서 본문에 CSS 클래스를 추가하면 디자이너는 문서의 정적 및 동적 버전을 쉽게 정의할 수 있습니다.
자바스크립트:
var DynamicClass = 'js';
var b = document.body;
b.className = b.className ? b.className + 'js' : 'js';
CSS:
/* 정적 버전*/
#nav {
....
}
/* 동적 버전*/
body.js #nav {
....
}
4. 브라우저와 사용자 이해(그리고 기존 사용 패턴을 기반으로 필요한 것을 구축)
눈에 띄지 않는 JavaScript의 큰 부분은 브라우저 작동 방식(특히 브라우저 충돌 방식)과 사용자가 기대하는 것을 이해하는 것입니다. 브라우저에 관계없이 JavaScript를 사용하면 완전히 다른 인터페이스를 쉽게 만들 수 있습니다. 드래그 앤 드롭 인터페이스, 접기 영역, 스크롤 막대 및 슬라이더는 모두 JavaScript를 사용하여 생성할 수 있지만 이 문제는 단순한 기술 문제가 아닙니다.
이 새로운 인터페이스가 입력 장치와 독립적일 수 있습니까? 그렇지 않다면 무엇을 의지할 수 있습니까?
내가 만드는 새 인터페이스는 브라우저나 기타 풍부한 인터페이스의 지침을 따르나요?(마우스로 직접 다단계 메뉴 사이를 전환할 수 있나요? 아니면 탭 키를 사용해야 하나요?)
JavaScript를 사용하여 어떤 기능을 제공해야 합니까?
마지막 질문은 필요한 경우 DOM을 사용하여 허공에서 HTML을 생성할 수 있기 때문에 실제로 문제가 되지 않습니다. 이에 대한 예로는 "인쇄" 링크가 있습니다. 브라우저는 문서를 인쇄하기 위한 비JavaScript 기능을 제공하지 않으므로 이러한 링크를 생성하려면 DOM을 사용해야 합니다. 확장 및 축소 콘텐츠 모듈을 구현하는 클릭 가능한 제목 표시줄의 경우에도 마찬가지입니다. 제목 표시줄은 키보드로 활성화할 수 없지만 링크는 활성화할 수 있습니다. 따라서 클릭 가능한 제목 표시줄을 만들려면 JavaScript를 사용하여 링크를 추가해야 하며, 그러면 키보드를 사용하는 모든 사용자가 콘텐츠 모듈을 접거나 확장할 수 있습니다.
이러한 유형의 문제를 해결하기 위한 훌륭한 리소스는 디자인 패턴 라이브러리입니다. 브라우저의 어떤 것이 입력 장치와 독립적인지 아는 것은 경험의 축적에 달려 있습니다. 가장 먼저 이해해야 할 것은 이벤트 처리 메커니즘입니다.
5. 이벤트 이해(이벤트 처리로 인해 변경 발생)
이벤트 처리는 눈에 거슬리지 않는 JavaScript를 향한 두 번째 단계입니다. 요점은 모든 것을 드래그하거나 클릭할 수 있게 만들거나 인라인 처리를 추가하는 것이 아니라 이벤트 처리가 완전히 분리될 수 있다는 것을 이해하는 것입니다. 우리는 HTML, CSS, JavaScript를 분리했지만 이벤트 처리를 분리하는 데에는 그리 많은 진전이 없었습니다.
이벤트 핸들러는 문서의 요소에서 발생하는 변경 사항을 모니터링합니다. 이벤트가 발생하면 핸들러는 멋진 개체(일반적으로 e라는 매개 변수)를 찾습니다. 이 개체는 요소에 발생한 일과 이를 통해 수행할 수 있는 작업을 알려줍니다. .
대부분의 이벤트 처리에서 정말 흥미로운 점은 액세스하려는 요소에서만 발생하는 것이 아니라 DOM의 상위 모든 요소에서 발생한다는 것입니다(그러나 모든 이벤트가 이와 같은 것은 아닙니다. 포커스 및 흐림 이벤트는 예외입니다). . 예를 들어 이 기능을 사용하면 탐색 목록에 하나의 이벤트 핸들러만 추가하고 이벤트 핸들러 메서드를 사용하여 실제로 이벤트를 트리거한 요소를 가져올 수 있습니다. 이 기술을 이벤트 위임이라고 하며 여러 가지 장점이 있습니다.
각 요소를 확인하는 대신 요소가 존재하는지 여부만 확인하면 됩니다. 해당 이벤트 핸들러를 제거하지 않고도 하위 노드를 동적으로 추가하거나 제거할 수 있습니다. 다른 요소에서 동일한 이벤트에 응답할 때 이벤트가 상위 요소로 전파되는 것을 중지하고 HTML 요소(예: 링크)의 기본 동작을 재정의할 수 있습니다. 그러나 때로는 브라우저가 HTML 요소에 이유가 있는 동작을 제공하기 때문에 이는 좋은 생각이 아닙니다. 예를 들어 링크는 페이지 내의 대상을 가리킬 수 있으며 링크를 수정하지 않은 채로 두면 사용자가 페이지의 현재 스크립트 상태를 북마크할 수도 있습니다.
6. 다른 것(네임스페이스, 범위 및 스키마)을 생각하십시오.
귀하의 코드가 문서의 유일한 스크립트 코드인 경우는 거의 없습니다. 따라서 코드에 다른 스크립트가 재정의할 수 있는 전역 함수나 전역 변수가 없는지 확인하는 것이 특히 중요합니다. 이 문제를 피하기 위해 사용할 수 있는 몇 가지 패턴이 있으며, 그 중 가장 기본적인 패턴은 var 키워드를 사용하여 모든 변수를 초기화하는 것입니다. 다음 스크립트를 작성한다고 가정해 보겠습니다.
var nav = document.getElementById('nav');
함수 초기화(){
// 작업을 수행
}
함수 표시(){
// 작업을 수행
}
함수 재설정(){
// 작업을 수행
}
위의 코드에는 nav라는 전역 변수와 init, show 및 Reset이라는 세 가지 함수가 포함되어 있습니다. 이러한 함수는 nav 변수에 액세스할 수 있으며 함수 이름을 통해 서로 액세스할 수 있습니다.
var nav = document.getElementById('nav');
함수 초기화(){
보여주다();
if(nav.className === '표시'){
다시 놓기();
}
// 작업을 수행
}
함수 표시(){
var c = nav.className;
// 작업을 수행
}
함수 재설정(){
// 작업을 수행
}
코드를 객체로 캡슐화하면 위의 전역 코딩을 피할 수 있습니다. 그러면 함수가 객체의 메서드로 바뀔 수 있고, 전역 변수가 객체의 속성으로 바뀔 수 있습니다. 메소드와 속성을 정의하려면 "이름 + 콜론" 방식을 사용해야 하며, 각 속성이나 메소드 뒤에는 구분 기호로 쉼표를 추가해야 합니다.
var myScript = {
nav:document.getElementById('nav'),
초기화:함수(){
// 작업을 수행
},
표시:함수(){
// 뭔가를 해라
},
재설정:함수(){
// 작업을 수행
}
}
모든 메서드와 속성은 "클래스 이름 + 도트 연산자"를 사용하여 외부 및 내부에서 액세스할 수 있습니다.
var myScript = {
nav:document.getElementById('nav'),
초기화:함수(){
myScript.show();
if(myScript.nav.className === '표시'){
myScript.reset();
}
// 작업을 수행
},
표시:함수(){
var c = myScript.nav.className;
// 작업을 수행
},
재설정:함수(){
// 작업을 수행
}
}
이 모델의 단점은 한 메소드에서 다른 메소드나 속성에 접근할 때마다 앞에 객체의 이름을 추가해야 하고, 객체에 있는 모든 것은 외부에서 접근이 가능하다는 것입니다. 문서의 다른 스크립트에서 일부 코드에 액세스할 수 있도록 하려면 다음 모듈 패턴을 고려하세요.
var myScript = 함수(){
//이것은 개인 메소드 및 속성입니다.
var nav = document.getElementById('nav');
함수 초기화(){
// 작업을 수행
}
함수 표시(){
// 작업을 수행
}
함수 재설정(){
// 작업을 수행
}
//공용 메서드와 속성은 개체 구문을 사용하여 return 문에 래핑됩니다.
반품 {
공개:함수(){
},
foo:'바'
}
}();
이전 코드(이 경우 myScript.public() 및 myScript.foo)와 동일한 방식으로 반환된 공용 속성 및 메서드에 액세스할 수 있습니다. 하지만 여기에는 또 다른 불편한 점이 있습니다. 외부에서 퍼블릭 메서드에 접근하거나 내부의 프라이빗 메서드에서 접근하려면 여전히 긴 이름을 작성해야 합니다(객체 이름이 매우 길 수 있음). 이를 방지하려면 이를 비공개로 정의하고 return 문에 별칭만 반환해야 합니다.
var myScript = 함수(){
// 이것은 비공개 메소드와 속성입니다.
var nav = document.getElementById('nav');
함수 초기화(){
// 뭔가를 해라
}
함수 표시(){
// 작업을 수행
// 작업을 수행
}
함수 재설정(){
// 뭔가를 해라
}
var foo = '바';
function public(){
}
//액세스하려는 비공개 메서드 및 속성에 대한 포인터만 반환합니다.
반품 {
공개:공개,
foo:foo
}
}();
이를 통해 일관된 코드 스타일이 보장되고 더 짧은 별칭을 사용하여 메서드나 속성에 액세스할 수 있습니다.
메서드나 속성을 외부에 노출하고 싶지 않다면 모든 코드를 익명 메서드로 캡슐화하고 정의 직후에 실행할 수 있습니다
.
// 이것들은 모두 비공개 메서드와 속성입니다.
var nav = document.getElementById('nav');
함수 초기화(){
// 뭔가를 해라
show(); // 여기에는 클래스 이름 접두사가 필요하지 않습니다.
}
함수 표시(){
// 뭔가를 해라
}
함수 재설정(){
// 뭔가를 해라
}
})();
이 패턴은 한 번만 실행되고 다른 기능에 종속되지 않는 코드 모듈에 적합합니다.
위의 규칙을 따르면 코드가 사용자에게 더 잘 작동하고 컴퓨터에서 더 잘 실행되며 다른 개발자의 코드와 더 잘 어울릴 것입니다. 그러나 고려해야 할 그룹이 하나 있습니다.
7. 코드를 맡을 개발자를 고려하세요. (유지 관리가 더 쉬워집니다.)
스크립트를 정말 눈에 띄지 않게 만드는 마지막 단계는 스크립트를 작성한 후 다시 확인하고, 코드가 작성된 후 코드를 이어받을 개발자를 돌보는 것입니다. 스크립트가 실행됩니다. 다음 질문을 생각해 보세요.
모든 변수 및 함수 이름이 합리적이고 이해하기 쉬운가요?
코드가 제대로 구성되어 있나요? 처음부터 끝까지 원활하게 흘러가나요?
모든 종속성이 명백합니까?
혼란을 야기할 수 있는 의견을 가능한 곳에 추가했습니까?
주목해야 할 가장 중요한 점은 문서의 HTML 및 CSS 코드가 JavaScript보다 변경될 가능성이 더 높다는 점입니다(시각적 효과를 담당하기 때문입니다). 따라서 스크립트 코드에서 최종 사용자가 볼 수 있는 클래스와 ID를 포함하지 말고 구성 정보를 보유하는 개체로 분리하세요.
myscript = 함수(){
var 구성 = {
네비게이션ID:'nav',
visibleClass:'표시'
};
var nav = document.getElementById(config.navigationID);
함수 초기화(){
보여주다();
if(nav.className === config.visibleClass){
다시 놓기();
};
// 뭔가를 해라
};
함수 표시(){
var c = nav.className;
// 뭔가를 해라
};
함수 재설정(){
// 뭔가를 해라
};
}();
이렇게 하면 관리자는 다른 코드를 변경하지 않고도 이러한 속성을 수정할 위치를 알 수 있습니다.
추가 정보
이것이 제가 발견한 7가지 지침입니다. 위에서 논의한 주제에 대해 자세히 알아보려면 다음 링크를 확인하세요.