Boutez les ignominieuses fonctions anonymes hors de vos jQuery

4cfbb2f57b2c3310b1097594bac537e9?s=47 MAD
May 22, 2013

Boutez les ignominieuses fonctions anonymes hors de vos jQuery

Concevez une architecture modulaire solide pour vos plugins jQuery et arrêtez de vous prendre les pieds dans le tapis !

4cfbb2f57b2c3310b1097594bac537e9?s=128

MAD

May 22, 2013
Tweet

Transcript

  1. hors de vos jquery fonctions anonymes Boutez les ignominieuses

  2. @madsgraphics ☚ github.com/madsgraphics • blog.madsgraphics.com

  3. @madsgraphics ☚ github.com/madsgraphics • blog.madsgraphics.com | clever-age.com

  4. Pourquoi un Plugin ?

  5. DOM Element* Pourquoi un Plugin ? * Attachez vos plugins

    au DOM
  6. Manipulation Pourquoi un Plugin ?

  7. Gestion d’evenements Pourquoi un Plugin ?

  8. Mini-boilerplate

  9. 80%* BAsique Mini-boilerplate Cherchez pas midi à 14h * Étude

    menée auprès d’un échantillon composé de moi-même
  10. Mini-boilerplate 1 (function($, undefined) { 2 3 $.fn.pluginName = function(options)

    { 4 // Default options 5 options = $.extend({ 6 property: "value", 7 onEvent: function() {} 8 }, options); 9 10 // Iterate over jQuery elements 11 return this.each(function() { 12 13 // YOUR PLUGIN LOGICS HERE 14 15 }); 16 17 }); 18 19 })(jQuery);
  11. Construire un Plugin

  12. Module Pattern Construire un Plugin Isolez votre code

  13. Construire un Plugin 1 var __slice = [].slice; 2 3

    (function($) { 4 5 // logic goes here 6 7 8 })(jQuery);
  14. Sélecteur Construire un Plugin Le point d’entrée

  15. Construire un Plugin 1 var inter = function (selecteur) {

    2 $(selecteur) 3 .on('change', function() { 4 5 $('.switch').removeClass('on'); 6 7 if ($(this).is(':checked')) { 8 var classe = '.' + $(this).attr('id'); 9 $(classe).addClass('on'); 10 } 11 12 }) 13 .trigger('change'); 14 }; 15 16 $(document).ready(function ( 17 inter('#foo'); 18 ));
  16. Construire un Plugin 1 var inter = function (selecteur) {

    2 $(selecteur) 3 .on('change', function() { 4 5 $('.switch').removeClass('on'); 6 7 if ($(this).is(':checked')) { 8 var classe = '.' + $(this).attr('id'); 9 $(classe).addClass('on'); 10 } 11 12 }) 13 .trigger('change'); 14 }; 15 16 $(document).ready(function ( 17 inter('#foo'); 18 )); ☠
  17. Construire un Plugin 1 var __slice = [].slice; 2 3

    (function($) { 4 var Plugin, namespace; 5 6 namespace = 'pluginName'; 7 8 Plugin = (function() { 9 10 return Plugin; 11 12 })(); 13 14 return $.fn[namespace] = function(a, options) { 15 return this.each(function() { 16 var plugin; 17 18 plugin = $.data(this, "plugin_" + namespace); 19 if (!plugin) { 20 return $.data(this, "plugin_" + namespace, new Plugin(this, a, options)); 21 } 22 }); 23 }; 24 })(jQuery);
  18. Objet Plugin Construire un Plugin La logique autonome

  19. Appels externes Construire un Plugin Accédez à votre objet plugin

  20. Aller plus loin

  21. MoDules Aller plus loin Require.js • AMD

  22. TEster Aller plus loin QUnit • Mocha • Jasmine

  23. Docs Aller plus loin Docco

  24. Questions ?

  25. Merci ! //gist.github.com/madsgraphics/5603966

  26. Crédits •Font : Bebas Neue ☛ Dharma Type •Images :

    •Have a Pepsi ☛ Nathan Rupert •Build ☛ zev •Pylon drone (aerial assault variant) ☛ kyle •Questions ☛ Oberazzi •You Killed the Beast, Killer!!! ☛ Chris