SlideServe
Télécharger Obtenir Pro
Menu
Accueil Pro
Préférences
ApparenceLight Aide et commentaires
© SlideServe · v2026

Writing your first jQuery plugin

ura avatar
ura
25 diapositives · 378 Views · Jul 29, 2014

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)

Writing your first jQuery plugin - slide 1
01 / 25Writing your first jQuery plugin
1 / 17

Télécharger la présentation

Writing your first jQuery plugin
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation

  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?