$30 off During Our Annual Pro Sale. View Details »

Boutez les ignominieuses fonctions anonymes hors de vos jQuery

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. hors de vos jquery
    fonctions anonymes
    Boutez
    les ignominieuses

    View Slide

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

    View Slide

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

    View Slide

  4. Pourquoi un Plugin ?

    View Slide

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

    View Slide

  6. Manipulation
    Pourquoi un Plugin ?

    View Slide

  7. Gestion
    d’evenements
    Pourquoi un Plugin ?

    View Slide

  8. Mini-boilerplate

    View Slide

  9. 80%*
    BAsique
    Mini-boilerplate
    Cherchez pas midi à 14h
    * Étude menée auprès d’un échantillon composé de moi-même

    View Slide

  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);

    View Slide

  11. Construire un Plugin

    View Slide

  12. Module
    Pattern
    Construire un Plugin
    Isolez votre code

    View Slide

  13. Construire un Plugin
    1 var __slice = [].slice;
    2
    3 (function($) {
    4
    5 // logic goes here
    6
    7
    8 })(jQuery);

    View Slide

  14. Sélecteur
    Construire un Plugin
    Le point d’entrée

    View Slide

  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 ));

    View Slide

  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 ));

    View Slide

  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);

    View Slide

  18. Objet
    Plugin
    Construire un Plugin
    La logique autonome

    View Slide

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

    View Slide

  20. Aller plus loin

    View Slide

  21. MoDules
    Aller plus loin
    Require.js • AMD

    View Slide

  22. TEster
    Aller plus loin
    QUnit • Mocha • Jasmine

    View Slide

  23. Docs
    Aller plus loin
    Docco

    View Slide

  24. Questions ?

    View Slide

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

    View Slide

  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

    View Slide