Recommandé
Contenu connexe
Dernier
Dernier (20)
En vedette
En vedette (20)
Extensible jQuery Plugin Development
- 1. Extensible Plugin Development Shane Riley (@shaneriley) Hashrocket
- 2. Plugins!
- 3. Plugins! Not just for slideshows and autocompletes
- 4. Plugins! Not just for slideshows and autocompletes Abstract repetitive code for reuse
- 5. Plugins! Not just for slideshows and autocompletes Abstract repetitive code for reuse Allow customization with options
- 6. Plugins! Not just for slideshows and autocompletes Abstract repetitive code for reuse Allow customization with options Portability between projects
- 7. Plugins! Not just for slideshows and autocompletes Abstract repetitive code for reuse Allow customization with options Portability between projects Easier to test
- 8. Anatomy of a Plugin http://docs.jquery.com/Plugins/Authoring
- 9. Got an Itch to Scratch?
- 10. There’s a Plugin for That!
- 11. Put the Plugin to Use
- 12. Put the Plugin to Use
- 13. Put the Plugin to Use
- 14. Put the Plugin to Use
- 15. Put the Plugin to Use
- 18. Modify Plugin
- 20. Changing Options After the Fact
- 21. Changing Options After the Fact Difficult to change options once initialized
- 22. Changing Options After the Fact Difficult to change options once initialized May need to unbind/rebind events
- 23. Changing Options After the Fact Difficult to change options once initialized May need to unbind/rebind events May need to keep track of all elements with plugin called on them for this purpose
- 24. Changing Options After the Fact Difficult to change options once initialized May need to unbind/rebind events May need to keep track of all elements with plugin called on them for this purpose Difficult or impossible to unbind only those events
- 26. Proposed Improvements Provide a plugin name as object property
- 27. Proposed Improvements Provide a plugin name as object property Namespace event bindings
- 28. Proposed Improvements Provide a plugin name as object property Namespace event bindings Optionally live binding event or binding to a context
- 30. Store Methods in Plugin Object
- 31. Add Ability to Call Method
- 35. Move Event to Object Method
- 37. Why Call the Method?
- 39. Create Unique Plugin Instance
- 40. Store Instance and Initialize
- 41. Override the Toggle Method
- 43. Wait, what about our new option?
- 44. Add an anim_method Default
- 47. Create a Tear-down Method
- 48. Add Live Binding and Contexts Options: Binding:
- 49. Bind Event to Parent Element
- 50. Bringing it all together
- 52. New Development Pattern Created internal plugin object to contain defaults and methods
- 53. New Development Pattern Created internal plugin object to contain defaults and methods Ability to call methods directly
- 54. New Development Pattern Created internal plugin object to contain defaults and methods Ability to call methods directly Create and store standalone plugin instances
- 55. New Development Pattern Created internal plugin object to contain defaults and methods Ability to call methods directly Create and store standalone plugin instances Plugin namespaced
- 56. New Development Pattern Created internal plugin object to contain defaults and methods Ability to call methods directly Create and store standalone plugin instances Plugin namespaced Teardown method
- 57. Benefits to This Method
- 58. Benefits to This Method Can write your own overrides to suit your individual needs
- 59. Benefits to This Method Can write your own overrides to suit your individual needs Upgrading to new plugin version is worry-free
- 60. Benefits to This Method Can write your own overrides to suit your individual needs Upgrading to new plugin version is worry-free Overriding options, callbacks, methods much easier
- 61. Recommended Reading jQuery Plugins are Broken: http://vurl.me/TPUT Building Stateful jQuery Plugins: http://vurl.me/TPUU jQuery Plugin Patterns: http://vurl.me/TPUY
- 62. Twitter: @shaneriley GitHub: shaneriley Web: shaneriley.com This Presentation: http://vurl.me/TTUZ
Notes de l'éditeur
- \n
- \n
- \n
- \n
- \n
- \n
- Typical plugin:\nAttach initializing function as method to $.fn\nTake options object as argument\nExtend defaults with passed in options\nRun plugin code on each element in collection\n
- Our client would like an accordion effect on their blog for the rest of the post content.\n
- The plugin development community is huge, and there is always more than one plugin for what you’re looking for.\n
- Contrived example of plugin. Note that many options you’d normally see in jQuery UI accordion are omitted for brevity.\n
- Extend defaults with options\n
- Return collection for chainability\n
- Cache jQuery object for click trigger and work from there\n
- Initialize plugin event by calling with no options\n
- Requirements change, and the animation method needs to change once a user has clicked on an anchor. This falls outside of what the plugin is capable of, and will require modifying the plugin to achieve.\n
- To do this, you would unbind the click event and reinitialize the plugin with the new option, but you’ll need to add the option to the plugin as well.\n
- In the plugin, add anim_method and use that property to call the appropriate method when animating.\n
- If plugin needs to be updated, changes need to be retrofitted. A pull request could be submitted (if using Git), but not guaranteed it will be introduced into master.\n
- \n
- \n
- \n
- \n
- Read plugin name from plugin object. Used for both namespacing and to provide a single point of editing when naming conflicts arise.\n
- Read plugin name from plugin object. Used for both namespacing and to provide a single point of editing when naming conflicts arise.\n
- Read plugin name from plugin object. Used for both namespacing and to provide a single point of editing when naming conflicts arise.\n
- \n
- This method of plugin development employs a local object to store the plugin methods. Reposition - update will be attached to events in this case.\n
- If a string matching a method name is passed in, the method is called with the jQuery collection as the context. This allows you to refer to this in your methods as the jQuery collection. All other arguments to the tooltip method are passed through.\n
- Init method binds the events related to the plugin.\n
- \n
- Abstract the defaults to object properties on the parent accordion object. Added name property to represent the plugin name.\n
- Toggle callback for the click event is placed in method.\n
- Init method used to bind toggle method to click handler. Note event is namespaced to match plugin name. Toggle method is called within an anonymous function in order to provide the ability to rewrite the toggle method after the event is bound.\n
- If method is changed after initialization, we’re calling the new method instead of the pointer to the old one. This eliminates having to unbind and rebind events when the callback method changes.\n
- Plugin name is derived from name property on our accordion object. Much easier to change plugin name this way if conflicts arise.\nFirst condition provides ability to call methods by name on an element collection.\n\n
- Second condition will run plugin initialization. Separate copy of plugin created for encapsulation, each element added as a property on its parent object.\n
- Data object written to store standalone instance for access outside plugin.\nInit called.\n
- This is what our method override will now look like.\n
- To override the toggle method at this point, accordion object is read and the toggle method is overridden.\n
- What about our animation method option? Let’s add that back in.\n
- Create a default property on the accordion object in the plugin.\n
- The override method is now no longer needed, as we can override the animation method being called from outside the plugin.\n
- \n
- In our plugin example, this will unbind all namespaced methods and remove any data stored under the plugin name on the elements.\n
- We can also add live binding and a context option to reduce the number of event bindings.\nIf context is set, event is bound to the context rather than each element individually.\nOtherwise event is live bound.\n
- To bind to a parent element with a class of details, in our initializer we pass the context property.\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- Why you should consider writing your own plugins\nHow to use jQuery UI’s widget factory to aid in plugin development\nAddy Osmani and Zeno Rocha’s repo with recommended jQuery plugin patterns\n
- \n