# Komponenten und Plugins finden und aufrufen: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE und ADAPT

> Suche die Komponenten der Seite nach Name oder Pfad, rufe eine Methode mehrerer Komponenten gleichzeitig auf, rufe Funktionen per Namen auf, nutze zwei API-Adressen mit TAPI und PIPE, führe Middleware vor einer Route aus und ersetze die Markierungen eines Textes.

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

- `FIND(selector, [all])` gibt eine Komponente zurück, die bereit ist: `'notice'` ist ihr **Name**, `'.msg'` ihr **Pfad** (er trifft die Pfade, die ihn enthalten) und `'#id'` ihre ID; mit `all` auf `true` gibt es die Liste zurück. `COMPONENTS(path)` gibt die Liste der bereiten Komponenten zurück, deren Pfad unter `path` liegt; die Flags eines Pfads filtern sie (`'msg @visible'`).
- `SETTER('name/method', a, b, c, d)` ruft `method` **jeder** bereiten Komponente mit diesem Namen auf (`'.path/method'` für einen Pfad, `'#id/method'` für eine ID, `'*/method'` für alle). Ein noch nicht geladener Name wird zuerst geladen (eine Lazy-Komponente). `ASETTER(...)` ruft sie nicht auf: Es gibt eine Funktion zurück, die es tun wird.
- `EXE(name, a, b, c, d)` (dasselbe wie `EXEC()`) ruft auf, was der Name sagt: `'plugin/method'` eine Methode eines Plugins, `'function'` eine globale Funktion oder einen Pfad im Zustand, der eine Funktion enthält (`'FUNC.save'`). `SEEX(name, value)` ist dasselbe, aber wenn der Name keine Funktion ist, **setzt** es den Pfad auf `value`.
- `TAPI(name, data, callback)` ist `API(DEF.api, ...)` und `PIPE(name, data, callback)` ist `API(DEF.pipe, ...)`: zwei Endpunkt-Adressen, die du einmal in `DEF.api` und `DEF.pipe` setzt.
- `MIDDLEWARE(name, function(next) {})` registriert eine Funktion, die vor einer Route läuft: Sie muss `next()` aufrufen, um sie weiterzulassen. Eine Route verlangt eine (oder mehrere, durch Kommas getrennt) als dritten Parameter: `ROUTE('/path/', handler, 'name')`. `MIDDLEWARE(['a', 'b'], callback)` führt die Middleware der Reihe nach und dann den Callback aus; eine, die `next()` nicht aufruft, stoppt die Kette.
- `NEWUIBIND(element, path, config)` erstellt aus dem Code ein `ui-bind` auf einem Element (das Element braucht die Attribute nicht) und gibt es zurück.
- `ADAPT(path, id, text)` bereitet den Text einer von außen kommenden Komponente vor: Es übersetzt `@(...)`, ersetzt `~PATH~` und `CLASS` durch den Pfad und `~ID~` durch die ID und setzt den `path` in die `<ui-plugin>`-Tags, die keinen haben. `COMPILE` ist in jComponent 20 dieselbe Funktion wie `NOOP`: Sie tut nichts.
- Die Objekte hinter allem: `jComponent`, `Total`, `MAIN` und `M` sind dasselbe Objekt (die Engine: `M.components` ist die Liste der Komponenten, `M.version` die Version), `W` ist `window`, `DEF` die Standardwerte, und `REPO`, `FUNC`, `TEMP` und `PLUGINS` sind einfache Objekte von dir: `FUNC` für Funktionen, die `EXE('FUNC.name')` aufrufen kann, `TEMP` wird von jComponent geleert, wenn die Seite neu startet.

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