Successfully reported this slideshow.
Your SlideShare is downloading. ×

Converting your JS library to a jQuery plugin

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Advanced javascript
Advanced javascript
Loading in …3
×

Check these out next

1 of 20 Ad

More Related Content

Slideshows for you (20)

Advertisement

Similar to Converting your JS library to a jQuery plugin (20)

Advertisement

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 aren't writing vanilla JS anyway, so leverage jQuery's 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. Let's Begin
  5. 5. Existing JS Lib MyProject.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 avoid conflict (function($){ // Attach this new method to jQuery $.fn.extend({ // This is where you write your plugin's 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, we'll 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 Functions init, and everything init is not public in else in your object jQuery, and can only literal is public be called internally MyProject.MyLib.init(); var a=$('.popup'). myLib(); a.init(); # no method 'init'
  13. 13. Public Functions init, and everything function init() { else in your object console.log('hello world'); literal is public } this.each(function() { // code to be inserted here MyProject.MyLib.init(); }); return { init: init }; var a = $('.foo').myLib(); a.init();
  14. 14. Code Reuse on Different Selectors Reuse is limited to Selectors are parts of the DOM specified at where the selectors initialization exactly match $('.here').myLib(); MyProject.MyLib.init(); $('.there').myLib();
  15. 15. Passing Options in Your Lib Options can be Options can be passed to init(), but passed in at would 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 wouldn't 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

×