>웹 프론트엔드 >JS 튜토리얼 >jQuery의 사용자 정의 바인딩에 대한 간략한 토론

jQuery의 사용자 정의 바인딩에 대한 간략한 토론

零下一度
零下一度원래의
2017-06-19 10:52:291370검색

jquery커스텀 바인딩

먼저 jQuery의 커스텀 바인딩을 사용하는 방법을 살펴보겠습니다. 바인딩이나 라이브를 사용하여 event를 구독할 수 있습니다(물론 1.7 이후에도 사용할 수 있습니다). 코드는 다음과 같습니다.


$("#myElement").bind('customEventName',function(e){ ... });
$(".elementsClass").live('customEventName',function(e){ ... });


그런 다음 다음과 같이 이벤트를 트리거합니다.


$("#myelement").trigger('customEventName');


또는 사용자 정의 이벤트에 추가 매개변수를 추가할 수 있습니다. 예:


$("#myelement").bind('customEventName',function(e,data){ if(data.custom) ... });
$("#myelement").trigger('customEventName',{ custom: false });


마법 업그레이드

소위 매직 업그레이드는 실제로 전체 프로그램의 모든 사용자 정의 이벤트를 자동으로 등록하고 jQuery에 바인딩할 수 있으며 실행 시 해당 이벤트를 등록하는 모든 모듈이 실행된다는 의미입니다. 예를 들어 User.js 모듈에 정의된 User Update 메소드와 Blogs.js에 정의된 BlogUpdate 메소드는 모두 블로그 게시 시 실행해야 하는 함수 functions 를 정의합니다. 프로세스(예: BlogAdded)를 jQuery에서 지정한 컨테이너(예: document)에 바인딩한 다음 블로그를 성공적으로 게시한 후 $(document).trigger("BlodAdded")를 실행하면 문제가 없습니다.

아래에는 일반적인 샘플 코드가 나와 있습니다.


    var components = [User, Blog, Group, Friend, Topic, Photo];
var eventTypes = ["AddComplete", "UpdateComplete", "DeleteComplete", "LockComplete", "UnLockComplete"];
      $.each(components, function(i,component) {
        $.each(eventTypes, function(i,eventType) {
var handler = component[eventType];
if (handler) $(document).bind(eventType, handler);
        });
      })


각 js 모듈 installation에 정의된 코드는 다음 형식입니다.


    User= {
      AddComplete: function(e, data) {
//...
      },
      UpdateComplete: function(e, data) {
//...
      }
    }


이렇게 하면 어디든, 필요하다면 jQuery를 사용하여 이벤트를 트리거할 수 있습니다.


$(document).trigger("UpdateComplete", data);


이 메서드를 통해 모듈의 메서드는 하나의 이벤트만 등록할 수 있다는 것을 알 수 있습니다. 하나의 방법을 사용하여 여러 이벤트 트리거를 등록하려면 다음 방법을 사용할 수 있습니다.


    var blogController = {
      blogAddOrUpdateComplete: function() {
//...
      }
    }
    blogController.blogAddComplete = blogController.blogUpdateComplete = blogController.blogAddOrUpdateComplete;


최종 참고 사항: 이 문서에서는 동일한 이벤트 이름을 혼합하여 사용하지 마십시오. 예를 들어 User.js의 AddComplete와 Blog.js의 AddComplete는 전혀 관련이 없을 수 있습니다. 즉, 현재로서는 해당하는 로직만 처리하면 됩니다. 그러나 감지되는 것이 동일하다면, 계정을 비활성화한 후 사용자 모듈이 작업을 처리해야 하고 블로그 모듈도 필요할 수 있기 때문에 보편적으로 사용할 수 있는 비활성화사용자컴플리트(DisableUserComplete)와 같이 사용할 수 있습니다. 계정을 비활성화한 후 작업을 처리합니다.

결론

삼촌의 노트: 일상 업무에 필요한 다양한 팁과 자료(기술을 포함하되 이에 국한되지 않음)를 기록하는 것을 목표로 합니다. 도움이 되셨다면 추천해 주시고, 삼촌에게 글을 쓰게 하는 동기를 부여해주세요

위 내용은 jQuery의 사용자 정의 바인딩에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.