Converting your JS library to a jQuery plugin
Upcoming SlideShare
Loading in...5

Converting your JS library to a jQuery plugin






Total Views
Views on SlideShare
Embed Views



3 Embeds 311 301 9 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Converting your JS library to a jQuery plugin Converting your JS library to a jQuery plugin Presentation Transcript

  • 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 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
  • 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
  • Lets Begin
  • Existing JS LibMyProject.MyLib = { init: function() { $(.popup a).live(click, function() { console.log(hello world); }); }}$(function() { MyProject.MyLib.init();});
  • 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
  • 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 selector outside of your library● Pass options when you call your library
  • // 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);
  • 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); }); }); } }... ...
  • Initialization of JS Lib$(function() { ... MyProject.MyLib. this.each(function() {init() init(this, options);}); }); ... $(popup).myLib();
  • 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
  • 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();
  • 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();
  • 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 });
  • And the Final Plugin
  • (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});
  • 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
  • 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
  • Resources● This is a great jQuery tutorial: http://www. tutorial● The official docs: http://docs.jquery. com/Plugins/Authoring● Node.js:● Javascript: The Good Parts: http://amzn. to/Lpn7Jx