j회피해야 할 함정 쿼리

j회피해야 할 함정 쿼리

현재 이 질문은 Q&A 형식에 적합하지 않습니다.우리는 답변이 사실, 참고 자료 또는 전문지식에 의해 뒷받침되기를 기대하지만, 이 질문은 토론, 논쟁, 여론 조사 또는 연장된 토론을 요구할 것이다.이 질문이 개선되고 다시 열릴 수 있다고 생각되면헬프센터를 방문하여 안내를 받으십시오.

닫힘10년 전에요.

jQuery로 프로젝트를 시작합니다.

jQuery 프로젝트에서 어떤 함정/오류/착각/오류가 발생했습니까?

퍼포먼스 히트나 셀렉터를 로컬 변수에 할당하지 않고 과도하게 사용하고 있는 것을 알 수 없습니다.예를 들어 다음과 같습니다.

$('#button').click(function() {
    $('#label').method();
    $('#label').method2();
    $('#label').css('background-color', 'red');
});

대신:-

$('#button').click(function() {
    var $label = $('#label');
    $label.method();
    $label.method2();
    $label.css('background-color', 'red');
});

또는 체인을 사용하는 것이 좋습니다.-

$('#button').click(function() {
    $("#label").method().method2().css("background-color", "red"); 
});

콜 스택의 구조를 깨달았을 때, 이 순간은 계몽환적인 순간이었습니다.

편집: 코멘트에 제안을 포함했습니다.

콘텍스트의 사용 방법에 대해 설명합니다.보통 jQuery 셀렉터는 문서 전체를 검색합니다.

// This will search whole doc for elements with class myClass
$('.myClass');

그러나 컨텍스트 내에서 검색하면 작업 속도를 높일 수 있습니다.

var ct = $('#myContainer');
// This will search for elements with class myClass within the myContainer child elements
$('.myClass', ct);

다음과 같이 베어 클래스 셀렉터를 사용하지 마십시오.

$('.button').click(function() { /* do something */ });

그러면 "버튼" 클래스가 있는지 확인하기 위해 모든 요소를 볼 수 있습니다.

대신 다음과 같이 지원할 수 있습니다.

$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });

작년에 레베카 머피의 블로그에서 이걸 배웠어요

업데이트 - 이 답변은 2년 이상 전에 제공되었으며 현재 버전의 jQuery에 대해 올바르지 않습니다.댓글 중 하나는 이것을 증명하는 테스트를 포함하고 있습니다.이 답변 시점의 jQuery 버전을 포함하는 테스트 업데이트 버전도 있습니다.

익명 함수를 다시 사용할 수 있도록 분할해 보십시오.

//Avoid
$('#div').click( function(){
   //do something
});

//Do do
function divClickFn (){
   //do something    
}

$('#div').click( divClickFn );

• 문서 준비 상태를 악용하지 마십시오.
• 코드를 초기화할 때만 문서를 준비합니다.
• 기능을 재사용할 수 있도록 항상 문서 외부에서 추출하십시오.

doc ready 스테이트먼트에서 수백줄의 코드를 보았습니다.보기 흉하고, 읽기 어렵고, 유지보수가 불가능합니다.

중$.ajax서버에 대한 Ajax 요구에 대해 기능합니다.complete반응 데이터를 처리할 사건.이치노

complete하다, 사용하다success.

문서의 Ajax 이벤트를 참조하십시오.

콜백을 사용한 애니메이션 이벤트 "체인지"

클릭 후 사라지는 문단을 애니메이션으로 만들고 싶다고 가정합니다.그 후 DOM에서 요소를 삭제하려고 했습니다.단순히 방법을 연결할 수 있다고 생각할 수 있습니다.

$("p").click(function(e) {
  $(this).fadeOut("slow").remove();
});

이 예에서는 .fadeOut()이 완료되기 전에 .remove()가 호출되어 점진적인 페이딩 효과가 파괴되고 요소가 즉시 사라집니다.대신 앞의 명령어를 종료했을 때만 명령어를 기동하는 경우는, 다음의 콜백을 사용합니다.

$("p").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

.fadeOut()의 두 번째 파라미터는 .fadeOut() 애니메이션이 완료되면 실행되는 익명 함수입니다.이로 인해 점차 희미해지고 그 후 요소가 제거됩니다.

같은 이벤트를 여러 번 바인드()하면 여러 번 실행됩니다.는 항상 가거든요.unbind('click').bind('click')을 위해

플러그 인을 남용하지 마세요.

대부분의 경우 라이브러리와 사용자 인터페이스만 필요할 수 있습니다.단순하게 하면 장기적으로 코드를 유지할 수 있습니다.모든 플러그인이 지원 및 유지 보수되는 것은 아닙니다.실제로 대부분의 플러그인은 지원되지 않습니다.핵심 요소를 사용하여 기능을 모방할 수 있다면 강력 추천합니다.

플러그인은 코드에 삽입하기 쉬우므로 시간을 절약할 수 있지만, 추가 작업이 필요할 경우 업데이트를 손실할 수 있으므로 수정하는 것은 좋지 않습니다.처음에 절약하는 시간은 나중에 사용되지 않는 플러그인을 변경할 때 느슨해집니다.

사용할 플러그인을 현명하게 선택하십시오.라이브러리와 사용자 인터페이스 외에 $.cookie, $.form, $.validate 및 thickbox를 항상 사용합니다.나머지는 주로 자체 플러그인을 개발합니다.

Pitfall: 실렉터 대신 루프를 사용합니다.

JQuery '.each' 메서드를 사용하여 DOM 요소를 반복할 경우, 에서 선택기를 사용하여 요소를 가져올 수 있는지 자문해 보십시오.

에 대한 내용은 jQuery를 하십시오.
http://docs.jquery.com/Selectorshttpdocs.jquery.com/

함정: Firebug와 같은 도구를 사용하지 않음

Firebug는 사실상 이런 종류의 디버깅을 위해 만들어졌습니다.Javascript로 DOM을 만지작거리려면 가시성을 제공하는 Firebug와 같은 좋은 툴이 필요합니다.

Firebug에 대한 자세한 내용은http://http://getfirebug.com/ 를 참조해 주세요.

다른 훌륭한 아이디어는 이번 Polymorphic Podcast 에피소드에 있습니다. (jQuery Secrets with Dave Ward) http://polymorphicpodcast.com/shows/jquery/

올바른 컨텍스트에서 이 식별자를 사용하는 것에 대한 오해.예:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   $(".listOfElements").each( function()
   {
      $(this).someMethod( ); // here 'this' is not referring first_element anymore.
   })
});

이 문제를 해결하는 방법의 예를 다음에 제시하겠습니다.

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   var $that = this;
   $(".listOfElements").each( function()
   {
      $that.someMethod( ); // here 'that' is referring to first_element still.
   })
});

DOM 전체를 여러 번 검색하지 않도록 합니다.이것은 정말로 당신의 대본을 지연시킬 수 있는 것입니다.

불량:

$(".aclass").this();
$(".aclass").that();
...

양호:

$(".aclass").this().that();

불량:

$("#form .text").this();
$("#form .int").that();
$("#form .choice").method();

양호:

$("#form")
    .find(".text").this().end()
    .find(".int").that().end()
    .find(".choice").method();

특히 .each()의 의미 있는 변수에 항상 $(이)를 캐시합니다.

이것처럼.

$(selector).each(function () {
    var eachOf_X_loop = $(this); 
})

Repo Man이 말한 것과 비슷하지만, 완전히는 아니다.

ASP를 개발할 때NET winforms, 자주 하는 일

$('<%= Label1.ClientID %>');

# 기호를 잊어버렸습니다.올바른 형식은

$('#<%= Label1.ClientID %>');

이벤트

$("selector").html($("another-selector").html());

이벤트를 복제하지 않습니다.모든 이벤트를 다시 바인드해야 합니다.

JP의 코멘트에 따르면 true를 통과하면 clone()은 이벤트를 재바인드합니다.

동일한 jQuery 개체를 여러 개 생성하지 않음

//Avoid
function someFunc(){
   $(this).fadeIn();
   $(this).fadeIn();
}

//Cache the obj
function someFunc(){
   var $this = $(this).fadeIn();
   $this.fadeIn();
}

JavaScript에서도 이 말을 하고 있습니다만, jQuery, JavaScript는 CSS를 대체해서는 안 됩니다.

또한 JavaScript가 꺼진 사용자가 사이트를 사용할 수 있는지 확인하십시오(예전처럼 현재는 관련이 없지만 항상 사용 가능한 사이트가 있으면 좋습니다).

DOM 조작이 너무 많습니다..html(), .append(), .prepend() 등의 메서드는 좋지만 브라우저의 페이지 렌더링 및 재렌더 방식 때문에 너무 자주 사용하면 속도가 느려집니다.html을 문자열로 작성하여 DOM을 여러 번 변경하는 것보다 DOM에 한 번 포함하는 것이 좋습니다.

대신:

var $parent = $('#parent');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $parent.append($div);
}

이것을 시험해 보세요.

var $parent = $('#parent');
var iterations = 10;
var html = '';

for (var i = 0; i < iterations; i++){
    html += '<div class="foo-' + i + '"></div>';
}

$parent.append(html);

또는 이 ($wrapper)도 아직 DOM에 주입되지 않은 새로 생성된 요소입니다.이 래퍼 div에 노드를 추가해도 속도가 느려지지 않습니다.마지막으로 $wrapper를 $parent에 추가합니다(DOM 조작은 1개만 사용).

var $parent = $('#parent');
var $wrapper = $('<div class="wrapper" />');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $wrapper.append($div);
}

$parent.append($wrapper);

클라이언트 사용ASP에서 컨트롤의 "실제" ID를 가져오는 ID입니다.NET 프로젝트

jQuery('#<%=myLabel.ClientID%>');

또한 SharePoint 내에서 jQuery를 사용하는 경우 jQuery.noConflict()를 호출해야 합니다.

jQuery 개체 대신 ID를 함수에 전달:

myFunc = function(id) { // wrong!
    var selector = $("#" + id);
    selector.doStuff();
}

myFunc("someId");

포장된 세트를 전달하는 것이 훨씬 더 유연합니다.

myFunc = function(elements) {
    elements.doStuff();
}

myFunc($("#someId")); // or myFunc($(".someClass")); etc.

체인의 과도한 사용.

다음을 참조하십시오.

this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true);

설명.

문자열 누적기 스타일 사용

+ 연산자를 사용하면 메모리에 새 문자열이 생성되고 연결된 값이 할당됩니다.그 후에야 결과가 변수에 할당됩니다.연결 결과에 대한 중간 변수를 피하기 위해 += 연산자를 사용하여 결과를 직접 할당할 수 있습니다.저속:

a += 'x' + 'y';

고속화:

a += 'x';
a += 'y';

기본 조작은 함수 호출보다 빠를 수 있습니다.

퍼포먼스 크리티컬루프 및 함수에서 함수 호출에 대해 대체 프리미티브 연산을 사용하는 것을 검토해 주십시오.저속:

var min = Math.min(a, b);
arr.push(val);

고속화:

var min = a < b ? a : b;
arr[arr.length] = val;

JavaScript 퍼포먼스 베스트 프랙티스의 자세한 내용은 이쪽

사용자가 브라우저에서 html 엔티티를 볼 수 있도록 하려면 'text' 대신 'html'을 사용하여 다음과 같은 유니코드 문자열을 삽입합니다.

$('p').html("Your Unicode string")

내 의견)

일반적으로 jquery를 사용하여 작업하면 항상 실제 DOM 요소에 대해 걱정할 필요가 없습니다.이렇게 쓸 수 있어요.$('div.mine').addClass('someClass').bind('click', function(){alert('lalala')})- 이 코드는 오류 발생 없이 실행됩니다.

경우에 따라서는 전혀 도움이 되지 않는 경우도 있지만, jquery는 빈 매치 친화적인 경향이 있습니다.아직,replaceWith문서에 속하지 않는 요소와 함께 사용하려고 하면 오류가 발생합니다.직관에 어긋난다고 생각합니다.

또 다른 함정은 prevAll() 메서드에 의해 반환되는 노드의 순서입니다.$('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll()사실 별거 아니지만, 이 사실을 명심해야 합니다.

예를 들어, 20개의 컬럼이 있는 테이블의 1500줄 정도의 많은 데이터를 Ajax할 계획이라면 jQuery를 사용하여 HTML에 데이터를 삽입할 생각은 하지 마십시오. 플레인 JavaScript를 사용하십시오.jQuery가 느린 시스템에서는 속도가 너무 느립니다.

또한 jQuery는 수신 HTML에서 스크립트 태그를 해석하고 브라우저의 기호에 대처하는 등 속도가 느려지는 작업을 절반 정도 수행합니다.빠른 삽입 속도를 원한다면 플레인 JavaScript를 사용합니다.

작은 프로젝트에서 jQuery를 사용하여 일반 JavaScript 몇 줄만으로 완료할 수 있습니다.

이벤트 바인딩을 이해하지 못했습니다.JavaScript와 jQuery는 다르게 동작합니다.

일반적인 수요로는 다음과 같은 예를 들 수 있습니다.

jQuery의 경우:

$("#someLink").click(function(){//do something});

jQuery 사용 안 함:

<a id="someLink" href="page.html" onClick="SomeClickFunction(this)">Link</a>
<script type="text/javascript">
SomeClickFunction(item){
    //do something
}
</script>

기본적으로 JavaScript에 필요한 후크는 더 이상 필요하지 않습니다.즉, 인라인 마크업(onClick 등)을 사용합니다.이는 개발자가 보통 CSS 목적으로 활용할 수 있는 ID 및 클래스를 단순하게 사용할 수 있기 때문입니다.

언급URL : https://stackoverflow.com/questions/1229259/jquery-pitfalls-to-avoid