2012-01-29 3 views
0

전체 체인 기능을 유지하면서 컨텍스트 개체에 새 네임 스페이스 기능을 추가하는 jQuery 플러그인을 만들려고합니다. 나는 그것이 가능하다면 모르겠지만, 여기에 내가 지금까지 무엇을의 예 : 나는 또한 $(document.body).someplugin().css('background-color', '#000').caption('hey how\'s it going?');특정 개체에 대한 jQuery 플러그인 네임 스페이스

을 할 수있는 능력을 필요로하지만 내가 $(document.body).someplugin().caption('hey how\'s it going?').css('background-color', '#000');

을 할 경우

(function ($) { 
    var loadScreen = $('<div />').text('sup lol'); 

    $.fn.someplugin = function (args) { 
     var args = args || {}, 
      $this = this; 

     $this.append(loadScreen); 

     return { 
      'caption' : function (text) { 
       loadScreen.text(text); 
       return $this; 
      } 
     }; 
    } 
})(jQuery); 

이 잘 작동이

.someplugin()은 jQuery 객체가 아니라 자체 객체를 반환하므로 예상대로 작동하지 않습니다. 나중에 .caption()$(document.body)으로 액세스 할 수 있어야합니다. 예를 들어 변수가 초기 값 $(document.body).someplugin()으로 설정되지 않은 경우입니다. 즉, 어떻게 든 .caption()document.body 개체의 경우 $.fn.caption = function() ...을 통해 어떻게 설정 될지를 의미합니다. 이것은 내가 확실히 할 수없는 부분입니다. 그렇지 않다면 플러그인 함수 연쇄 기능을 유지하기 위해 변수를 설정해야한다고 정착해야 할 것입니다. JQuery와

var $body = $(document.body).someplugin().css('background-color', '#000'); 
$('.non-initialized').caption(); // Error, jQuery doesn't know what caption is 
$body.caption('done loading...'); 

답변

0

가 될 :

여기
$(document.body).someplugin().css('background-color', '#000'); 
$('.non-initialized').caption(); // Error, jQuery doesn't know what caption is 
$(document.body).caption('done loading...'); 

나는 그것이 가능하거나 매우 비효율적하지 않은 경우에 대한 해결 기꺼이 무엇 : 여기

내가 기대의 예제 코드입니다 -chainable 인 경우 jQuery 메서드는 jQuery 객체 또는 모든 jQuery 메서드를 지원하는 객체를 반환해야합니다. 플러그인을 다른 jQuery 메소드와 연쇄 할 수 있는지 여부 또는 자신의 데이터를 반환할지 여부를 결정하기 만하면됩니다. 둘 다 가질 수는 없습니다. 하나를 선택.

코드 예에서 두 개 이상의 플러그인 메소드 .someplugin().caption()을 정의 할 수 있습니다. jQuery에는 하나의 특정 DOM 객체에만 적용되는 jQuery 플러그인 메소드를 구현할 수있는 방법이 없습니다. 그러나 모든 jQuery 객체에서이 메서드를 사용할 수있게하는 데 아무런 해가 없으며 이해할 수있는 메서드에서만 사용할 수 있습니다.

나는 당신이 사용할 수 있다고 생각 : 두 .caption() 호출 사이에 어떤 연결이있을 해야하는 경우에 나는 당신의 질문에서 해당을 따르지 않기 때문에

(function ($) { 
    var loadScreen = $('<div />').text('sup lol'); 

    $.fn.someplugin = function (args) { 
     var args = args || {}, 
      $this = this; 

     $this.append(loadScreen); 
     return(this); 
    } 

    $.fn.caption = function (text) { 
     loadScreen.text(text); 
     return this; 
    } 
})(jQuery); 

$(document.body).someplugin().css('background-color', '#000'); 
$('.non-initialized').caption('whatever'); 
$(document.body).caption('done loading...'); 

, 그 더 설명해주십시오.

+0

요점은 jQuery 네임 스페이스를 어지럽히 지 않도록하고, 여전히 내 자신의 플러그인에 연결 가능한 기능을 확장 할 수 있다는 것입니다. '.caption()'은'$ .fn.loading = function() ...'과'$ .fn.tabs = function()'과 완전히 다른 것일 수 있습니다. 기본적으로, 나는 별도의 플러그인간에'.caption()'기능을 분리 할 수있는 능력이 필요하다. – Shea

+0

나는 $ .extend ($ this, {caption : function() {...}})을 사용하여 솔루션을 생각해 냈습니다. ... ... 여전히 변수를 사용해야하지만 적어도 jQuery 네임 스페이스가 복잡하다. – Shea

+1

해당 특정 jQuery 객체 만 확장하고 있으므로 해당 메소드에 액세스하려면 해당 jQuery 객체를 저장해야한다. 'this.caption = function() {};''.extend()'는 필요 없습니다. – jfriend00

관련 문제