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. 9.

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

    menée auprès d’un échantillon composé de moi-même
  2. 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);
  3. 13.

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

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