동적 콘텐츠 생성을 통해 눈에 잘 띄지 않는 자바 스크립트를 구현하는 방법은 무엇입니까?

Question

동적으로 생성 된 많은 컨텐츠 (PHP로 개발)를 작성하고 jQuery를 사용하여 프로젝트에 유연성과 기능을 추가했습니다.

자바 스크립트를 눈에 잘 띄지 않게 추가하는 것이 어렵다는 것입니다. 예를 들면 다음과 같습니다.

각기 다른 기능을 가진 div 개의 임의의 숫자를 생성해야합니다. onClick. 내 div 요소의 onclick 속성을 사용하여 매개 변수가있는 JS 함수를 호출 할 수는 있지만 이는 단지 나쁜 해결책 일뿐입니다. 또한 내 for 루프에있는 각 div와 함께 일부 jQuery 코드를 생성 할 수 있지만 다시는이 코드가 전혀 눈에 거슬리지 않습니다.

이렇게 상황에서 어떤 해결책이 있습니까?

Answer 1

div의 유형을 정의하는 div에 항목을 추가 한 다음 jQuery를 사용하여 해당 div를 선택하고 비헤이비어를 추가해야합니다. 한 가지 옵션은 class 속성을 사용하는 것입니다. 물론 이것은 행동보다는 표현에 사용되어야합니다. 다른 방법으로 rel 속성이 있지만 일반적으로 각 동작마다 다른 CSS를 지정하기 때문에이 인스턴스에서는 class가 괜찮을 것입니다.

그래서 예를 들어, 당신이 원하는 가정 할 수 있습니다 짝수와 홀수 행동 : jQuery를에 다음

<div class="odd">...</div> 
<div class="even">...</div> 
<div class="odd">...</div> 
<div class="even">...</div> 

:

$(document).load(function() { 
$('.odd').click(function(el) { 
// do stuff 
}); 
$('.even').click(function(el) { 
// dostuff 
}); 
}); 

jQuery를 기반으로 어떤 CSS를 기반으로 찾을 수있는 매우 강력한 셀렉터 엔진을 가지고 선택기를 지원하고 일부 XPath와 자체 선택기도 지원합니다. 그들에 대해 알아보십시오! http://docs.jquery.com/Selectors

Answer 2

귀하의 질문에 대해 이야기하기가 어렵지만 다른 클릭 행동을 설정하기 위해 다른 jQuery 선택기를 사용할 수 있습니까?

<div class="section-1"> 
    <div></div> 
</div> 
<div class="section-2"> 
    <div></div> 
</div> 

이 아마도 당신이 jQuery를에 다음을 할 수있는 : 예를 들어, 다음이 있다고

$('.section-1 div').onclick(...one set of functionality...); 
$('.section-2 div').onclick(...another set of functionality...); 

기본적으로, 일어날 필요가 무엇 상황에 따라 결정한다. 또한 모든 div를 선택하고 일부 상위 또는 하위 요소를 테스트하여 얻을 수있는 기능을 결정할 수 있습니다.

좀 더 집중적 인 조언을 제공하기 위해 상황의 특성에 대해 더 자세히 알아야하지만 어쩌면 이것이 시작될 수 있습니다.

Answer 3

본인은 W3C 표준을 무시하고 그들에 부착 된 핸들러를 필요로하는 요소에 HTML-속성을 작성하는 것이 좋습니다 :

참고 :이 페이지의 렌더링을 중단하지 않습니다!

<ul> 
    <li handler="doAlertOne"></li> 
    <li handler="doAlertTwo"></li> 
    <li handler="doAlertThree"></li> 
</ul> 

몇 가지 기능을 선언 : 다음

function doAlertOne() { } 
function doAlertTwo() { } 
function doAlertThree() { } 

그리고 그렇게 같이 jQuery를 사용하여 :

$("ul li").each(function() 
{ 
    switch($(this).attr("handler")) 
    { 
     case "doAlertOne": 
      doAlertOne(); 
      break; 

     case ... etc. 
    } 
}); 

하는 것은 실용적합니다.

Answer 4

저는 JQuery에 대해 잘 모릅니다.하지만 DOJO 툴킷은 눈에 잘 띄지 않는 Javascript를 가능하게합니다.

여기 예를 살펴 :

데모는 동적으로 클래스를 기반으로 순수 HTML 테이블에 이벤트를 추가합니다.

또 다른 예는 여기에 설명 된 동작 기능입니다 : http://dojocampus.org/content/2008/03/26/cleaning-your-markup-with-dojobehavior/

Answer 5

난 당신이 "Event delegation"이라는 것을 사용하는 것이 좋습니다 것입니다. 이것이 작동하는 방식입니다.

따라서 영역을 업데이트하고 div를 말하며 이벤트를 눈에 띄지 않게 처리하려면 div에 이벤트 핸들러를 연결하십시오. 이렇게하기를 원하는 프레임 워크를 사용하십시오. 이벤트 첨부는 div를 업데이트했는지 여부에 관계없이 언제든지 발생할 수 있습니다.

이 div에 연결된 이벤트 처리기는 이벤트 개체를 인수 중 하나로 수신합니다. 이 이벤트 객체를 사용하여 이벤트를 트리거 한 요소를 파악할 수 있습니다. div를 여러 번 업데이트 할 수 있습니다. div의 하위 항목에 의해 생성 된 이벤트는 해당 div를 catch하고 처리 할 수있는 div에 맞춰집니다.

div 안에있는 여러 요소에 여러 핸들러를 연결하려는 경우 성능 최적화가 매우 중요합니다.