Φόρτωση μιας βιβλιοθήκης πριν ξεκινήσει ένα συστατικό

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsdependencies Εκτελέστηκε με jComponent 20

Το τέταρτο όρισμα του COMPONENT() είναι μια λίστα εξαρτήσεων: URL scripts (.js) ή στυλ (.css) που χρειάζεται το συστατικό. Το jComponent κατεβάζει κάθε ένα μόνο μία φορά, με τη σειρά, και δημιουργεί το συστατικό αφού φορτωθούν, ώστε το make() να μπορεί να βασιστεί ότι η βιβλιοθήκη υπάρχει. Έτσι τυλίγετε μια βιβλιοθήκη τρίτου σε συστατικό χωρίς να τη φορτώνετε σε σελίδες που δεν τη χρησιμοποιούν.

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>

Δοκιμάστε το στον browser σας

Επεξεργαστείτε το παράδειγμα και εκτελέστε το. Εκτελείται σε απομονωμένο πλαίσιο στον browser σας· τίποτα δεν στέλνεται στον διακομιστή μας.

Κώδικας

Προεπισκόπηση