Componenten en plugins zoeken en aanroepen: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE en ADAPT

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsapi Uitgevoerd met jComponent 20

FIND(selector, [all]) geeft een component terug dat klaar is: 'notice' is zijn naam, '.msg' zijn pad (het komt overeen met de paden die het bevatten) en '#id' zijn id; met all op true geeft het de lijst terug. COMPONENTS(path) geeft de lijst terug van de gereedstaande componenten waarvan het pad onder path valt; de flags van een pad filteren haar ('msg @visible').
SETTER('name/method', a, b, c, d) roept method aan van elk gereed component met die naam ('.path/method' voor een pad, '#id/method' voor een id, '*/method' voor alle). Een naam die nog niet geladen is, wordt eerst geladen (een lazy component). ASETTER(...) roept het niet aan: het geeft een functie terug die dat zal doen.
EXE(name, a, b, c, d) (hetzelfde als EXEC()) roept aan wat de naam zegt: 'plugin/method' een methode van een plugin, 'function' een globale functie, of een pad in de status dat een functie bevat ('FUNC.save'). SEEX(name, value) is hetzelfde, maar als de naam geen functie is, zet het het pad op value.
TAPI(name, data, callback) is API(DEF.api, ...) en PIPE(name, data, callback) is API(DEF.pipe, ...): twee endpointadressen die je eenmalig instelt in DEF.api en DEF.pipe.
MIDDLEWARE(name, function(next) {}) registreert een functie die vóór een route draait: zij moet next() aanroepen om haar door te laten. Een route vraagt er een (of meer, gescheiden door komma's) als derde argument: ROUTE('/path/', handler, 'name'). MIDDLEWARE(['a', 'b'], callback) voert de middleware in volgorde uit en daarna de callback; een die next() niet aanroept, stopt de keten.
NEWUIBIND(element, path, config) maakt vanuit de code een ui-bind op een element (het element heeft de attributen niet nodig) en geeft het terug.
ADAPT(path, id, text) bereidt de tekst voor van een component dat van buiten komt: het vertaalt @(...), vervangt ~PATH~ en CLASS door het pad en ~ID~ door de id, en zet het path in de <ui-plugin>-tags die er geen hebben. COMPILE is dezelfde functie als NOOP in jComponent 20: hij doet niets.
De objecten achter alles: jComponent, Total, MAIN en M zijn hetzelfde object (de engine: M.components is de lijst met componenten, M.version de versie), W is window, DEF de standaardwaarden, en REPO, FUNC, TEMP en PLUGINS zijn gewone objecten van jou: FUNC voor functies die EXE('FUNC.name') kan aanroepen, TEMP wordt door jComponent geleegd wanneer de pagina opnieuw begint.

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>

Probeer het in je browser

Bewerk het voorbeeld en voer het uit. Het draait in een geïsoleerd frame in je browser; er wordt niets naar onze server gestuurd.

Code

Voorbeeld