눈에 띄지 않는 JavaScript_javascript 기술을 위한 7가지 원칙 모음

스크립트 디자인을 시작하기 전에 가장 먼저 고려해야 할 사항은 스크립트하려는 HTML 코드를 확인하고 목표 달성에 도움이 될 수 있는 것이 있는지 확인하는 것입니다.

1. 어떤 가정도 하지 마세요
(JavaScript는 신뢰할 수 없는 보조자입니다)
아마도 눈에 거슬리지 않는 JavaScript의 가장 중요한 특징은 - 어떤 가정도 멈춰야 한다는 것입니다. :
* JavaScript를 사용할 수 있다고 가정하지 마십시오. JavaScript에 직접 의존하기보다는 사용할 수 없을 가능성이 높다고 가정하는 것이 좋습니다.
* 테스트하고 작동하는지 확인할 때까지 브라우저가 메서드와 속성을 지원한다고 가정하지 마세요.
* HTML 코드가 생각만큼 정확하다고 가정하지 말고, 매번 확인하고, 사용할 수 없으면 아무것도 하지 마세요.
* JavaScript 기능을 입력 장치와 독립적으로 만듭니다.
* 다른 스크립트가 JavaScript 기능에 영향을 미칠 수 있으므로 스크립트 범위가 최대한 안전한지 확인하세요.
스크립트 디자인을 시작하기 전에 가장 먼저 고려해야 할 사항은 스크립트할 HTML 코드를 확인하고 목표 달성에 도움이 될 수 있는 것이 있는지 확인하는 것입니다.
2. 후크 및 노드 관계 찾기
(HTML은 스크립팅의 초석입니다)
스크립트 작성을 시작하기 전에 JavaScript를 작성하려는 HTML을 살펴보세요. HTML이 체계화되지 않았거나 알 수 없는 경우 좋은 스크립팅 솔루션을 갖는 것은 거의 불가능합니다. JavaScript에서 너무 많은 마크업을 생성하거나 응용 프로그램이 JavaScript에 너무 의존하게 될 가능성이 높습니다.
HTML에서 고려해야 할 사항이 있는데 바로 후크와 노드 관계입니다.
.HTML Hook
HTML의 원래이자 가장 중요한 Hook은 ID이며, ID는 가장 빠른 DOM 메소드인 getElementById를 통해 액세스할 수 있습니다. 유효한 HTML 문서의 모든 ID가 고유한 경우(IE에는 이름과 ID에 관한 버그가 있지만 일부 좋은 라이브러리는 이 문제를 해결함) ID를 사용하는 것은 안전하고 안정적이며 테스트하기 쉽습니다.
다른 후크로는 HTML 요소가 있으며 CSS 클래스는 getElementsByTagName 메소드를 통해 액세스할 수 있지만 CSS 클래스는 대부분의 브라우저에서 기본 DOM 메소드를 통해 액세스할 수 없습니다. 그러나 CSS 클래스 이름에 액세스하기 위한 메서드를 제공하는 외부 라이브러리가 많이 있습니다(getElementsByClassName과 유사).
.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');
if(n){
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 = 'none'; }
}
}
/* 다음 코드는 위와 동일한 기능을 갖습니다.*/
#nav a{
color:#369
text-꾸밈:none;
}

이것은 잘 활용될 수 있는 매우 강력한 기술입니다. DOM의 상위 수준 요소에 클래스를 동적으로 추가하거나 요소 ID를 변경하여 이를 달성할 수 있습니다. DOM을 사용하여 문서 본문에 CSS 클래스를 추가하면 디자이너는 문서의 정적 및 동적 버전을 쉽게 정의할 수 있습니다.
JavaScript:

코드 복사 코드는 다음과 같습니다.

vardynamicClass = 'js'; 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') ;
함수 초기화(){
// 작업 수행
}
함수 표시(){
// 작업 수행
}
함수 재설정(){
// do stuff
}

위 코드에는 nav라는 ​​전역 변수와 init, show 및 Reset이라는 세 가지 함수가 포함되어 있습니다. 이들 함수는 nav 변수에 접근할 수 있으며 함수 이름을 통해 서로 접근할 수 있습니다:

코드 복사 코드는 다음과 같습니다:

var nav = document .getElementById('nav');
function init(){
show()
if(nav.className === 'show'){
reset(); 🎜>}
//
}
함수 show(){
var c = nav.className
// 작업 수행
}
함수 재설정(){
// 작업
}

위의 전역 코딩을 피하기 위해 코드를 객체로 캡슐화하면 함수가 객체에서 메소드로, 전역 변수가 객체에서 속성으로 바뀔 수 있습니다. 메서드와 속성을 정의하려면 "이름 콜론" 메서드를 사용해야 하며, 각 속성이나 메서드 뒤에 구분 기호로 쉼표를 추가해야 합니다.

코드 복사 코드는 다음과 같습니다.

var myScript = {
nav:document.getElementById('nav'),
init:function(){
// 작업 수행
},
show:function(){
// 작업 수행
},
reset:function() {
// do stuff
}
}

모든 메서드와 속성은 "클래스 이름 도트 연산자"를 사용하여 외부 및 내부에서 사용 가능 .

코드 복사 코드는 다음과 같습니다.

var myScript = {
nav:document.getElementById('nav'),
init:function(){
myScript.show();
if(myScript.nav.className === 'show'){
myScript.reset()}
/ / 작업 수행
},
show:function(){
var c = myScript.nav.className
// 작업 수행
},
reset:function (){
// 작업 수행
}
}

이 패턴의 단점은 한 메서드에서 다른 메서드나 속성에 액세스할 때마다 반드시 앞에 와야 합니다. 객체의 이름을 추가해야 객체의 모든 내용을 외부에서 접근할 수 있습니다. 코드의 일부만 문서의 다른 스크립트에서 액세스할 수 있도록 하려면 다음 모듈 패턴을 고려하세요.

코드 복사 코드는 다음과 같습니다.

var myScript = function(){
//개인 메서드 및 속성입니다.
var nav = document.getElementById('nav')
function init(){
// 작업 수행
}
function show(){
// 작업 수행
}
function Reset(){
// 작업 수행
}
/ /공용 메서드 및 속성은 객체 구문
return {
public:function(){
},
foo:'bar'
}
}( );

이 예에서는 myScript.public() 및 myScript foo와 같이 이전 코드와 동일한 방식으로 반환된 공용 속성 및 메서드에 액세스할 수 있습니다. 하지만 여기에는 또 다른 불편한 점이 있습니다. 외부에서 퍼블릭 메서드에 접근하거나 내부의 프라이빗 메서드에서 접근하려면 여전히 긴 이름을 작성해야 합니다(객체 이름이 매우 길 수 있음). 이를 방지하려면 이를 비공개로 정의하고 return 문에 별칭만 반환해야 합니다.

코드 복사 코드는 다음과 같습니다.

var myScript = function(){
// 이는 비공개 메서드 및 속성입니다.
var nav = document.getElementById('nav')
function init(){
// do stuff
}
function show(){
// do stuff
// do stuff
}
function Reset(){
// do stuff
}
var foo = 'bar';
function public(){
}
return {
public:public,
foo:foo
}
}() ;

이렇게 하면 코드 스타일 일관성이 보장되며 더 짧은 별칭을 사용하여 메서드나 속성에 액세스할 수 있습니다.
어떤 메소드나 속성도 외부 세계에 노출하고 싶지 않다면 모든 코드를 익명 메소드로 캡슐화하고 정의 직후에 실행할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

(function(){
// 모두 비공개 메서드 및 속성입니다.
var nav = document.getElementById('nav' );
function init(){
// 작업 수행
show(); // 여기에는 클래스 이름 접두사가 필요하지 않습니다.
}
function show(){
// do 물건
}
함수 재설정(){
// 작업 수행
}
})()

이 패턴은 한 번만 실행되고 다른 기능에 종속되지 않는 코드 모듈에 적합합니다.
위의 규칙을 따르면 코드가 사용자에게 더 잘 작동할 뿐만 아니라 컴퓨터에서 코드가 더 잘 실행되고 다른 개발자의 코드와 더 잘 어울리게 됩니다. 그러나 고려해야 할 그룹이 하나 있습니다.
7. 인계받는 개발자를 고려하세요
(유지관리가 더 쉬워집니다)
스크립트를 눈에 띄지 않게 만드는 마지막 단계는 스크립트를 작성한 후 다시 확인하는 것입니다. 스크립트가 실행되면 코드를 인계받을 개발자를 돌보세요. 다음 질문을 고려해보세요.
* 모든 변수 및 함수 이름이 합리적이고 이해하기 쉬운가요?
* 코드가 잘 정리되어 있나요? 처음부터 끝까지 원활하게 흘러가나요?
* 모든 종속성이 명백합니까?
* 혼란을 야기할 수 있는 의견을 가능한 곳에 추가했습니까?
가장 중요한 점은 문서의 HTML 및 CSS 코드가 JavaScript보다 변경될 가능성이 더 높다는 것입니다(시각적 효과를 담당하기 때문입니다). 따라서 스크립트 코드에서 최종 사용자가 볼 수 있는 클래스와 ID를 포함하지 말고 구성 정보를 보유하는 개체로 분리하세요.

코드 복사 코드는 다음과 같습니다.

myscript = function(){
var config = {
navigationID: 'nav' ,
visibleClass:'show'
};
var nav = document.getElementById(config.navigationID)
function init(){
show(); if(nav .className === config.visibleClass){
reset();
}// 작업 수행
}; = nav.className
// 작업
}
function 재설정(){
// 작업
}();

이렇게 하면 관리자는 다른 코드를 변경하지 않고도 이러한 속성을 수정할 위치를 알 수 있습니다.