Ce que PatrikAkerstrand a dit, est totalement, 100% vrai.
Ce que je veux ajouter ici, c'est un framework en vanilla JS qui peut vous faire gagner beaucoup de temps et d'efforts pour le mettre en œuvre, car tout est pensé, peaufiné et testé. Il ne vous reste plus qu'à définir vos propres widgets et à les utiliser.
Voici un exemple de ce à quoi cela ressemble.
Un code de widget
// inside a js file of a widget class
(function () {
var Module_Path = ["WidgetsLib", "a1", "Button"];
var curr = this;
Module_Path.forEach(function(i){if (curr[i] == null) {addChildToTree(curr, i, {})} curr = curr[i]});
specialize_with(curr, {
CSS_Literal: `
.{{WIDGET_CLASS_ID}}_Something {
color: hsl(0, 0%, 20%);
}
`,
HTML_Literal: `
<div onclick="{{WIDGET_INSTANCE}}.onclick(event)"
class="{{WIDGET_CLASS_ID}}_Something"
>
SOME SUPER COOL WIDGET
</div>
`,
new: typical_widget_new,
});
})();
Un HTML :
<div id="w1" style="background-color: hsl(200, 50%, 50%);"></div>
<script src="WidgetsLib/a1/Button/js"></script>
Un code JavaScript utilisateur :
var b1 = WidgetsLib.a1.Button.new("w1", {
onclick: function(ev) {
ev.target.style.color = "#ffff00";
console.log("====== HERE");
}
});
Veuillez télécharger et ouvrir le fichier Widget_v2.md.html dans un navigateur. https://github.com/latitov/JS_HTML_Widgets .
Ce que vous obtiendrez :
- article très intéressant à ce sujet ;
- des extraits de code et des exemples ;
- prêt à l'emploi... framework en vanilla JS, pour créer vos propres widgets ;
Et appréciez la création de vos propres widgets réutilisables, d'une complexité arbitraire, en toute simplicité !
