Εύρεση και κλήση στοιχείων και plugins: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE και ADAPT

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

Το FIND(selector, [all]) επιστρέφει ένα στοιχείο που είναι έτοιμο: το 'notice' είναι το όνομά του, το '.msg' η διαδρομή του (ταιριάζει με τις διαδρομές που το περιέχουν) και το '#id' το id του· με το all στο true επιστρέφει τη λίστα. Το COMPONENTS(path) επιστρέφει τη λίστα των έτοιμων στοιχείων των οποίων η διαδρομή είναι κάτω από το path· οι σημαίες μιας διαδρομής τη φιλτράρουν ('msg @visible').
Το SETTER('name/method', a, b, c, d) καλεί το method κάθε έτοιμου στοιχείου με αυτό το όνομα ('.path/method' για διαδρομή, '#id/method' για id, '*/method' για όλα). Ένα όνομα που δεν έχει φορτωθεί ακόμη φορτώνεται πρώτα (ένα lazy στοιχείο). Το ASETTER(...) δεν το καλεί: επιστρέφει μια συνάρτηση που θα το κάνει.
Το EXE(name, a, b, c, d) (το ίδιο με το EXEC()) καλεί ό,τι λέει το όνομα: 'plugin/method' μια μέθοδο ενός plugin, 'function' μια καθολική συνάρτηση ή μια διαδρομή στην κατάσταση που κρατά μια συνάρτηση ('FUNC.save'). Το SEEX(name, value) είναι το ίδιο, αλλά όταν το όνομα δεν είναι συνάρτηση ορίζει τη διαδρομή σε value.
Το TAPI(name, data, callback) είναι API(DEF.api, ...) και το PIPE(name, data, callback) είναι API(DEF.pipe, ...): δύο διευθύνσεις endpoints που ορίζετε μία φορά στα DEF.api και DEF.pipe.
Το MIDDLEWARE(name, function(next) {}) καταχωρίζει μια συνάρτηση που εκτελείται πριν από μια διαδρομή: πρέπει να καλέσει το next() για να την αφήσει να συνεχίσει. Μια διαδρομή ζητά ένα (ή περισσότερα, χωρισμένα με κόμματα) ως τρίτο όρισμα: ROUTE('/path/', handler, 'name'). Το MIDDLEWARE(['a', 'b'], callback) εκτελεί τα middleware με τη σειρά και μετά το callback· ένα που δεν καλεί το next() σταματά την αλυσίδα.
Το NEWUIBIND(element, path, config) δημιουργεί ένα ui-bind σε ένα στοιχείο από τον κώδικα (το στοιχείο δεν χρειάζεται τα χαρακτηριστικά) και το επιστρέφει.
Το ADAPT(path, id, text) προετοιμάζει το κείμενο ενός στοιχείου που έρχεται απ᾽ έξω: μεταφράζει τα @(...), αντικαθιστά τα ~PATH~ και CLASS με τη διαδρομή και το ~ID~ με το id, και βάζει το path στις ετικέτες <ui-plugin> που δεν έχουν. Το COMPILE είναι η ίδια συνάρτηση με το NOOP στο jComponent 20: δεν κάνει τίποτα.
Τα αντικείμενα πίσω από τα πάντα: τα jComponent, Total, MAIN και M είναι το ίδιο αντικείμενο (η μηχανή: το M.components είναι η λίστα των στοιχείων, το M.version η έκδοση), το W είναι το window, το DEF οι προεπιλογές, και τα REPO, FUNC, TEMP και PLUGINS είναι απλά δικά σας αντικείμενα: το FUNC για συναρτήσεις που μπορεί να καλέσει το EXE('FUNC.name'), το TEMP αδειάζει το jComponent όταν η σελίδα ξεκινά ξανά.

definitions/math.js

NEWACTION('Math/add', {
	name: 'Add two numbers',
	input: '*a:Number, *b:Number',
	action: function($, model) {
		$.callback({ sum: model.a + model.b });
	}
});

controllers/api.js

exports.install = function() {
	ROUTE('API /api/ +math_add --> Math/add');
	ROUTE('API /pipe/ +math_add --> Math/add');
};

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="notice" path="msg"></ui-component>
	<ui-component name="notice" path="other"></ui-component>
	<ui-plugin path="shop"></ui-plugin>
	<p id="target">x</p>
	<script>

		COMPONENT('notice', function(self) {
			self.make = function() { self.element.html('<b></b>'); };
			self.say = function(text, extra) { self.find('b').text(text + (extra || '')); };
		});

		PLUGIN('shop', function(exports) {
			exports.hello = function(a) { window.shoplog = 'hello ' + a; };
		});

		window.globalfn = function(a, b) { window.globallog = [a, b]; };
		FUNC.local = function(a) { window.funclog = a; };

		DEF.api = '/api/';
		DEF.pipe = '/pipe/';

	</script>
</body>
</html>

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

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

Κώδικας

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