# Znajdowanie i wywoływanie komponentów i pluginów: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE i ADAPT

> Szukaj komponentów strony według nazwy lub ścieżki, wywołuj metodę wielu komponentów naraz, wywołuj funkcje po nazwie, używaj dwóch adresów API z TAPI i PIPE, uruchamiaj middleware przed trasą i zastępuj znaczniki w tekście.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: pl
Content-SHA256: 880e54275f13d4cdcb6bc7c6cb79e9785202fd5c4184c6dffd6efa3f67ac2726
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

- `FIND(selector, [all])` zwraca komponent, który jest gotowy: `'notice'` to jego **nazwa**, `'.msg'` jego **ścieżka** (pasuje do ścieżek, które ją zawierają), a `'#id'` jego id; z `all` ustawionym na `true` zwraca listę. `COMPONENTS(path)` zwraca listę gotowych komponentów, których ścieżka jest pod `path`; flagi ścieżki ją filtrują (`'msg @visible'`).
- `SETTER('name/method', a, b, c, d)` wywołuje `method` **każdego** gotowego komponentu o tej nazwie (`'.path/method'` dla ścieżki, `'#id/method'` dla id, `'*/method'` dla wszystkich). Nazwa, która nie jest jeszcze załadowana, jest najpierw ładowana (leniwy komponent). `ASETTER(...)` go nie wywołuje: zwraca funkcję, która to zrobi.
- `EXE(name, a, b, c, d)` (to samo co `EXEC()`) wywołuje to, co mówi nazwa: `'plugin/method'` metodę pluginu, `'function'` funkcję globalną lub ścieżkę w stanie, która trzyma funkcję (`'FUNC.save'`). `SEEX(name, value)` jest tym samym, ale gdy nazwa nie jest funkcją, **ustawia** ścieżkę na `value`.
- `TAPI(name, data, callback)` to `API(DEF.api, ...)`, a `PIPE(name, data, callback)` to `API(DEF.pipe, ...)`: dwa adresy endpointów, które ustawiasz raz w `DEF.api` i `DEF.pipe`.
- `MIDDLEWARE(name, function(next) {})` rejestruje funkcję uruchamianą przed trasą: musi wywołać `next()`, aby ją przepuścić. Trasa prosi o jedną (lub więcej, rozdzielonych przecinkami) jako trzeci argument: `ROUTE('/path/', handler, 'name')`. `MIDDLEWARE(['a', 'b'], callback)` uruchamia middleware po kolei, a potem callback; ten, który nie wywoła `next()`, zatrzymuje łańcuch.
- `NEWUIBIND(element, path, config)` tworzy `ui-bind` na elemencie z kodu (element nie potrzebuje atrybutów) i go zwraca.
- `ADAPT(path, id, text)` przygotowuje tekst komponentu przychodzącego z zewnątrz: tłumaczy `@(...)`, zastępuje `~PATH~` i `CLASS` ścieżką, a `~ID~` id, i wstawia `path` do znaczników `<ui-plugin>`, które go nie mają. `COMPILE` to ta sama funkcja co `NOOP` w jComponent 20: nic nie robi.
- Obiekty za wszystkim: `jComponent`, `Total`, `MAIN` i `M` to ten sam obiekt (silnik: `M.components` to lista komponentów, `M.version` wersja), `W` to `window`, `DEF` wartości domyślne, a `REPO`, `FUNC`, `TEMP` i `PLUGINS` to Twoje zwykłe obiekty: `FUNC` dla funkcji, które `EXE('FUNC.name')` może wywołać, `TEMP` jComponent opróżnia, gdy strona startuje od nowa.

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