Komponensek és pluginok keresése és hívása: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE és ADAPT

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsapi Futtatva a jComponent 20-szal

A FIND(selector, [all]) olyan komponenst ad vissza, amely kész: a 'notice' a neve, a '.msg' az útvonala (azokra az útvonalakra illeszkedik, amelyek tartalmazzák) és a '#id' az azonosítója; all esetén true értékkel a listát adja vissza. A COMPONENTS(path) a kész komponensek listáját adja vissza, amelyek útvonala a path alatt van; az útvonal flagjei szűrik ('msg @visible').
A SETTER('name/method', a, b, c, d) meghívja a method metódust minden kész, ilyen nevű komponensen ('.path/method' útvonalhoz, '#id/method' azonosítóhoz, '*/method' az összeshez). A még nem betöltött nevet előbb betölti (lusta komponens). Az ASETTER(...) nem hívja meg: egy függvényt ad vissza, amely meg fogja tenni.
Az EXE(name, a, b, c, d) (ugyanaz, mint az EXEC()) azt hívja meg, amit a név mond: 'plugin/method' egy plugin metódusát, 'function' egy globális függvényt, vagy az állapotban egy függvényt tartó útvonalat ('FUNC.save'). A SEEX(name, value) ugyanez, de ha a név nem függvény, az útvonalat value értékre állítja.
A TAPI(name, data, callback) az API(DEF.api, ...), a PIPE(name, data, callback) pedig az API(DEF.pipe, ...): két végpontcím, amelyeket egyszer állítasz be a DEF.api és DEF.pipe helyen.
A MIDDLEWARE(name, function(next) {}) regisztrál egy függvényt, amely egy útvonal előtt fut: meg kell hívnia a next() függvényt, hogy továbbengedje. Egy útvonal harmadik argumentumként kér egyet (vagy többet, vesszővel elválasztva): ROUTE('/path/', handler, 'name'). A MIDDLEWARE(['a', 'b'], callback) sorrendben futtatja a middleware-eket, majd a callbacket; amelyik nem hívja meg a next() függvényt, megállítja a láncot.
A NEWUIBIND(element, path, config) kódból hoz létre ui-bind elemet egy elemen (az elemnek nincs szüksége az attribútumokra), és visszaadja.
Az ADAPT(path, id, text) előkészíti egy kívülről érkező komponens szövegét: lefordítja az @(...) részeket, a ~PATH~ és CLASS jelölőket az útvonalra, a ~ID~ jelölőt az azonosítóra cseréli, és a path értéket beírja azokba a <ui-plugin> címkékbe, amelyekben nincs. A COMPILE ugyanaz a függvény, mint a NOOP a jComponent 20-ban: nem csinál semmit.
A mindent mozgató objektumok: a jComponent, Total, MAIN és M ugyanaz az objektum (a motor: az M.components a komponensek listája, az M.version a verzió), a W a window, a DEF az alapértékek, a REPO, FUNC, TEMP és PLUGINS pedig a te egyszerű objektumaid: a FUNC olyan függvényekhez, amelyeket az EXE('FUNC.name') meghívhat, a TEMP-et a jComponent kiüríti, amikor az oldal újraindul.

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>

Próbáld ki a böngésződben

Szerkeszd a példát, és futtasd. A böngésződ egy izolált keretében fut; semmi nem kerül a szerverünkre.

Kód

Előnézet