Hello! Written jQuery-plugin for the slider (slideshow) on the classical structure:
(function ($) { $.fn.slider = function(optUser) { var optDefault = {}; settings = $.extend({}, optDefault, optUser); return this.each(function () { // Код слайдера }); }; })(jQuery); Run slider $ ('# slider'). Slider ({optUser});
No additional methods used. Everything works fine. BUT only if one slider is launched on the page. Running two sliders on the same page, they work incorrectly - this was to be expected. The values overlap (say, the selection of a new active slide becomes active for both), i.e. the values of each slider (instance) are not fixed. There was a need to make a plugin multiple. As I understand it, there are several ways:
- Create a system for the namespace and use .data for key values (but after analyzing such sliders presented on the Internet, I made sure that it’s not working correctly, contrary to the words of the developers).
- Option with "Classes" .
- Option with "Classes" and the property .prototype .
Help me figure out which of the options is more optimal? Will the second version fix all values of this instance without interfering with another slider instance?
I thank everyone for the answers !!!
RESULTS:
I can’t write the answer to my question due to the lack of the required number of points, I wrote as a supplement here.
During the night I figured out my question ... The decision was unexpected for me.
The problem was not in the structure of the plugin itself, but in the small jambs that I allowed:
- for all variables that are, so to speak, individual (inherent only in the object for which the plug-in is called) a local variable region is required (I didn’t have it everywhere, so these "crosses" occurred - the second call of the plug-in destroyed the first one).
- corrected shortcomings when setting selectors when searching for objects inside the plugin itself. Everything is only on classes and id, which should be used correctly. There were such small jambs, for example: $ ('# caption') - incorrect (when searching for a block to search for signatures. $ ("Outer
caption ") - true; $ this.find ('# caption') - true ($ this- jQuery-object slider);
And the most important surprise is that when correcting these jambs, two sliders worked on one page correctly, even with my initial structure. Those. I did not change the structure of the plugin and did not create new objects through new. It turns out each call just gave the same copy of the working slider.
Of course, from the perspective of the implementation of the OOP and a clear understanding of the code (if I may say so), this is incorrect as far as I understood. Each call must create its own copy of the "class" (applied to js) with its private or public methods and properties (option 2).
!!! Therefore, with the correction of all the jambs, I stopped at the structure - option 2.
@Deonis , thank you. Looking at your illustrative example began to google in the right direction)))
