더 나은 성능을 위해 즉석에서 jQuery 플러그인을 첨부하십시오.

Question

최근 페이지에 많은 jQuery 색상 선택기 플러그인을 연결해야했습니다. 테두리, 음영, 그라디언트 등의 색상 입력을 사용하면 많은 색상 선택 항목이 빠르게 생성되었습니다. 이 도구는 50 개 이상의 요소에 대해 반복적으로로드되었으므로이 페이지는 500 개 이상의 색상 선택 도구를 인스턴스화합니다. 말할 필요도없이 브라우저가 큰 어려움을 겪었습니다.

그래서 처음에는 모든 입력에 하나의 색상 선택 도구 인스턴스를 공유하는 데 여러 가지 방법을 시도해 보았습니다. 그것은 저에게 그것을하는 가장 건강한 방법 일 것입니다. 그러나 프로젝트 상황은 그 일을하는 길을 찾는데 충분한 시간을 할애하지 못했기 때문에 대안적인 기술을 찾아야했습니다.

내가 한 기술에 대해 어떻게 생각하는지 듣고 싶습니다. 누군가가 문제를 발견한다면 어떻게해야할까요?

페이지가로드 될 때 플러그인의 모든 인스턴스를 첨부하는 대신 필요시 인스턴스를 필요할 때 첨부 할 수 있습니다.

어떻게 구현 했는가? 나는 일반적으로 같은 것을 할 것, 이러한 입력에 jQuery를 색상 선택기 플러그인을 할당, 그리고

<input class="color"> 

:

우선 나는이 같은 입력을 많이하고 많은 일부 HTML했다

jQuery(function($) { 
    $('input.color').myColorPicker(); 
}); 

그러나 그 결과 각 입력 요소에 대해 하나씩 즉시 인스턴스화되는 여러 색상 선택기 개체가 생성되며 입력 개체를 클릭 할 때 각 요소를 준비 할 수 있습니다. 일반적으로 정상적으로 작동하지만 요소가 많은 경우 브라우저가 응답하지 않을 수 있습니다.

대신, 사용자가 실제로 클릭하면 입력 도구에 색상 선택 도구를 첨부하는 방법은 다음과 같습니다.

jQuery(function($) { 

/* Color pickers*/ 
$('input.color').live('focus', function(event){ 

// attach a colorpicker on an as needed basis, 
// and only if it is not already attached 
if(!$(this).hasClass('haspicker')){ 
    $(this).myColorPicker().addClass('haspicker'); 
} 

});

페이지가로드 될 때 색상 선택기가 연결되지 않습니다. 사용자가 'color'클래스로 입력 필드를 클릭하면 먼저 포커스를 받고 피커 플러그인이 연결되고 후속 이중 바인딩을 방지하는 데 사용되는 ectra 클래스를 가져온 후 click 이벤트가 발생하고 색상 선택 도구가 나타납니다.

잘 작동하지만 좋은 실행인지 확실하지 않습니다. 또는이 접근법에 잠재적 인 문제가있을 수 있다고 생각하지 않습니다.

그래서 나는 당신이 생각하는 것을 듣고 싶습니다.

Answer 1

소리가 적당합니다. 또 다른 시도는 하나의 피커 인스턴스 onload를 가지고 포커스에 요소에 연결하는 것입니다 (사용자가 두 개의 병렬 피커를 필요로하지 않는다고 가정합니다).