Eine Bibliothek laden, bevor eine Komponente startet

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsdependencies Mit jComponent 20 ausgeführt

Das vierte Argument von COMPONENT() ist eine Liste von Abhängigkeiten: URLs von Skripten (.js) oder Stilen (.css), die die Komponente braucht. jComponent lädt jede nur einmal, der Reihe nach, und erstellt die Komponente, nachdem sie geladen sind, sodass sich make() darauf verlassen kann, dass die Bibliothek da ist. So verpackst du eine Drittanbieter-Bibliothek in eine Komponente, ohne sie auf Seiten zu laden, die sie nicht nutzen.

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>

Probiere es in deinem Browser aus

Bearbeite das Beispiel und führe es aus. Es läuft in einem isolierten Frame in deinem Browser; nichts wird an unseren Server gesendet.

Code

Vorschau