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

> Keresd meg az oldal komponenseit név vagy útvonal szerint, hívd meg több komponens egy metódusát egyszerre, hívj függvényeket név alapján, használj két API-címet a TAPI és PIPE segítségével, futtass middleware-t egy útvonal előtt, és cseréld le egy szöveg jelölőit.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: hu
Content-SHA256: 225e8db6f098bf3426215ed016e8f9e124af04ee7dcdfb43a47f3bb4812615f5
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

- 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.

```js definitions/math.js
NEWACTION('Math/add', {
	name: 'Add two numbers',
	input: '*a:Number, *b:Number',
	action: function($, model) {
		$.callback({ sum: model.a + model.b });
	}
});
```

```js controllers/api.js
exports.install = function() {
	ROUTE('API /api/ +math_add --> Math/add');
	ROUTE('API /pipe/ +math_add --> Math/add');
};
```

```html 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>
```