tykayn/orgmode-to-gemini-blog
1
0
Fork 0
mirror of https://forge.chapril.org/tykayn/orgmode-to-gemini-blog synced 2025-10-09 17:02:45 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Tykayn 2024-11-08 18:16:36 +01:00 • committed by tykayn
parent 0a189bd6ad
commit 381ac44b8b
906 changed files with 28485 additions and 12762 deletions
Download patch file Download diff file Expand all files Collapse all files

491
html-websites/cipherbliss_blog/2012/cipherbliss_blog_89_tutoriel-de-plugin-jquery/index.html
View file

@ -1,491 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 276</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2012-09-12 13:20:00&gt;</li>
<li>modifié: &lt;2014-03-19 13:02:48&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="tutoriel-de-plugin-jquery-1">tutoriel de plugin jQuery</h2>
<p><img
src="https://img2.websourcing.fr/files/2010/01/jquery-1-4-500x218.jpg" /></p>
<p>Alors comme ça petit padawan tu aimerais créer un plugin javascript
pour cette merveilleuse librairie de fonctions? Voici un tutoriel fort
inspiré de <a href="https://docs.jquery.com/Plugins/Authoring">la
documentation officielle sur les plugins jQuery en Anglais.</a> Prêts à
profiter du meilleur de jQuery et gagner un maximum de temps en
développement pour davantage de sociabilité? Suivez le guide.</p>
<h3 id="pour-commencer-son-plugin">Pour commencer son plugin</h3>
<p>Pour éviter que notre super plugin n'entre en conflit avec d'autres
plugins utilisant le signe dollar il vaut mieux passer jQuery en
fonction auto invoquée (Immediately-Invoked Function Expression , ou
IIFE).</p>
<pre class="example"><code>(function( $ ) { $.fn.monSuperPlugin = function() {
// les instructions trop bien ici 
};
})( jQuery );
</code></pre>
<h3 id="le-contexte">Le contexte</h3>
<p>Avec cette base nous pouvons commencer à écrire notre contenu de
plugin. Mais avant cela, parlons un peu du mot clé <em>this</em> qui à
l'intérieur de notre fonction se réfère à l'objet jQuery sur lequel le
plugin est invoqué. <em>this</em> se réfère au DOM (document object
model) natif. Il n'est donc pas besoin d'entourer <em>this</em> par les
parenthèses du sélécteur jQuery dans ce contexte.</p>
<pre class="example"><code>function( $ ) { $.fn.monSuperPlugin = function() {
// les instructions trop bien ici
this.fadeIn(&#39;normal&#39;, function(){
// le mot clé this est un élément du DOM
}); }; })( jQuery );
</code></pre>
<p>pour actionner notre plugin on pourra donc l'appeler ainsi sur un
#element de votre choix ou plusieurs grâce à la puissance des sélecteurs
CSS.</p>
<pre class="example"><code>$(&#39;#element&#39;).myPlugin();
</code></pre>
<h3 id="les-bases">Les bases</h3>
<p>Maintenant que nous comprennons le contexte des plugins jQuery,
écrivons un code qui fait réellement quelque chose.</p>
<p>Par exemple, un simple plugin qui évalue les hauteurs pour retourner
la plus grande dans le jeu d'éléments sélectionnés.</p>
<pre class="example"><code> (function( $ ){ $.fn.hauteurMax = function() {
var max = 0;
this.each(function() {
max = Math.max( max, $(this).height() );
});
return max; 
}; })( jQuery );
var tallest = $(&#39;div&#39;).hauteurMax();
</code></pre>
<p>Ceci donne à la variable <em>tallest</em> la valeur de la div la plus
haute de la page.</p>
<h3 id="maintenir-la-continuité">Maintenir la continuité</h3>
<p>L'exemple précédent retourne un nombre entier, mais bien souvent le
but d'un plugin est de modifier un jeu d'éléments et de les passer à la
méthode suivante dans la chaîne de fonctions. C'est ce qui fait la
beauté du design de jQuery et explique sa popularité. Donc, pour
maintenir la continuité de la chaîne dans vos plugins, vous devez faire
en sorte que les retours de plugins comprennent le mot clé
<em>this</em>.</p>
<pre class="example"><code> (function( $ ){ $.fn.verrouTailles = function( type ) {
return this.each(function() {
var $this = $(this);
if ( !type || type == &#39;width&#39; ) {
$this.width( $this.width()
);
}
if ( !type || type == &#39;height&#39; ) {
$this.height( $this.height() );
} 
}); 
}; 
})( jQuery );
</code></pre>
<p>Ce plugin associe la largeur et la hauteur actuelle de chaque élément
du jeu sélectionné. Il sera ajouté dans le HTML de la page un attribut
<em>width</em> et <em>height</em> à chaque balise ainsi sélectionnée.
Nous pouvons donc y mettre une autre méthode à la suite, comme
<em>css()</em>. Et pour le mettre en place dans une chaîne:</p>
<pre class="example"><code>$(&#39;div&#39;).verrouTailles(&#39;width&#39;).css(&#39;color&#39;, &#39;red&#39;);
</code></pre>
<p>Parce que le mot clé this est retourné dans la lunette de script du
plugin, la continuité est maintenue. Aussi, nous pouvons mettre des
options et des choix par défaut dans nos plugins.</p>
<h3 id="options-et-défauts">Options et défauts</h3>
<p>Les configurations par défaut peuvent être étendues avec $.extend <a
href="https://docs.jquery.com/Utilities/jQuery.extend">https://docs.jquery.com/Utilities/jQuery.extend</a>
quand le plugin est invoqué. <strong>jQuery.extend( cible [, objet1] [,
objetN])</strong> extend sert à fusionner le contenu de plusieurs objets
dans le premier objet. Au lieu d'invoquer un plugin avec un grand nombre
d'arguments, vous pouvez passer un seul objet des options que vous
voulez modifier en argument.</p>
<pre class="example"><code> (function( $ ){ $.fn.tooltip = function( options ) {
// Créer quelques options par defaut, les étendre comme nous voulons.
var settings = $.extend( { &#39;location&#39; : &#39;top&#39;, &#39;background-color&#39; : &#39;blue&#39; }, options);
return this.each(function() { // code du plugin Tooltip ici });
};
})( jQuery );
</code></pre>
<p>ce qui donne en pratique avec une option définie dans un objet:</p>
<pre class="example"><code>$(&#39;div&#39;).tooltip({ &#39;location&#39; : &#39;left&#39; });
</code></pre>
<p>Dans cet exemple, après avoir appelé le plugin <em>tooltip</em> avec
les options choisies, la localisation par défaut /top/devient réécrite
en <em>left</em>, alors que la configuration de couleur d'arrière plan
reste <em>bleue</em> car elle n'a pas été spécifiée. la config
<em>settings</em> de l'objet devient donc comme ceci:</p>
<pre class="example"><code> {
&#39;location&#39; : &#39;left&#39;,
&#39;background-color&#39; : &#39;blue&#39;
}
</code></pre>
<p>C'est une bonne pratique et un très bon moyen de rendre un plugin
configurable sans avoir besoin de donner toutes les options à chaque
fois.</p>
<h3 id="espace-de-noms">Espace de noms</h3>
<p>Choisir un espace de nommage est un moyen idéal pour éviter qu'un
autre plugin chargé sur la même page ne vienne remplacer le notre ou le
modifier contre notre gré. En tant que développeur ça nous rend la vie
plus facile pour mieux trier nos méthodes, évènements et données.</p>
<p>Il vaudrait donc mieux ne pas mettre un seul espace de nom par plugin
dans l'objet <em>jQuery.fn</em> mais plutôt stocker nos plugins dans un
objet qui agira comme pour la configuration par défaut que nous venons
de voir. Mais cette fois nous donnons par défaut non pas de simples
variables mais des noms associés à des méthodes.</p>
<pre class="example"><code>(function( $ ){
var methods = { init : function( options ) {
// THIS
},
show : function( ) {
// IS
},
hide : function( ) {
// GOOD
},
update : function( content ) {
// !!!
} };
$.fn.tooltip = function( method ) {
// logique d&#39;appel de méthode
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === &#39;object&#39; || ! method ) {
return methods.init.apply( this, arguments );
}
else { $.error( &#39;La Méthode &#39; + method + &#39; n&#39;existe pas dans jQuery.tooltip&#39; ); } };
})( jQuery );
// appelle la méthode initiatrice
$(&#39;div&#39;).tooltip();
// appelle la méthode initiatrice avec une option
$(&#39;div&#39;).tooltip({ foo : &#39;bar&#39; });
// appelle la méthode hide
$(&#39;div&#39;).tooltip(&#39;hide&#39;);
// appelle la méthode update avec une option
$(&#39;div&#39;).tooltip(&#39;update&#39;, &#39;This is the new tooltip content!&#39;);
</code></pre>
<p>c'est une façon standard d'encapsuler ses méthodes de plugins dans la
communauté jQuery, c'est aussi le cas pour jQueryUI. <a
href="https://jqueryui.com/">https://jqueryui.com/</a></p>
<ol>
<li><p>Évènements</p>
<p>la méthode <em>bind()</em> permet de donner un espace de nom à des
évènements liés. Si votre plugin lie un évènement, c'est une bonne
pratique de lui donner un espace de nom. ainsi, si vous avez besoin de
le délier avec <em>unbind()</em> sans interférer avec les autres
évènements qui pourraient avoir été liés avec le même type d'évènement.
Vous pouvez ajouter le nom de l'espace
<em>nom<sub>denamespace</sub></em> au type d'évènement que vous liez,
comme ceci.</p>
<pre class="example"><code> (function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
$(window).bind(&#39;resize.tooltip&#39;, methods.reposition); }); },
destroy : function( ) {
return this.each(function(){ $(window).unbind(&#39;.tooltip&#39;);
})%% },
reposition : function( ) {
// ...
},
show : function( ) {
// ...
}, hide : function( ) {
// ...
}, update : function( content ) {
// ...
} };
$.fn.tooltip = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
}
else if ( typeof method === &#39;object&#39; || ! method ) {
return methods.init.apply( this, arguments );
}
else {
$.error( &#39;Method &#39; + method + &#39; does not exist on jQuery.tooltip&#39; ); } };
})( jQuery );
$(&#39;#fun&#39;).tooltip();
// et un peu plus tard...
$(&#39;#fun&#39;).tooltip(&#39;destroy&#39;);
</code></pre>
<p>Dans cet exemple, quand tooltip est initialisé avec la méthode
<em>init</em> la méthode <em>reposition</em> est liée à l'évènement de
redimension de la fenêtre sous l'espace de nom <em>tooltip</em>. Plus
loin, si le développeur a besoin de détruire tooltip, nous pouvons
délier les évènements liés à ce plugin en lui passant le nom de
l'espace, ici tooltip, à la méthode <em>unbind</em>. Cela nous permet de
délier les évènements d'un plugin en toute sécurité sans délier d'autres
évènements liés en dehors du plugin.</p></li>
</ol>
<h3 id="data">Data</h3>
<p>Quand nous avons besoin de maintenir un état ou de vérifier que notre
plugin a été initialisé sur un certain élément, la méthode jQuery
<em>data</em> est un très bon moyen de garder une trace des variables
sur les éléments. Cependant, au lieu de garder une trace de quelques
appels de données séparés avec des noms différents, il vaut mieux
utiliser un objet pour héberger toutes les variables et accéder à cet
objet par un seul espace de nom.</p>
<pre class="example"><code> (function( $ ){ var methods = { init : function( options ) {
return this.each(function(){
var $this = $(this),
data = $this.data(&#39;tooltip&#39;),
tooltip = $(&#39;&#39;,
{ text : $this.attr(&#39;title&#39;) }); // si le plugin n&#39;a pas encore été initialisé
if ( ! data ) {
/* faire des trucs ici */
$(this).data(&#39;tooltip&#39;, { target : $this, tooltip : tooltip });
}
}); },
destroy : function( ) { return this.each(function(){ var $this = $(this), data = $this.data(&#39;tooltip&#39;);
// Namespacing FTW
$(window).unbind(&#39;.tooltip&#39;);
data.tooltip.remove();
$this.removeData(&#39;tooltip&#39;);
}) },
reposition : function( ) {
// ...
},
show : function( ) {
// ...
},
hide : function( ) {
// ...
},
update : function( content ) {
// ...
} };
$.fn.tooltip = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === &#39;object&#39; || ! method ) {
return methods.init.apply( this, arguments );
}
else {
$.error( &#39;Method &#39; + method + &#39; does not exist on jQuery.tooltip&#39; );
} };
})( jQuery );
</code></pre>
<h3 id="résumé-et-meilleures-pratiques">Résumé et meilleures
pratiques</h3>
<p>Écrire des plugins jQuery vous permet à tirer le meilleur profit de
la bibliothèque et abstraire vos plus intelligentes et utiles fonctions
à travers un code réutilisable pouvant vous faire faire un grand gain de
temps et rendre votre développement encore plus efficace. Voici un bref
résumé de cet article et ce que vous devez garder à l'esprit quand vous
développerez votre prochain plugin jQuery:</p>
<ul>
<li>Entourez toujours votre plugin par l'auto invocation: (function( $
){ <em>* plugin goes here *</em> })( jQuery );</li>
<li>Ne mettez pas inutilement en sélecteur $() le mot clé <em>this</em>
dans le cadre de votre plugin. this seul, suffit.</li>
<li>à moins de ne retourner qu'une valeur intrinsèque, faites en sorte
que votre fonction de plugin retourne le mot clé <em>this</em> pour
maintenir la continuité.</li>
<li>Plutôt que de requérir une longue suite d'arguments, mettez la
configuration de votre plugin dans un objet javascript dont les valeur
par défaut peuvent être étendues avec extend().</li>
<li>Ne surchargez pas l'objet <em>jQuery.fn</em> avec plus d'un espace
de nom par plugin.</li>
<li>Rangez toujours vos méthodes, évèenments et données dans un seul
espace de nom par plugin.</li>
</ul>
<p>Comme le conseille <a href="https://paulirish.com">Paul Irish</a> un
des auteurs de <a href="https://html5boilerplate.com">Boiler Plate</a>,
consulter <a href="https://code.jquery.com/jquery.js">la source
commentée de jQuery</a> pour comprendre comment elle fonctionne est un
excellent moyen d'apprendre à manier le javascript en profondeur et
développer ses propres solutions.</p>
<p><a
href="https://code.jquery.com/jquery.js">https://code.jquery.com/jquery.js</a></p>
<p>Mettez la en marque page :) à vous de jouer maintenant!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>