Charger une bibliothèque avant qu'un composant démarre

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsdependencies Exécutée avec jComponent 20

Le quatrième argument de COMPONENT() est une liste de dépendances : des URL de scripts (.js) ou de styles (.css) dont le composant a besoin. jComponent télécharge chacune une seule fois, dans l'ordre, et crée le composant une fois qu'elles sont chargées, si bien que make() peut compter sur la présence de la bibliothèque. C'est la façon d'encapsuler une bibliothèque tierce dans un composant sans la charger sur les pages qui ne l'utilisent pas.

public/js/starslib.js

window.starslib = {
	render: function(count) {
		var html = '';
		for (var i = 0; i < count; i++)
			html += '<span class="star">*</span>';
		return html;
	}
};

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<ui-component name="stars" config="count:3"></ui-component>

	<script>

		COMPONENT('stars', 'count:5', function(self, config) {

			self.make = function() {
				// starslib.js was loaded before make()
				self.html(window.starslib.render(config.count));
			};

		}, ['/js/starslib.js']);

	</script>

</body>
</html>

Essayez-le dans votre navigateur

Modifiez l'exemple et exécutez-le. Il s'exécute dans un cadre isolé de votre navigateur ; rien n'est envoyé à notre serveur.

Code

Aperçu