Concevez une architecture modulaire solide pour vos plugins jQuery et arrêtez de vous prendre les pieds dans le tapis !
hors de vos jqueryfonctions anonymesBoutezles ignominieuses
View Slide
@madsgraphics ☚github.com/madsgraphics • blog.madsgraphics.com
@madsgraphics ☚github.com/madsgraphics • blog.madsgraphics.com | clever-age.com
Pourquoi un Plugin ?
DOMElement*Pourquoi un Plugin ?* Attachez vos plugins au DOM
ManipulationPourquoi un Plugin ?
Gestiond’evenementsPourquoi un Plugin ?
Mini-boilerplate
80%*BAsiqueMini-boilerplateCherchez pas midi à 14h* Étude menée auprès d’un échantillon composé de moi-même
Mini-boilerplate1 (function($, undefined) {23 $.fn.pluginName = function(options) {4 // Default options5 options = $.extend({6 property: "value",7 onEvent: function() {}8 }, options);910 // Iterate over jQuery elements11 return this.each(function() {1213 // YOUR PLUGIN LOGICS HERE1415 });1617 });1819 })(jQuery);
Construire un Plugin
ModulePatternConstruire un PluginIsolez votre code
Construire un Plugin1 var __slice = [].slice;23 (function($) {45 // logic goes here678 })(jQuery);
SélecteurConstruire un PluginLe point d’entrée
Construire un Plugin1 var inter = function (selecteur) {2 $(selecteur)3 .on('change', function() {45 $('.switch').removeClass('on');67 if ($(this).is(':checked')) {8 var classe = '.' + $(this).attr('id');9 $(classe).addClass('on');10 }1112 })13 .trigger('change');14 };1516 $(document).ready(function (17 inter('#foo');18 ));
Construire un Plugin1 var inter = function (selecteur) {2 $(selecteur)3 .on('change', function() {45 $('.switch').removeClass('on');67 if ($(this).is(':checked')) {8 var classe = '.' + $(this).attr('id');9 $(classe).addClass('on');10 }1112 })13 .trigger('change');14 };1516 $(document).ready(function (17 inter('#foo');18 ));☠
Construire un Plugin1 var __slice = [].slice;23 (function($) {4 var Plugin, namespace;56 namespace = 'pluginName';78 Plugin = (function() {910 return Plugin;1112 })();1314 return $.fn[namespace] = function(a, options) {15 return this.each(function() {16 var plugin;1718 plugin = $.data(this, "plugin_" + namespace);19 if (!plugin) {20 return $.data(this, "plugin_" + namespace, new Plugin(this, a, options));21 }22 });23 };24 })(jQuery);
ObjetPluginConstruire un PluginLa logique autonome
AppelsexternesConstruire un PluginAccédez à votre objet plugin
Aller plus loin
MoDulesAller plus loinRequire.js • AMD
TEsterAller plus loinQUnit • Mocha • Jasmine
DocsAller plus loinDocco
Questions ?
Merci !//gist.github.com/madsgraphics/5603966
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