Using events in jQuery plugins
The main purpose of this article is to show the differences between the traditional implementation of the jQuery plugin and the implementation using events. The article will be about the traditional implementation of the jQuery plugin, about working with events in jQuery, and trying to replace the methods or callback functions of the plugin with events.
The article is primarily designed for beginners, but there is a desire to hear the professional opinion of people familiar with this issue, having a deeper understanding of the things described in the article.
')
Creating a traditional jQuery plugin is a rather trivial task. To do this, you need to add a new method to the space $ .fn.
This structure is great for creating simple plugins that you don’t need to receive data from.
But often we need to get the data or state of the plugin. A good example is the datepicker.
I know several solutions for data acquisition:
The problem with the implementation of methods P.1.A and R..1.B is that the next time you call
But I ran into the problem of variable scope.
Example 5: Demonstration of the scope problem
At this stage, everything is simple: create a plugin that displays the date from the options.
But the problem arises when it is necessary to place on the page more than one plugin of this type.
Example 6: More than one plugin per page
As we see from example 6 - the options variable, which was moved out of the plug-in limits - was overwritten by the data during plug-in 2 initialization.
Using the jQuery library, we can both create "listeners" for
Refer to the documentation, look at the parameters of both functions:
In general, the on function has parameters:
The trigger function has parameters:
Example 7: Demonstrating how events work
To get rid of the problem with the scope of variables (described in example P.6 ) and the problem of hanging several listeners (described in the solution of R.1.B ), I resorted to using events and wrappers implemented in jQuery (1.B).
Example 7: Implementing events in a plugin
What we got:
Example 8 Demonstrating the work of several initializations of a single plugin. P.7
Of course, this approach changes the usual approach to working with the plugin, I mean the lack of traditional methods for obtaining data, for example
For training and running events, I wrote several small client applications:
Using examples, I showed the creation of a jQuery plugin, identified actual data transfer problems for me and getting data from the plugin, showed the use of jQuery events and wrappers, and touched upon creating an application that actively uses jQuery plugins and events.
I did not touch upon the topic of surfing events on the DOM tree, and I also wanted to pay more attention to creating applications using events. But, if it is karma, I will definitely write a sequel.
Once again I want to appeal to the people who create professional client applications: I love criticism, and I want to hear opinions on this approach, and in general I would like to learn more about creating client applications from first-hand. Therefore, write - I will be grateful.
Thanks for attention!
The article is primarily designed for beginners, but there is a desire to hear the professional opinion of people familiar with this issue, having a deeper understanding of the things described in the article.
1. Theory
1.A. JQuery Traditional Plugin
1.B. Variable scope
1.B. Work with events in jQuery
1.G. Application of events in plugins
1.D. Disadvantages of events
2. Example of a simple plug-in application
3. Conclusion, conclusion
4. References
1. Theory
')
1.A. JQuery Traditional Plugin
Creating a traditional jQuery plugin is a rather trivial task. To do this, you need to add a new method to the space $ .fn.
Example 1 (creating a myPlugin plugin):
(function( $ ) { $.fn.myPlugin = function(options) { // options - // $(this) - jQuery , // }; })( jQuery ); This structure is great for creating simple plugins that you don’t need to receive data from.
But often we need to get the data or state of the plugin. A good example is the datepicker.
I know several solutions for data acquisition:
- R.1.A. Calling a method (or function) .
Example 2:$('input.date').datePicker('getDate');$('input.date').datePicker('isDisabled').
Disadvantage: there is no possibility to track changes (for example, the user chose another value); - R.1.B. Transfer callback functions .
Example 3:$('input.date').datePicker({onChange: onChangeCallback});$('input.date').datePicker({onDisable: onDisableCallback}).
Disadvantage: Complication of the plug-in implementation: it is necessary to implement a call to a callback function, a subscription to the event of several listeners; - R.1.V. Events
Example 4:$('input.date').on('change', onChangeHandler);$('input.date').on('disable', onDisableHandler).
More on the advantages and disadvantages further.
1.B. Variable scope
The problem with the implementation of methods P.1.A and R..1.B is that the next time you call
$(element).datePicker(...) , the plugin's “constructor” is executed again. Of course, this is easily monitored by checking the parameters passed: if the object (options) is passed, this is initialization; if a string is passed, a method call is required. As they say, “this is a bug or a feature” - while there is not enough experience to understand.But I ran into the problem of variable scope.
Example 5: Demonstration of the scope problem
(function( $ ) { // var options = { date: '00-00-0000' }, // methods = { getDate: function() { return options.date; } }; // $.fn.myPlugin = function(o) { if (typeof o === 'string' && methods[o] !== null) { return methods[o].apply(); } options = o || options; $(this).text(options.date); }; // $('[data-test]').myPlugin({ date: '10-10-2013' }); // alert($('[data-test]').myPlugin('getDate')); })( jQuery ); At this stage, everything is simple: create a plugin that displays the date from the options.
But the problem arises when it is necessary to place on the page more than one plugin of this type.
Example 6: More than one plugin per page
As we see from example 6 - the options variable, which was moved out of the plug-in limits - was overwritten by the data during plug-in 2 initialization.
Solutions for Example 6:
- R.2.A. In the options object, store data for initializing all plug-ins (code complication);
- R.2.B. Attach initialization data to a DOM object (from my point of view: a good solution);
- R.2.V. Use of events. Calling methods with
$(...).trigger(...). In the end I will give an example that is devoid of this shortcoming.
1.B. Work with events in jQuery
Using the jQuery library, we can both create "listeners" for
$('.link').on('click', onClickHandler) , and trigger (provoke) $('.link').trigger('click') ) events $('.link').trigger('click') .Refer to the documentation, look at the parameters of both functions:
In general, the on function has parameters:
- events - a list of events to listen to;
- handler is an event handler function that will be called when any event from the events list is executed.
The trigger function has parameters:
- eventType - the name of the event to be triggered;
- extraParameters - an array or object containing the parameters to be passed to the event handler.
Example 7: Demonstrating how events work
$(function() { $(document).on('myEvent', function(event, p) { alert('a: ' + pa + '; b: ' + pb); }); $(document).trigger('myEvent', { a: '1', b: '2' }); }); 1.G. Application of events in plugins
To get rid of the problem with the scope of variables (described in example P.6 ) and the problem of hanging several listeners (described in the solution of R.1.B ), I resorted to using events and wrappers implemented in jQuery (1.B).
Example 7: Implementing events in a plugin
(function( $ ) { // $.fn.datePicker = function(options) { var self = $(this), options = options || { year: 2012, month: 1, day: 1 }; var date = new Date(options.year, options.month, options.day), d = new Date(options.year, options.month, 1), table = $('<table />'), tr = $('<tr>'); tr.appendTo(table); // for (i=0; i < d.getDay(); i++) { tr.append('<td />'); } // while (d.getMonth() == date.getMonth()) { if (i % 7 == 0) { tr = $('<tr />'); tr.appendTo(table); i = 0; } var td = $('<td>' + d.getDate() + '</td>'); td.data('date', d.toString()); tr.append(td); d.setDate(d.getDate() + 1); i++; } // for (i=0; i < 7 - d.getDay(); i++) { tr.append('<td />'); } table.appendTo(self); // 'change' table.find('td').on('click', function() { // self.trigger('change', $(this).data('date')); }); return self; }; // $('[data-datePiceker]').datePicker(); // $('[data-datePiceker]').on('change', function(event, date) { alert(date); }); })( jQuery ); What we got:
- "Constructor" is called only once;
- we can hang a lot of "listeners" who will receive information about the state of the plugin;
- Variables related to the plugin are in the function body, and do not depend on other initializations of this plugin.
Example 8 Demonstrating the work of several initializations of a single plugin. P.7
1.D. Disadvantages of events
Of course, this approach changes the usual approach to working with the plugin, I mean the lack of traditional methods for obtaining data, for example
$(...).datePicker('getDate') , but nevertheless at this stage of my personal development, as a programmer, this way solves some of my problems. I personally, I think this campaign is quite universal, and has not yet come across any shortcomings - if the reader knows about those, please do not be silent, and I also want to ask to write as accessible and adequate as possible.2. Example of a simple plug-in application
For training and running events, I wrote several small client applications:
- Appendix 1 (Twitter feed ): jsbin.com/afupej/1/edit
- Appendix 2 (TODO List): jsbin.com/urihar/16/edit
3. Conclusion, conclusion
Using examples, I showed the creation of a jQuery plugin, identified actual data transfer problems for me and getting data from the plugin, showed the use of jQuery events and wrappers, and touched upon creating an application that actively uses jQuery plugins and events.
I did not touch upon the topic of surfing events on the DOM tree, and I also wanted to pay more attention to creating applications using events. But, if it is karma, I will definitely write a sequel.
Once again I want to appeal to the people who create professional client applications: I love criticism, and I want to hear opinions on this approach, and in general I would like to learn more about creating client applications from first-hand. Therefore, write - I will be grateful.
Thanks for attention!
4. Used literature
5. Literature from commentators
- jQuery UI: Widget Factory
- Very large selection of various design patterns and examples from popular frameworks.
- Judging by the English. name refactoring patterns (not yet studied)
Source: https://habr.com/ru/post/170987/
All Articles