mirror of
https://forge.chapril.org/tykayn/orgmode-to-gemini-blog
synced 2025-10-09 17:02:45 +02:00
up
This commit is contained in:
Tykayn
tykayn
parent
0b9f66167c
commit
0a189bd6ad
151 changed files with 18303 additions and 565 deletions
|
|
@ -0,0 +1,491 @@
|
|||
<!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: <2012-09-12 13:20:00></li>
|
||||
<li>modifié: <2014-03-19 13:02:48></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('normal', 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>$('#element').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 = $('div').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 == 'width' ) {
|
||||
$this.width( $this.width()
|
||||
);
|
||||
}
|
||||
if ( !type || type == 'height' ) {
|
||||
$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>$('div').verrouTailles('width').css('color', 'red');
|
||||
</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( { 'location' : 'top', 'background-color' : 'blue' }, 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>$('div').tooltip({ 'location' : 'left' });
|
||||
</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> {
|
||||
'location' : 'left',
|
||||
'background-color' : 'blue'
|
||||
}
|
||||
</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'appel de méthode
|
||||
if ( methods[method] ) {
|
||||
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
||||
} else if ( typeof method === 'object' || ! method ) {
|
||||
return methods.init.apply( this, arguments );
|
||||
}
|
||||
else { $.error( 'La Méthode ' + method + ' n'existe pas dans jQuery.tooltip' ); } };
|
||||
})( jQuery );
|
||||
// appelle la méthode initiatrice
|
||||
$('div').tooltip();
|
||||
// appelle la méthode initiatrice avec une option
|
||||
$('div').tooltip({ foo : 'bar' });
|
||||
// appelle la méthode hide
|
||||
$('div').tooltip('hide');
|
||||
// appelle la méthode update avec une option
|
||||
$('div').tooltip('update', 'This is the new tooltip content!');
|
||||
</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('resize.tooltip', methods.reposition); }); },
|
||||
destroy : function( ) {
|
||||
return this.each(function(){ $(window).unbind('.tooltip');
|
||||
})%% },
|
||||
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 === 'object' || ! method ) {
|
||||
return methods.init.apply( this, arguments );
|
||||
}
|
||||
else {
|
||||
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' ); } };
|
||||
})( jQuery );
|
||||
|
||||
$('#fun').tooltip();
|
||||
// et un peu plus tard...
|
||||
$('#fun').tooltip('destroy');
|
||||
</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('tooltip'),
|
||||
tooltip = $('',
|
||||
{ text : $this.attr('title') }); // si le plugin n'a pas encore été initialisé
|
||||
if ( ! data ) {
|
||||
/* faire des trucs ici */
|
||||
$(this).data('tooltip', { target : $this, tooltip : tooltip });
|
||||
}
|
||||
}); },
|
||||
destroy : function( ) { return this.each(function(){ var $this = $(this), data = $this.data('tooltip');
|
||||
// Namespacing FTW
|
||||
$(window).unbind('.tooltip');
|
||||
data.tooltip.remove();
|
||||
$this.removeData('tooltip');
|
||||
}) },
|
||||
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 === 'object' || ! method ) {
|
||||
return methods.init.apply( this, arguments );
|
||||
}
|
||||
else {
|
||||
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
|
||||
} };
|
||||
})( 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue