Hledání a volání komponent a pluginů: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE a ADAPT

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsapi Spuštěno s jComponent 20

FIND(selector, [all]) vrátí komponentu, která je připravená: 'notice' je její název, '.msg' její cesta (odpovídá cestám, které ji obsahují) a '#id' její id; s all nastaveným na true vrátí seznam. COMPONENTS(path) vrátí seznam připravených komponent, jejichž cesta je pod path; příznaky cesty ji filtrují ('msg @visible').
SETTER('name/method', a, b, c, d) zavolá method každé připravené komponenty s tímto názvem ('.path/method' pro cestu, '#id/method' pro id, '*/method' pro všechny). Název, který ještě není načten, se nejprve načte (líná komponenta). ASETTER(...) ji nevolá: vrátí funkci, která to udělá.
EXE(name, a, b, c, d) (totéž co EXEC()) zavolá to, co říká název: 'plugin/method' metodu pluginu, 'function' globální funkci, nebo cestu ve stavu, která drží funkci ('FUNC.save'). SEEX(name, value) je totéž, ale když název není funkce, nastaví cestu na value.
TAPI(name, data, callback) je API(DEF.api, ...) a PIPE(name, data, callback) je API(DEF.pipe, ...): dvě adresy endpointů, které nastavíte jednou v DEF.api a DEF.pipe.
MIDDLEWARE(name, function(next) {}) zaregistruje funkci, která se spustí před routou: musí zavolat next(), aby ji pustila dál. Routa si říká o jeden (nebo více, oddělených čárkami) jako třetí argument: ROUTE('/path/', handler, 'name'). MIDDLEWARE(['a', 'b'], callback) spustí middleware v pořadí a poté callback; ten, který nezavolá next(), řetězec zastaví.
NEWUIBIND(element, path, config) vytvoří ui-bind na elementu z kódu (element nepotřebuje atributy) a vrátí jej.
ADAPT(path, id, text) připraví text komponenty, která přichází zvenčí: přeloží @(...), nahradí ~PATH~ a CLASS cestou a ~ID~ id, a vloží path do značek <ui-plugin>, které ji nemají. COMPILE je táž funkce jako NOOP v jComponent 20: nedělá nic.
Objekty za vším: jComponent, Total, MAIN a M jsou týž objekt (engine: M.components je seznam komponent, M.version verze), W je window, DEF výchozí hodnoty a REPO, FUNC, TEMP a PLUGINS jsou vaše jednoduché objekty: FUNC pro funkce, které EXE('FUNC.name') může volat, TEMP vyprázdní jComponent, když se stránka spustí znovu.

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>

Vyzkoušejte to ve svém prohlížeči

Upravte příklad a spusťte ho. Běží v izolovaném rámu ve vašem prohlížeči; na náš server se nic neposílá.

Kód

Náhled