construire un plugin pour jquery 1.5+
DESCRIPTION
Conférence tenue pour la ConFoo 2012 à Montréal.TRANSCRIPT
![Page 1: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/1.jpg)
CONSTRUIRE UN PLUGIN POUR JQUERY 1.5 ET +
ConFoo 2012 – Montréal, Hôtel Hilton BonaventureMathieu ROBIN
![Page 2: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/2.jpg)
• Mathieu ROBIN (@mathrobin)• 25 ans• Ingénieur logiciel chez Companeo• Contributeur Developpez.com• Blogueur
• http://www.mathieurobin.com• http://www.recettesensolo.com
![Page 3: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/3.jpg)
Pourquoi ?
![Page 4: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/4.jpg)
Parce que ?
42 ?Pourquoi pas ?
Le chef le demande ?
![Page 5: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/5.jpg)
![Page 6: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/6.jpg)
Bienvenue en enfer !
![Page 7: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/7.jpg)
Libraires de « lignes »
![Page 8: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/8.jpg)
Impossibilité de personnaliser
![Page 9: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/9.jpg)
Aucune intuitivité
![Page 10: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/10.jpg)
Et même beaucoup de global !
![Page 11: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/11.jpg)
![Page 12: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/12.jpg)
Réécriture de $.Ajax
![Page 13: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/13.jpg)
Deferred / Promises
http://www.mathieurobin.com/2011/02/labs-jquery-deferred-nouveaute-jquery-1-5
![Page 14: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/14.jpg)
jQuery.sub()
http://www.mathieurobin.com/2011/02/labs-jquery-sub-nouveaute-jquery-1-5
![Page 15: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/15.jpg)
http://docs.jquery.com/Plugins/Authoring
![Page 16: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/16.jpg)
C'est parti !
![Page 17: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/17.jpg)
Règles
![Page 18: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/18.jpg)
Un fichier JS
![Page 19: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/19.jpg)
Un fichier CSS
![Page 20: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/20.jpg)
Une API simple
![Page 21: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/21.jpg)
Documentez !
![Page 22: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/22.jpg)
/* … */// ...
![Page 23: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/23.jpg)
Vérifiez !
![Page 24: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/24.jpg)
http://www.jslint.com
http://www.mathieurobin.com/2011/12/installer-jslint-sur-sa-machine/
![Page 25: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/25.jpg)
Démontrez !
![Page 26: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/26.jpg)
http://www.jsfiddle.net
![Page 27: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/27.jpg)
Lightbox
![Page 28: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/28.jpg)
Quand ?Où ?
Quoi ?Comment ?
![Page 29: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/29.jpg)
Clic sur n'importe quel élément du
DOM
![Page 30: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/30.jpg)
Par dessus l'existant
![Page 31: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/31.jpg)
Affiche la photo avec un arrière
plan noir
![Page 32: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/32.jpg)
Via un plugin jQuery !
![Page 33: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/33.jpg)
Go !
![Page 34: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/34.jpg)
Crédits PhotosCompujeramey : http://www.flickr.com/photos/compujeramey/4506013626/
Hycus : http://blog.hycus.com/
JSFiddle
JSLint
![Page 35: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/35.jpg)
https://joind.in/6021
![Page 36: Construire un plugin pour jQuery 1.5+](https://reader033.vdocuments.pub/reader033/viewer/2022051314/5560b20cd8b42af93b8b471f/html5/thumbnails/36.jpg)