Hľadanie a volanie komponentov a pluginov: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE a ADAPT

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsapi Spustené s jComponent 20

FIND(selector, [all]) vráti komponent, ktorý je pripravený: 'notice' je jeho názov, '.msg' jeho cesta (zodpovedá cestám, ktoré ho obsahujú) a '#id' jeho id; s all nastaveným na true vráti zoznam. COMPONENTS(path) vráti zoznam pripravených komponentov, ktorých cesta je pod path; príznaky cesty ju filtrujú ('msg @visible').
SETTER('name/method', a, b, c, d) zavolá method každého pripraveného komponentu s týmto názvom ('.path/method' pre cestu, '#id/method' pre id, '*/method' pre všetky). Názov, ktorý ešte nie je načítaný, sa najprv načíta (lenivý komponent). ASETTER(...) ho nevolá: vráti funkciu, ktorá to urobí.
EXE(name, a, b, c, d) (rovnaké ako EXEC()) zavolá to, čo hovorí názov: 'plugin/method' metódu pluginu, 'function' globálnu funkciu, alebo cestu v stave, ktorá drží funkciu ('FUNC.save'). SEEX(name, value) je to isté, ale keď názov nie je funkcia, nastaví cestu na value.
TAPI(name, data, callback) je API(DEF.api, ...) a PIPE(name, data, callback) je API(DEF.pipe, ...): dve adresy endpointov, ktoré nastavíte raz v DEF.api a DEF.pipe.
MIDDLEWARE(name, function(next) {}) zaregistruje funkciu, ktorá sa spustí pred routou: musí zavolať next(), aby ju pustila ďalej. Routa si pýta jeden (alebo viac, oddelených čiarkami) ako tretí argument: ROUTE('/path/', handler, 'name'). MIDDLEWARE(['a', 'b'], callback) spustí middleware v poradí a potom callback; ten, ktorý nezavolá next(), reťaz zastaví.
NEWUIBIND(element, path, config) vytvorí ui-bind na elemente z kódu (element nepotrebuje atribúty) a vráti ho.
ADAPT(path, id, text) pripraví text komponentu, ktorý prichádza zvonku: preloží @(...), nahradí ~PATH~ a CLASS cestou a ~ID~ id, a vloží path do značiek <ui-plugin>, ktoré ho nemajú. COMPILE je tá istá funkcia ako NOOP v jComponent 20: nerobí nič.
Objekty za všetkým: jComponent, Total, MAIN a M sú ten istý objekt (engine: M.components je zoznam komponentov, M.version verzia), W je window, DEF predvolené hodnoty a REPO, FUNC, TEMP a PLUGINS sú vaše jednoduché objekty: FUNC pre funkcie, ktoré EXE('FUNC.name') môže volať, TEMP vyprázdni jComponent, keď sa stránka spustí znova.

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>

Vyskúšajte to vo svojom prehliadači

Upravte príklad a spustite ho. Beží v izolovanom ráme vo vašom prehliadači; na náš server sa nič neposiela.

Kód

Náhľad