# Găsește și apelează componente și pluginuri: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE și ADAPT

> Caută componentele paginii după nume sau cale, apelează o metodă a mai multor componente deodată, apelează funcții după nume, folosește două adrese API cu TAPI și PIPE, rulează middleware înainte de o rută și înlocuiește marcajele unui text.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: ro
Content-SHA256: 7fa2384ed6c4c592230d68a1b6d1320ad636a11e410a0543ca5f82a968455daa
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

- `FIND(selector, [all])` returnează o componentă care este gata: `'notice'` este **numele** ei, `'.msg'` **calea** ei (se potrivește cu căile care o conțin) și `'#id'` id-ul ei; cu `all` pe `true` returnează lista. `COMPONENTS(path)` returnează lista componentelor gata a căror cale este sub `path`; flagurile unei căi o filtrează (`'msg @visible'`).
- `SETTER('name/method', a, b, c, d)` apelează `method` al **fiecărei** componente gata cu acel nume (`'.path/method'` pentru o cale, `'#id/method'` pentru un id, `'*/method'` pentru toate). Un nume care nu e încă încărcat este încărcat mai întâi (o componentă lazy). `ASETTER(...)` nu o apelează: returnează o funcție care o va face.
- `EXE(name, a, b, c, d)` (la fel ca `EXEC()`) apelează ce spune numele: `'plugin/method'` o metodă a unui plugin, `'function'` o funcție globală sau o cale din stare care ține o funcție (`'FUNC.save'`). `SEEX(name, value)` este la fel, dar când numele nu este o funcție **setează** calea la `value`.
- `TAPI(name, data, callback)` este `API(DEF.api, ...)` și `PIPE(name, data, callback)` este `API(DEF.pipe, ...)`: două adrese de endpoint-uri pe care le setezi o dată în `DEF.api` și `DEF.pipe`.
- `MIDDLEWARE(name, function(next) {})` înregistrează o funcție care rulează înaintea unei rute: trebuie să apeleze `next()` pentru a o lăsa să continue. O rută cere una (sau mai multe, separate prin virgule) ca al treilea argument: `ROUTE('/path/', handler, 'name')`. `MIDDLEWARE(['a', 'b'], callback)` rulează middleware-urile în ordine și apoi callback-ul; unul care nu apelează `next()` oprește lanțul.
- `NEWUIBIND(element, path, config)` creează din cod un `ui-bind` pe un element (elementul nu are nevoie de atribute) și îl returnează.
- `ADAPT(path, id, text)` pregătește textul unei componente venite din exterior: traduce `@(...)`, înlocuiește `~PATH~` și `CLASS` cu calea și `~ID~` cu id-ul, și pune `path` în etichetele `<ui-plugin>` care nu au unul. `COMPILE` este aceeași funcție ca `NOOP` în jComponent 20: nu face nimic.
- Obiectele din spatele tuturor: `jComponent`, `Total`, `MAIN` și `M` sunt același obiect (motorul: `M.components` este lista componentelor, `M.version` versiunea), `W` este `window`, `DEF` valorile implicite, iar `REPO`, `FUNC`, `TEMP` și `PLUGINS` sunt obiecte simple ale tale: `FUNC` pentru funcții pe care `EXE('FUNC.name')` le poate apela, `TEMP` este golit de jComponent când pagina pornește din nou.

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