The document discusses converting an existing JavaScript library to a jQuery plugin by encapsulating the code within an anonymous function, allowing options to be passed in at initialization, making private functions truly private, and making the selector and initialization customizable per instance rather than hardcoded. It provides an example of converting some sample code to a jQuery plugin following these best practices in under 20 lines of code.

1. Converting Your JS
Library
To a jQuery Plugin

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. 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. Let's Begin

5. Existing JS Lib
MyProject.MyLib = {
init: function() {
$('.popup a').live('click', function() {
console.log('hello world');
});
}
}
$(function() {
MyProject.MyLib.init();
});

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. Not Convinced Yet?
Just Kidding, I have Solutions

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. // 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. 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. Initialization of JS Lib
$(function() { ...
MyProject.MyLib. this.each(function() {
init() init(this, options);
}); });
...
$('popup').myLib();

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. 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. 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. 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. And the Final Plugin

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. 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. 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. 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