Faisons connaissance avec jQuery
jQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités. Cela simplifie considérablement la navigation et la manipulation de documents HTML, la gestion des événements, l’animation et Ajax avec une API facile à utiliser qui fonctionne sur une multitude de navigateurs. Avec une combinaison de polyvalence et d’extensibilité, jQuery a changé la façon dont des millions de personnes écrivent JavaScript.
Faisons connaissance avec le modèle jQuery
jQuery Template nous donne une option ou un support pour afficher et manipuler le contenu sur le navigateur. En utilisant le modèle jQuery, nous pouvons restituer la chaîne JSON aux éléments HTML. Prenons un exemple simple, nous pouvons utiliser jQuery Template pour afficher un ensemble d’enregistrements que nous avons obtenus à partir d’une requête Ajax.
Un exemple de base de modèles jQuery
Nous créons maintenant une page simple à l’aide de modèles jQuery. Nous n’utiliserons que le plugin jQuery. Dans cet exemple, nous allons vous montrer comment créer un modèle et restituer le contenu à partir du JSON.
Exigence
Comprenons d’abord l’exigence. Supposons que nous devions créer une page Web comme le site Web KnowBand pour vendre les modules de la plate-forme de commerce électronique comme Opencart, Prestashop, etc. Nous avons des modules ou plugins de commerce électronique que nous voulons répertorier sur le site KnowBand. Ainsi, sur la page de liste, nous afficherons le nom, l’image et le prix du module. Nous utiliserons la chaîne JSON ci-dessous pour répertorier les données :
[ { "name": "Product tabs- PrestashopAddons", "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Product-Tabs-logo-1000- x-1000.jpg", "module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs", "price": "$25" }, { "name": "Application mobile Prestashop constructeur", "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Mobile-app-prestashop-plugin-500-X-500.jpg", " module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder", "price": "$30" }, { "name": "Return Manager - Extensions Magento", "image_url " : "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/return-manager.png", "module_url": "https:\/\/www.knowband.com \/magento-return-manager", "price": "$50" }, { "name": "Web Push Notification - PrestashopAddons", "image_url": "https:\/\/www.knowband.com\/image \/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg", "module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications", "prix ": "$43" } ]
-
En utilisant la balise de script HTML
Dans cette méthode, nous écrirons du code HTML dans la balise script. Le code complet est donné ci-dessous :
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<script id="blog" type="template">
<div class="col-md-3">
<a href="{{module_url}}">
<div class="thumbnail">
<imgsrc="{{image_url}}" class="img-rounded img-responsive" width="100%"></img>
<div class="caption">
<p class="lead">{{price}}</p>
<p>{{name}}</p>
</div>
</div>
</a>
</div>
</script>
</div>
<script>
$(function () {
varknoband_data = [
{
"name": "Product tabs- PrestashopAddons",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Product-Tabs-logo-1000-x-1000.jpg",
"module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs",
"price": "$25"
},
{
"name": "Prestashop Mobile App builder",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Mobile-app-prestashop-plugin-500-X-500.jpg",
"module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder",
"price": "$30"
},
{
"name": "Return Manager - Magento Extensions",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/return-manager.png",
"module_url": "https:\/\/www.knowband.com\/magento-return-manager",
"price": "$50"
},
{
"name": "Web Push Notification - PrestashopAddons",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg",
"module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications",
"price": "$43"
}
];
var temp = $.trim($('#blog').html());
$.each(knoband_data, function (index, obj) {
var x = temp.replace(/{{name}}/ig, obj.name);
x = x.replace(/{{image_url}}/ig, obj.image_url);
x = x.replace(/{{price}}/ig, obj.price);
x = x.replace(/{{module_url}}/ig, obj.module_url);
$('.container').append(x);
});
});
</script>
</body>
</html>
Nous avons créé une vignette à l’intérieur de la balise de script, c’est-à-dire la balise de script #blog, et elle a été utilisée comme modèle. Dans le code ci-dessus, nous avons utilisé {{ }} pour les variables génériques. Comprenons en fait ce que nous avons fait dans le code ci-dessus :
var temp = $.trim($('#blog').html()); // Il chargera tout le contenu de la balise de script #blog dans une variable temporaire. var x = temp.replace(/{{name}}/ig, obj.name); // Remplacement de la variable générique {{name}} par les données correspondantes du JSON. x = x.replace(/{{image_url}}/ig, obj.image_url); // Remplacement de la variable générique {{image_url}} par les données correspondantes du JSON. x = x.replace(/{{prix}}/ig, obj.prix); // Remplacement de la variable générique {{price}} par les données correspondantes du JSON. x = x.replace(/{{module_url}}/ig, obj.module_url); // Remplacement de la variable générique {{module_url}} par les données correspondantes du JSON. $('.container').append(x); // a ajouté le contenu au conteneur div.
Dans cette technique, nous ajouterons le contenu dans le HTML après avoir rempli les données à l’aide de la technique d’espace réservé jQuery. Le code complet est donné ci-dessous :
$(function() {
varknoband_data = [
{
"name": "Product tabs- PrestashopAddons",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%3.3.7Logo\/Product-Tabs-logo-3.2.1-x-20.jpg",
"module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs",
"price": "$1000"
},
{
"name": "Prestashop Mobile App builder",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%1000Logo\/Mobile-app-prestashop-plugin-25-X-20.jpg",
"module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder",
"price": "$500"
},
{
"name": "Return Manager - Magento Extensions",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%500Logo\/return-manager.png",
"module_url": "https:\/\/www.knowband.com\/magento-return-manager",
"price": "$30"
},
{
"name": "Web Push Notification - PrestashopAddons",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg",
"module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications",
"price": "$50"
}
];
$.each(knoband_data, function(index, obj) {
$('.container').append(
`
${obj.price}
${obj.name}
`
);
});
});
Dans l’exemple ci-dessus, nous avons utilisé ` (back-tick) comme littéral de modèle et ${ } comme espace réservé. Lorsque nous comparons la méthode 1 à la méthode 2, nous pouvons facilement dire que le modèle littéral et l’espace réservé facilitent notre tâche. Dans cet exemple, nous avons écrit le code du modèle dans une boucle et remplacé nos espaces réservés par ses données correspondantes.
Résumé
Pour en savoir plus sur les modèles jQuery, je vous recommande de consulter la documentation des modèles jQuery sur le site Web officiel de jQuery.
