Объект как прототип jQuery.fn?

Question

Если я определяю прототип как этот

jQuery.fn.myFunc = function() { 
    console.log(this); 
} 

и назвать его так:

$('div').myFunc(); 

this внутри myFunc будет относиться к выбору объекта JQuery.

Теперь, если я не хочу загрязнять .fn с несколькими присоединенными функциями, я могу сделать что-то вроде

jQuery.fn.myPlugin = { 

    myFunc1: function() { 

    }, 

    myFunc2: function() { 

    }  

} 

Если я называю это $('div').myPlugin.myFunc1(); - как получить ссылку на выбранные объекты внутри myFunc1? Или есть другой, лучший подход?

Answer 1

Nope. не может этого сделать. Вместо этого определите его как функцию, затем добавьте свойства к этой функции.

jQuery.fn.myPlugin = function() { 
    console.log(this); 
}; 

jQuery.fn.myPlugin.myFunc1 = function() { 

}; 

jQuery.fn.myPlugin.myFunc2 = function() { 

}; 

отмечает, что myFunc1 и myFunc2 до сих пор не будут»имеют доступ к выбранному элементу, поэтому это относительно бесполезно определять их таким образом, кроме того, что они могут быть легко переопределены другими разработчиками (это хорошая вещь)

Обычный способ использования дополнительных методов в вашем плагине - заставить ваш метод плагина принять параметр, который может быть объектом для инициализации плагина, или строка для выполнения целевого метода для элемента. например, $("somediv").myPlugin("myFunc1")

Answer 2

Работайте, если вы создали объект раньше.

Как это:

<script> 
    jQuery.fn.myPlugin = {}; 

    jQuery.fn.myPlugin = { 

     myFunc1: function() { 
      console.log(this); 
     }, 

     myFunc2: function() { 
      alert(this); 
     }  

    }; 
    $(document).ready(function(){ 
     $('div').myPlugin.myFunc1(); 
     $('div').myPlugin.myFunc2(); 
    }); 

</script> 

Answer 3

jQuery plugin tutorial предлагает следующее:

(function($) { 

    $.fn.popup = function(action) { 

     if (action === "open") { 
      // Open popup code. 
     } 

     if (action === "close") { 
      // Close popup code. 
     } 

    }; 

}(jQuery)); 

Я полагаю, что это будет еще одна альтернатива:

(function($) { 
    $.fn.myPlugin = function (action) { 
     var functions = { 
      open: function() { 
       console.log('open: ', this); 
      }, 
      close: function() { 
       console.log('close:', this); 
      } 
     } 

     if (action && functions[action]) { 
      functions[action].call(this) 
     } else { 
      console.log('no function', this); 
     } 

     return this; 
    }; 
}(jQuery)); 

$('#theDiv') 
    .myPlugin() 
    .myPlugin('open') 
    .myPlugin('close'); 

http://jsfiddle.net/faJAk/

Answer 4

Другой возможный подход заключается в использовании defineProperty:

(function($) { 

    var myPlugin = { 
     foo: function() { 
      console.log(this) 
     } 
    } 

    Object.defineProperty($.fn, "myPlugin", { 
     get : function() { return $.extend({}, this, myPlugin) } 
    }); 

})(jQuery); 

$(...).myPlugin.foo Теперь необходимо правильно решить this: [? Очень простой Jquery Plugin Tutorial]

$(function() { 
    $("body").myPlugin.foo(); // logs "body" 
})