Converting your JS library to a jQuery plugin

2,756 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,756
On SlideShare
0
From Embeds
0
Number of Embeds
312
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Converting your JS library to a jQuery plugin

  1. 1. Converting Your JS Library To a jQuery Plugin
  2. 2. Benefits of a jQuery plugin● jQuery plugins encourage a certain structure, similar to a framework● Plugins allow passing of options with sensible defaults● Allows for code reuse on multiple DOM elements● You probably arent writing vanilla JS anyway, so leverage jQuerys plugin system
  3. 3. What Makes a Good Candidate?● Code that needs to instantiate and keep internal variables● Code that is repeated on multiple DOM elements across your application● Code that is only operating on a particular DOM location and needs to be scoped
  4. 4. Lets Begin
  5. 5. Existing JS LibMyProject.MyLib = { init: function() { $(.popup a).live(click, function() { console.log(hello world); }); }}$(function() { MyProject.MyLib.init();});
  6. 6. A Few Problems...● All functions are public - hard for the next person to know what functions are meant to be called, and often naming conventions are used to denote private functions (e.g. an underscore prefix)● The selector is hard coded - reuse is limited to exactly matching selectors● No options framework - options will probably be hacked in by passing data attribute values, etc
  7. 7. Not Convinced Yet?Just Kidding, I have Solutions
  8. 8. And Their Solutions...● Make private functions private, and public functions public. This establishes your API● Move the selector outside of your library● Pass options when you call your library
  9. 9. // You need an anonymous function to wrap around your function to avoidconflict(function($){ // Attach this new method to jQuery $.fn.extend({ // This is where you write your plugins name pluginname: function() { // Iterate over the current set of matched elements return this.each(function() { // code to be inserted here }); } });// pass jQuery to the function,// So that we will able to use any valid Javascript variable name/ /to replace "$" SIGN. But, well stick to $ (I like dollar sign: ) )})(jQuery);
  10. 10. Object Literal to Function... ... init: function() { function init(container, $(.popup a).live(click, options) {function() { $(a, container).bind(click, console.log(hello function() {world); console.log(hello world); }); }); } }... ...
  11. 11. Initialization of JS Lib$(function() { ... MyProject.MyLib. this.each(function() {init() init(this, options);}); }); ... $(popup).myLib();
  12. 12. Private Functionsinit, and everything init is not public inelse in your object jQuery, and can onlyliteral is public be called internallyMyProject.MyLib.init(); var a=$(.popup). myLib(); a.init(); # no method init
  13. 13. Public Functionsinit, and everything function init() {else in your object console.log(hello world);literal is public } this.each(function() { // code to be inserted hereMyProject.MyLib.init(); }); return { init: init }; var a = $(.foo).myLib(); a.init();
  14. 14. Code Reuse on Different SelectorsReuse is limited to Selectors areparts of the DOM specified atwhere the selectors initializationexactly match $(.here).myLib();MyProject.MyLib.init(); $(.there).myLib();
  15. 15. Passing Options in Your LibOptions can be Options can bepassed to init(), but passed in atwould be globally set initialization:MyProject.MyLib.init $(.popup).myLib({({foo: bar}); foo: bar });MyProject.MyLib.init $(.other).myLib({({foo: baz}); foo: baz });
  16. 16. And the Final Plugin
  17. 17. (function($){ $.fn.extend({ myLib: function(options) { function init(container, options) { $(a, container).bind(click, function() { console.log(options.message); }); } var options = $.extend(defaults, options); return this.each(function() { init(this, options); }); } });})(jQuery);$(.popup).myLib({message: hello world});
  18. 18. The Wrap Up● In under 20 lines we have a fully functional jQuery plugin● We have options support● We have public / private functions● We can reuse this on different selectors
  19. 19. Final Thoughts● jQuery is for manipulating the DOM. I wouldnt recommend making jQuery plugins for Node.js libraries, etc● Get familiar with Javascript outside of the DOM. He can be opinionated, but I have to recommend Javascript: The Good Parts by Douglas Crockford● Do stuff in Node.js. The exposure to Javascript in a different context is very helpful
  20. 20. Resources● This is a great jQuery tutorial: http://www. queness.com/post/112/a-really-simple-jquery-plugin- tutorial● The official docs: http://docs.jquery. com/Plugins/Authoring● Node.js: http://nodejs.org/● Javascript: The Good Parts: http://amzn. to/Lpn7Jx

×