Réutilisabilité : exemple #01

Posted on 25/01/2015 by Zoo ma'n

En informatique et au sens large, la réutilisabilité (Reusability) est la capacité d’une portions de code à être réutilisée telle quelle dans un programme. L’usage de fonctions est un exemple simple de la réutilisabilité. A la question « Quel est le but principal de la factorisation du code? » La réponse est simple : écrire une seule fois pour utiliser plusieurs fois. On peut donc dire que toutes les techniques qui permettent d’écrire qu’une seule fois une séquence d’instructions et de les utiliser autant de fois qu’on le souhaite à différents endroits de notre programme rentre dans le cadre de la réutilisabilité. On peut également envisager cette réutilisabilité entre deux programmes totalement indépendants.

Réutilisabilité

Dans une première partie nous présenterons un exemple simple de réutilisabilité dynamique côté client d’une portion de code HTML à l’aide du JavaScript. Il s’agira de permettre à l’utilisateur d’insérer dans la page le même contenu HTML à différent endroit de la page.

La première chose à faire est de disposer de plusieurs éléments HTML tel que des balises DIV en leur attribuant un identifiant unique.

<!DOCTYPE html>
<head>
        <meta charset="utf-8" />
        <title>Réutilisabilité Exemple 001</title>
</head>
<body>
<div id="myDiv"></div>
<div id="myOtherDiv"></div>
</body>
</html>

Code HTML

Ensuite il faut ajouter le code JavaScript qui va s’exécuter au chargement de la page et insérer dans les balises DIV le code HTML réutilisable. Le code Javascript ci-dessous devra être inséré entre les balises HEAD.

<script type="text/javascript">
//<![CDATA[
    window.onload = function(){
    // Le code réutilisable
    var myReusableCode = "<span class='message'>Hello guys, I'm a reusable HTML code</span>";
    // On récupère la première balise DIV dans laquelle nous allons insérer le code
    myDiv = document.getElementById('myDiv');
    // On insére dans la première div le contenu voulu
    myDiv.innerHTML = myReusableCode;
    // On récupère l'autre balise DIV dans laquelle nous allons insérer le code
    myOtherDiv = document.getElementById('myOtherDiv');
    // On insére dans l'autre balise div le contenu voulu
    myOtherDiv.innerHTML = myReusableCode;
    }
    // ]]>
</script>

Code JavaScript

Pour tester : reusability-example-001

Nous verrons prochainement dans d’autres exemples de plus en plus évolués l’intérêt de ce genre d’approche dans des cas réels.