다섯 가지 실용적인 고급 js 기술_javascript 기술

팁 1: setTimeout
적용 사례: 예를 들어 함수 루프를 10번 실행하려면 어떻게 해야 합니까? 예전에는 보통 setInterval을 먼저 수행하고 그 다음으로 ClearInterval을 사용했습니다. 문제

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

(function () {
var i = 0;
function job() {
console.log(i )
if (i < 10) {
setTimeout(job, 1000)
}
job();
})( ; >

코드 복사


코드는 다음과 같습니다.

(function () { var arr=[]; for(var i=arr.length;i--;){ doStuff(); }

})();

이 방법이 효율적인 이유는 무엇인가요?
1개: 매개변수 l=arr.length가 하나 없습니다.
2개: for의 중간에 있는 것입니다. 이전에는 for(i=0;i에서 결과를 true 또는 false와 비교합니다. 더 많은 계산
팁 3: 효율적인 할당
적용 사례: 전통적인 if 판단 할당을 버리세요

코드 복사


코드

var i=1,ret; ret=i! ==1||true; 위 코드는 ret이 true임을 마법처럼 알려줍니다. 이는 효율적이며 값을 할당한 후 if(i!==1)를 사용하지 않습니다.

스킬 4: 강력한 짧은 속성

적용 사례: setAttribute , getAttribute. 이 메소드는 표준 속성뿐만 아니라 임의 속성도 설정할 수 있으며

코드 복사


와 호환됩니다. 다음과 같습니다:

function attr(elem, name, value) { var ret if (value) { if (/msie [6-7].0 /i.test(navigator.userAgent)) { ret = elem.getAttributeNode(name); if (!ret) { //ie6 7 잘못된 속성 설정, 여기를 통해 설정할 수 있습니다

ret = document.createAttribute(name);

elem.setAttributeNode(ret);
}
ret.nodeValue = value "";
} else {
elem.setAttribute(이름, 값);
}
return elem;
} else { //ie6 7에는 얻기 어려운 속성이 있습니다.
ret = elem.getAttribute(name)
fixIe = elem.getAttributeNode(name) ).nodeValue; ret ? ret : fixIe ? fixIe : undefine;
return ret;
}


🎜>attr(document.getElementById("test"), "classxx", "xx")
alert(attr(document.getElementById( "test"),"classxx"))
팁 5: getElementsByClassName .
적용 사례: 과거에는 js에 프레임워크가 없었기 때문에 모두가 이 방법을 모방했습니다. 이제 어떻게 하면 js 초보자를 위한 고전적인 코드인지 살펴보겠습니다. 🎜>

코드 복사


코드는 다음과 같습니다.

(function () {
var getElementsByClassName=function(cls, context){
var root = context || document;
return document.querySelectorAll("." cls) : root.getElementsByClassName(cls) : help("* ", cls, context);
}

var help=function(tagName,cls,context){ var root= context || document, ret=[],elems,i, rcls=new RegExp("^|\s " cls "\s |$"); elems = root.getElementsByTagName(tagName || " *") for(i=elems.length; i--;){ if(rcls.test(elem[i].className)){

ret.push(elems[i] )

}
}
return ret ;
}
})();


위의 js 외설적인 기술은 다른 사람의 js 프레임워크를 사용할 필요가 없다면 매우 실용적입니다.
여전히 js 코드 매니아를 위한 원래 문장입니다. 잘 작성되었다고 생각하시면 좋아요를 누르거나 친구에게 링크를 보내주세요.