Trouver et appeler composants et plugins : FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE et ADAPT

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

FIND(selector, [all]) renvoie un composant prêt : 'notice' est son nom, '.msg' son chemin (il correspond aux chemins qui le contiennent) et '#id' son id ; avec all à true il renvoie la liste. COMPONENTS(path) renvoie la liste des composants prêts dont le chemin est sous path ; les drapeaux d'un chemin la filtrent ('msg @visible').
SETTER('name/method', a, b, c, d) appelle method de chaque composant prêt portant ce nom ('.path/method' pour un chemin, '#id/method' pour un id, '*/method' pour tous). Un nom qui n'est pas encore chargé est d'abord chargé (un composant paresseux). ASETTER(...) ne l'appelle pas : il renvoie une fonction qui le fera.
EXE(name, a, b, c, d) (comme EXEC()) appelle ce que dit le nom : 'plugin/method' une méthode d'un plugin, 'function' une fonction globale, ou un chemin de l'état qui contient une fonction ('FUNC.save'). SEEX(name, value) est pareil, mais quand le nom n'est pas une fonction il met le chemin à value.
TAPI(name, data, callback) est API(DEF.api, ...) et PIPE(name, data, callback) est API(DEF.pipe, ...) : deux adresses de points de terminaison que vous définissez une fois dans DEF.api et DEF.pipe.
MIDDLEWARE(name, function(next) {}) enregistre une fonction qui s'exécute avant une route : elle doit appeler next() pour la laisser continuer. Une route en demande une (ou plusieurs, séparées par des virgules) comme troisième argument : ROUTE('/path/', handler, 'name'). MIDDLEWARE(['a', 'b'], callback) exécute les middlewares dans l'ordre puis le callback ; un middleware qui n'appelle pas next() arrête la chaîne.
NEWUIBIND(element, path, config) crée un ui-bind sur un élément depuis le code (l'élément n'a pas besoin des attributs) et le renvoie.
ADAPT(path, id, text) prépare le texte d'un composant venu de l'extérieur : il traduit @(...), remplace ~PATH~ et CLASS par le chemin et ~ID~ par l'id, et met le path dans les balises <ui-plugin> qui n'en ont pas. COMPILE est la même fonction que NOOP dans jComponent 20 : elle ne fait rien.
Les objets derrière tout : jComponent, Total, MAIN et M sont le même objet (le moteur : M.components est la liste des composants, M.version la version), W est window, DEF les valeurs par défaut, et REPO, FUNC, TEMP et PLUGINS sont des objets simples à vous : FUNC pour les fonctions que EXE('FUNC.name') peut appeler, TEMP est vidé par jComponent quand la page redémarre.

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>

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