Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Boutez les ignominieuses fonctions anonymes hor...

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 !

MAD

May 22, 2013
Tweet

Other Decks in Programming

Transcript

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

    menée auprès d’un échantillon composé de moi-même
  2. 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);
  3. Construire un Plugin 1 var __slice = [].slice; 2 3

    (function($) { 4 5 // logic goes here 6 7 8 })(jQuery);
  4. 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 ));
  5. 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 )); ☠
  6. 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);
  7. 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