Converting Your JS     Library    To a jQuery Plugin
Benefits of a jQuery plugin● jQuery plugins encourage a certain  structure, similar to a framework● Plugins allow passing ...
What Makes a Good Candidate?● Code that needs to instantiate and keep  internal variables● Code that is repeated on multip...
Lets Begin
Existing JS LibMyProject.MyLib = {  init: function() {    $(.popup a).live(click, function() {      console.log(hello worl...
A Few Problems...● All functions are public - hard for the next  person to know what functions are meant to  be called, an...
Not Convinced Yet?Just Kidding, I have Solutions
And Their Solutions...● Make private functions private, and public  functions public. This establishes your API● Move the ...
// You need an anonymous function to wrap around your function to avoidconflict(function($){   // Attach this new method t...
Object Literal to Function...                               ...  init: function() {              function init(container, ...
Initialization of JS Lib$(function() {       ...  MyProject.MyLib.   this.each(function() {init()                 init(thi...
Private Functionsinit, and everything      init is not public inelse in your object       jQuery, and can onlyliteral is p...
Public Functionsinit, and everything      function init() {else in your object          console.log(hello world);literal i...
Code Reuse on Different SelectorsReuse is limited to       Selectors areparts of the DOM          specified atwhere the se...
Passing Options in Your LibOptions can be          Options can bepassed to init(), but   passed in atwould be globally set...
And the Final Plugin
(function($){   $.fn.extend({       myLib: function(options) {         function init(container, options) {           $(a, ...
The Wrap Up● In under 20 lines we have a fully functional  jQuery plugin● We have options support● We have public / privat...
Final Thoughts● jQuery is for manipulating the DOM. I  wouldnt recommend making jQuery plugins  for Node.js libraries, etc...
Resources● This is a great jQuery tutorial: http://www.    queness.com/post/112/a-really-simple-jquery-plugin-    tutorial...
Upcoming SlideShare
Loading in...5
×

Converting your JS library to a jQuery plugin

2,323
-1

Published on

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

No Downloads
Views
Total Views
2,323
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×