ugrás a tartalomhoz

jQuery plugin

gtoma · 2015. Okt. 3. (Szo), 18.54
Sziasztok!

szeretnék egy jquery plugint írni, és van egy kis gondom a plugin elérhetőségével.
A logikát szeretném megérteni, mert valahol az alapoknál lehetek elszállva.

adva mondjuk egy plugin:
  1. $.fn.test = function( options ) {  
  2.     var self = {};  
  3.     self.testszoveg = "akarmi";  
  4.       
  5.     self.testFunction = function( args ) { }  
  6.   
  7.     $.extend(this, {testem: self});  
  8.     console.log( 'test', this );  
  9. }  
  10.   
  11. $.fn.test2 = function( options ) {  
  12.     var self = {};  
  13.     self.testszoveg = "mas";  
  14.       
  15.     self.test2Function = function( args ) { }  
  16.   
  17.     $.extend(this, {testem2: self});  
  18.     console.log( 'test2', this );  
  19. }  
  20.   
  21. $("#aa").test();  
  22. $("#aa").test2();  
Namost az adott pluginben látom a this-ben a $.extenddel hozzáadott self -et, de már a másik hozzáadott self-et NEM.

A cél az lenne, hogy valami ilyesmi módon érhessem el:
$(akarmi).testem.testFunction() vagy a $(akarmi).testem().testFunction()
és természetesen a már "példányosított" verziót.

Ha röviden elmagyaráznátok az alapvető logikáját nem lenne rossz, vagy esetleg szívesen utána is olvasok, ha megmondjátok mire keressek lehetőleg inkább magyar nyelven.

Köszönöm szépen!
‹ onchange this.form.submit() TinyMCE szöveg vágása ›
 ■
1

Különböznek

Poetro · 2015. Okt. 3. (Szo), 20.06
A két this teljesen különböző objektum. Mivel két különböző kiválasztás eredménye. Egyébként pedig egy jQuery plugin-ben illik visszaadni a this-t, hogy tovább lehessen folytatni a kifejezést.
  1. $.fn.test = function( options ) {    
  2.     var self = {};    
  3.     self.testszoveg = "akarmi";    
  4.         
  5.     self.testFunction = function( args ) { }    
  6.     
  7.     $.extend(this, {testem: self});    
  8.     console.log( 'test', this );   
  9.     return this;  
  10. }    
  11.     
  12. $.fn.test2 = function( options ) {    
  13.     var self = {};    
  14.     self.testszoveg = "mas";    
  15.         
  16.     self.test2Function = function( args ) { }    
  17.     
  18.     $.extend(this, {testem2: self});    
  19.     console.log( 'test2', this );    
  20.     return this;  
  21. }    
  22.     
  23. $("#aa").test().test2();    
2

Két különböző?

gtoma · 2015. Okt. 4. (V), 08.56
(return this megértve. nincs kérdés)
Két különböző objektum?
Tehát amikor lefut egy $(). kiválasztás, akkor új objektum jön létre.

Van megoldás, hogy ezeket "összeforrasszuk"? vagy van valami közös pontjuk, valami híd?
gondolom a $().data() pl az, de nem tűnik elegánsnak ezt használni.

kiraktam a netre a kódot, amivel gondom van. Bár ebbe belefutottam már máskor is,
de úgy érzem itt lenne az ideje ezt megértenem. :)

itt

Egy file feltöltő, tallozót szeretnék csinálni.
az mcFileSelector végén hozzáadnám az elemhez a plugint, hogy példányosított verziója elérhető legyen.
$.extend(this, {fileManager: self});
aztán elfut az mcFileSelector.init -be, és ott ráraknám az mcFileExplorer -t,
ennek az alján concolosom ki a this -t és látszik, hogy csak az aktuális van meg.

Ez egybevág azzal amit mondtál, azonban sok plugin képes elérhetőséget biztosítani.

pl használom a DataTable -t is, és ott is elérhető funkciók vannak nyitva:
$(..).Datatable().addrow()

Szóval nyilván van valami módja, valami szintaktika.
3

widget

gtoma · 2015. Okt. 4. (V), 12.05
Hm. Közben találtam egy ilyen megoldást:
  1. $.widget("nt.FileSelector", {  
  2.       
  3.     options: {  
  4.         a: 1,  
  5.         b: 2  
  6.     },  
  7.       
  8.     _create: function() {  
  9.         console.log( 'create', this );  
  10.         this._testConsole();  
  11.     },  
  12.       
  13.     _testConsole: function() {  
  14.         console.log( 'console', this );  
  15.         $.extend(this.element.FileSelector, this);  
  16.         $(this.element).FileExplorer();  
  17.     },  
  18.       
  19.     _setOptions: function(options) {  
  20.         this.options = options;  
  21.     },  
  22.       
  23.     _getOptions: function() {  
  24.         return this.options;  
  25.     }  
  26. });  
  27.   
  28. $.widget("nt.FileExplorer", {  
  29.       
  30.     options: {  
  31.         c: 1,  
  32.         d: 2  
  33.     },  
  34.       
  35.     _create: function() {  
  36.         console.log( 'createExp', this );         
  37.         console.log( $(this.element).FileSelector._getOptions() );  
  38.         $(this.element).FileSelector._setOptions({x: 5});  
  39.         console.log( $(this.element).FileSelector._getOptions() );  
  40.     },  
  41.       
  42.     _testConsole: function() {  
  43.         console.log( 'consoleExp', this );  
  44.     }  
  45. });  
  46.   
  47. $("#a").FileSelector();  
úgy tűnik működik. Vélemény? ez a megfelelő út?

update: Sajnos nem megfelelő.
A következő esetben már látszik a hiba:
  1. <input type="text" id="a" value="a" class="zold"/>  
  2. <input type="text" id="b" value="b" class="zold"/>  
  1. $(".zold").FileSelector();  
  2. $("#a").FileSelector.setOptions({ok:12});  
  3. $("#b").FileSelector.setOptions({no:"no"});  
  4.   
  5. console.log( "xxxx", $("#a").FileSelector.getOptions(), $("#b").FileSelector.getOptions());  
Sajnos a #a és a #b is no:no options-t kapja meg.
4

egyszerűsítve

gtoma · 2015. Okt. 5. (H), 15.21
Íme egy egyszerűsített probléma:

jsfindle

azaz a console.log ból látszik, hogy nem egy példány csatolódik az adott html tag-hez,
hanem ugyan az a class csatolódik mindegyikhez.

Erre megoldás?
5

(function($){ $.fn.plugin1

Poetro · 2015. Okt. 5. (H), 21.46
  1. (function($){  
  2.   $.fn.plugin1 = function(value) {  
  3.     var options = $.extend(this.data('plugin1-options'), {x: value});  
  4.     this.data('plugin1-options', options)  
  5.     console.log(this.data());  
  6.   };  
  7.   $.fn.plugin2 = function(value) {  
  8.     var options = $.extend(this.data('plugin2-options'), {x: value});  
  9.     this.data('plugin2-options', options)  
  10.     console.log(this.data());  
  11.   };  
  12. }(jQuery));  
  13.   
  14. jQuery('#x').plugin1('X');  
  15. jQuery('#x').plugin2('Y');  
[object Object] {
  plugin1Options: [object Object] {
    x: "X"
  }
}
[object Object] {
  plugin1Options: [object Object] {
    x: "X"
  },
  plugin2Options: [object Object] {
    x: "Y"
  }
}
Demó