2010-01-01 3 views
3

jQuery를 좋아하지만 더 큰 사이트 및 여러 페이지에서 문제가 발생합니다. 내 문제는 각 페이지마다 고유 한 요구 사항이 있으며 jQuery에게 특정 페이지를 활성화하는 데 가장 좋은 방법을 알 필요가 있다는 것입니다. 예를 들어, 일부 양식은 Validator plug-in이 필요하고 일부는 사용하지 않으며 일부 테이블은 DataTables plug-in을 사용하고 일부는 사용하지 않습니다.여러 페이지에 눈에 잘 띄지 않는 JavaScript를 구성하는 가장 좋은 방법은 무엇입니까?

이제는 다른 로직을 실행하는 응용 프로그램 JavaScript 파일에 복잡한 논리 (switch 문)를 작성할 수 있습니다. 그들이 어떤 페이지에 있느냐에 따라 행동하지만, 그것은 냄새 나는 것처럼 보입니다. 모범 사례는 무엇입니까?

업데이트 :이 질문에 대해서는 많은 좋은 아이디어가 있지만 꼭 필요한 것은 아닙니다. 질문을 좀 더 일반적인 방식으로 다시 말해 보겠습니다.

현재 레일스와 프로토 타입 헬퍼를 사용하여 AJAX 구성 요소를 작성하고 있지만 UJS로 이동하려고합니다. jQuery에 어떤 링크/버튼이 AJAX를 만들고 피해야하는지 어떻게 알 수 있습니까? 그리고 AJAX가 있어야한다고 가정하면 각 헬퍼와 마찬가지로 각 링크에 메서드, 업데이트 등의 매개 변수를 어떻게 제공합니까?

각 개별 링크/버튼을 대상으로하는 특정 jQuery 선택기의 거대한 페이지를 만드는 것 외에도 말입니다. :)

답변

1

좋은 연습을 하나 개의 파일에 모든 페이지에 필요한 코드를 가지고 특정 자바 스크립트 파일을 가지고하는 것입니다 특정 기능이 필요한 페이지의 경우 이것은 마치 여러분이 어쨌든하고있는 것처럼 들리므로 우리는 구축 할 수있는 좋은 기반을 가지고 있습니다.

어떤 페이지에서 어떤 파일이 필요한지 빌드 할 수있는 방법은 많이 있지만 일반적인 상황에서는 자바 스크립트 파일이 브라우저에서 캐시되어 한 번만 다운로드하면됩니다. 이 댓글

예,하지만 같은 DOM 요소와 여러 페이지가있는 경우에 비추어

? 예를 들어, 내 validator() 플러그인은 $ ('form')처럼 으로 설정되어 있습니다. validate()가 있지만 페이지의 일부 양식이 인 경우에만 에서 작동하지 않을 수도 있습니다. . 이 경우 어떻게해야합니까?

특정 jQuery 플러그인을 첨부해야하는 페이지에 공통된 요소에 레이블을 붙이는 규칙을 제안합니다.예를 들어 validator() 플러그인이 필요한 여러 페이지에 <form> 요소가 있지만 특정 페이지에 두 개 이상의 <form> 요소가있는 경우 (<form> 요소 모두에 validator() 플러그인이 있어야 함) CSS 클래스를 사용하여 플러그인이 필요한 요소 인 <form>을 구별합니다.

<!-- HTML --> 

<!-- need to apply plugin to this -->  
<form class="validator"> ... </form> 

<!-- but not to this --> 
<form> ... </form> 

<script type="text/javascript"> 
// jQuery Code (in a separate file) 

$(function() { 
    $('form.validator').validator(); 
}); 
</script> 

그 방법은, 플러그인은 셀렉터 일치 <form> 그 요소에 적용한다.

편집 :

내가 레일의 도우미가 어떻게 작동하는지 모르겠지만, 당신이 직접이 아닌 모든 데이터에 대한 bind() 방법의 data 매개 변수를 사용하여 jQuery를에 이벤트 핸들러에 데이터를 전달할 수 있습니다 <a> 요소 자체의 일부 (예 : href과 같은 속성). 링크 중 일부가 AJAX를 필요로하는 경우 CSS 클래스로 라벨을 지정하고 해당 요소의 href에 URL을 저장하는 것이 좋습니다. 그리고 AJAX를 통해 요청을 링크가있는 페이지에서 사용 할 수있는 jQuery 코드에서 해당 링크는 사용자가 자바 스크립트를 사용할 수있는 일반 링크에 따라 작동합니다

<a class="ajax-link" href="/get/someData.php">Data retrieved through AJAX</a> 

<a href="/normalLink.php">Standard link with no AJAX</a> 

<script type="text/javascript"> 
$('a.ajax-link').bind('click',ajaxRequest); 

function ajaxRequest(e) { 
    e.preventDefault(); 
    $.get(e.target.href, function(data) { 
     $('#loadDiv').html(data); 
    }); 
} 
</script> 

같은 작업을 수행 할 수도 있지만 JavaScript가 활성화되면 데이터에 대한 AJAX 요청을합니다. 여기에 이름이 지정된 함수 인 ajaxRequest을 사용 했으므로 스크립트를 쉽게 디버깅 할 수 있으며 재사용도 가능합니다. 그러나 원하는 경우 익명의 함수를 사용할 수 있습니다.

+0

뛰어난 통찰력. 필자의 경우 validator() 플러그인이 필요없는 특정 (매우 큰) 형식이 있으므로이를 제외시키기 위해 "NOT"선택기를 사용할 것입니다. $ ('form : not (.no-validate)')와 같은 뭔가. validate(); ... –

+0

물론, 하나의 '

'요소를 제외한 모든 것에 플러그인을 적용해야한다면': not '선택자를 사용하면 플러그인이 필요한 모든 요소에 CSS 클래스를 적용하는 것보다 낫습니다. ''요소를 모두 잡은 다음 복잡한 선택자 문자열을 사용하지 않고 불필요한 요소를 제거하려면'filter() '를 사용하면 약간 더 빠를 수도 있습니다. –

2

의 jQuery 플러그인은 일반적으로 예를 들어, DOM 요소에 활성화됩니다 요소가 페이지에 존재하지 않는

$("#element").myPlugin();

경우, 플러그인은 보통 플러그인을 활성화하지 않음으로써 안전하게 동작합니다.

플러그인이 구조를 따르지 않는 경우에 나는 이런 식으로 뭔가 일을 제안 :

if($("#element").length) $("#element").myPlugin(); 
+0

조건은 항상 다른 호텔들 중 재산'length'을 가진 객체와 '0'의 값 (로 TRUE ''로 평가한다면)가 반환됩니다. 따라서 길이 속성 인'if ($ ("# element"). length) {....}' –

+0

을 검사해야합니다. 그렇지만 동일한 DOM 요소를 가진 페이지가 여러 개인 경우 어떻게해야합니까? 예를 들어, my validator() 플러그인은 $ ('form'). validate()와 같이 설정되어 있지만 가끔씩 페이지의 모든 양식에 일부만 작동하도록하고 싶지는 않습니다. 이 경우 어떻게해야합니까? –

+0

@ 리차드 (Reichard) : 특수 수업의 유효성을 검사 할 양식을 제공 하시겠습니까? – Christoph

0

내가 항상하는 한 가지는 id이 페이지의 이름 (<body id="contact">) 인 각 페이지의 body 태그에 id을 추가하는 것입니다. 그것은 자바 스크립트와 CSS 선택 모두를 매우 쉽게 만듭니다. 예를 들어

:

<!-- HTML --> 

<!-- need to apply plugin to these forms -->  
<form> ... </form> on the about.php page 

<!-- but not to this --> 
<form> ... </form> on the index.php page 

<script type="text/javascript"> 
// jQuery Code (in a separate file) 

$(function() { 
    $('body#about form').validator(); 
}); 
</script>
+0

이것은 다른 페이지에서 다른 작업을 수행하는 좋은 방법입니다. 그러나 저는 레일즈를 사용하고 있습니다. 모든 유형의 페이지에 대해 별도의 레이아웃 파일을 작성할 수는 있지만 DRY가 그리 좋지 않으므로 헤더를 캐시하기가 더 어려워집니다. –

0

당신은 플러그인을 가져와야합니다 주요 자바 스크립트 모듈 알리는에 키 값 쌍을 전달할 수 있습니다. This technique is used by scriptaculous.

<script type="text/javascript" src="scriptaculous.js?load=effects,dragdrop"> 

또 다른 방법은 미디어 파일이 각 양식/페이지에 필요한 서버 측에서 정의하는 것입니다, 그래서 HTML을 사용하려고하는 스크립트에 대한 링크가 자동으로 렌더링 할 수 있습니다. Django has a good implementation of this technique :

class CalendarWidget(forms.TextInput): 
    class Media: 
     css = { 
      'all': ('pretty.css',) 
     } 
     js = ('animations.js', 'actions.js') 
+0

이것은 꽤 멋진 기술이지만, 나는 레일즈에 있으며, 내가 아는 한 이것과 같은 것이 없다. –

관련 문제