1 / 25

Writing your first jQuery plugin

Writing your first jQuery plugin. Slides + Code. Presentation http://www.slidesix.com Code https://github.com/cfaddict/cfobjective2011 Blog Post http://www.danvega.org/blog. About Me. Programmer Senior Web Developer STERIS Adobe Community Professional (ACP)

ura
Download Presentation

Writing your first jQuery plugin

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Writing your first jQuery plugin

  2. Slides + Code • Presentation • http://www.slidesix.com • Code • https://github.com/cfaddict/cfobjective2011 • Blog Post • http://www.danvega.org/blog

  3. About Me • Programmer • Senior Web Developer STERIS • Adobe Community Professional (ACP) • Manager Cleveland Adobe User Group • Writer / Teacher / Presenter • Cleveland Sports Fan • Runner / Exercise / Poker / Travel

  4. Agenda • What you should know • Performance Tips & Tricks • Building blocks of jQuery Plugins • BlogSlider Plugin Walkthrough • Wrap-up & FAQ

  5. Why jQuery • cfObjective 2011 • JavaScript • Coding is fun! • jQuery • jQuery is easy to use • Plugin Architecture

  6. Performance Tips & Tricks • Why performance • Best practices • More Work = Slower Response • Faster != Better

  7. Latest Version • ALWAYS use the latest version of jQuery core • Performance improvements and bug fixes are usually made between each version • 1.6.0 – Changes to the Attributes Module • What about Google CDN?

  8. Why Google CDN • Cached version • Size of library. • Reduces bandwidth used by your server. • Geographically close response.

  9. Selectors • Fastest to slowest are • ID Selectors (“#navigation”) • Element Selectors (“form”) • Class Selectors (“.navigation”) • Pseudo & Attribute Selectors (“:hidden”) • Bonus Question

  10. Caching var parents = $(‘.parents’); var children = $(‘.parents’).find(‘.child’); //bad • Cache ALWAYS!!! • Each $(“query”) searches the DOM and returns a new collection

  11. Chaining • Comparable to caching • Almost all jQuery methods return a jQuery object and support chaining • Less code, easy to write and it is just darn fun!

  12. Event Delegation • Understanding bind( ), live( ) and delegate( ) • Each technique progressively gives you a little more control and flexibility. • At its core event delegation is all about letting events bubble up the DOM tree to a parent element. 

  13. Limit Direct DOM Manipulation • The basic idea here is to create exactly what you need in memory, and then update the DOM. This is not a jQuery best practice, but a must for efficient JavaScript.  • GOOD - Updated the DOM 1x • BAD - Update the DOM on each iteration

  14. What is a jQuery Plugin • Extension of jQuery • Modular Code • Markup (HTML) • Look & Feel (CSS) • Functionality (JavaScript) • The Good, the bad and the ugly • Plugin Myths

  15. JavaScript Recap • Classes • Properties • Methods • Constructors • Prototype

  16. Getting Started • What is your plugin going to do? • How will the developer use it? • Naming Conventions • jquery.stripes.js / jquery.stripes.min.js • The base plugin • Improving the base plugin

  17. Context

  18. This is easy

  19. Maintaining Chainability

  20. Flexible Plugins • Configurable plugins • Default settings • $.extend(); • Local vs Global

  21. Adding Functionality to your plugin • Namespace • Adding methods to your plugin • Events

  22. Blog Slider Demo

  23. Resources • Performance • Addy Osmani http://vimeo.com/18846584 • Plugins/Authoring • jQuery http://docs.jquery.com/Plugins/Authoring • BlogSlider Plugin • http://www.github.com/cfaddict/blogslider • Ninjas • http://dougneiner.com • http://www.bennadel.com

  24. Contact Information email: danvega@gmail.com twitter: @cfaddict web: http://www.danvega.org

  25. Questions?

More Related