Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Converting your JS library to a jQuery plugin

2,777 views

Published on

Published in: Technology
  • Be the first to comment

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

×