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
   

   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