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 !

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