# Намиране и извикване на компоненти и плъгини: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE и ADAPT

> Търсете компонентите на страницата по име или път, извиквайте метод на няколко компонента наведнъж, извиквайте функции по име, използвайте два API адреса с TAPI и PIPE, изпълнявайте middleware преди маршрут и заменяйте маркерите на текст.

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

- `FIND(selector, [all])` връща компонент, който е готов: `'notice'` е неговото **име**, `'.msg'` неговият **път** (съвпада с пътищата, които го съдържат) и `'#id'` неговото id; с `all` на `true` връща списъка. `COMPONENTS(path)` връща списъка на готовите компоненти, чийто път е под `path`; флаговете на пътя го филтрират (`'msg @visible'`).
- `SETTER('name/method', a, b, c, d)` извиква `method` на **всеки** готов компонент с това име (`'.path/method'` за път, `'#id/method'` за id, `'*/method'` за всички). Име, което още не е заредено, се зарежда първо (мързелив компонент). `ASETTER(...)` не го извиква: връща функция, която ще го направи.
- `EXE(name, a, b, c, d)` (същото като `EXEC()`) извиква това, което казва името: `'plugin/method'` метод на плъгин, `'function'` глобална функция или път в състоянието, който държи функция (`'FUNC.save'`). `SEEX(name, value)` е същото, но когато името не е функция, **задава** пътя на `value`.
- `TAPI(name, data, callback)` е `API(DEF.api, ...)` и `PIPE(name, data, callback)` е `API(DEF.pipe, ...)`: два адреса на endpoints, които задавате веднъж в `DEF.api` и `DEF.pipe`.
- `MIDDLEWARE(name, function(next) {})` регистрира функция, която се изпълнява преди маршрут: трябва да извика `next()`, за да го пусне нататък. Маршрутът иска един (или повече, разделени със запетаи) като трети аргумент: `ROUTE('/path/', handler, 'name')`. `MIDDLEWARE(['a', 'b'], callback)` изпълнява middleware по ред и после callback; този, който не извика `next()`, спира веригата.
- `NEWUIBIND(element, path, config)` създава `ui-bind` върху елемент от кода (елементът не се нуждае от атрибутите) и го връща.
- `ADAPT(path, id, text)` подготвя текста на компонент, дошъл отвън: превежда `@(...)`, замества `~PATH~` и `CLASS` с пътя и `~ID~` с id, и поставя `path` в таговете `<ui-plugin>`, които нямат такъв. `COMPILE` е същата функция като `NOOP` в jComponent 20: не прави нищо.
- Обектите зад всичко: `jComponent`, `Total`, `MAIN` и `M` са един и същ обект (енджинът: `M.components` е списъкът на компонентите, `M.version` версията), `W` е `window`, `DEF` са стойностите по подразбиране, а `REPO`, `FUNC`, `TEMP` и `PLUGINS` са ваши обикновени обекти: `FUNC` за функции, които `EXE('FUNC.name')` може да извика, `TEMP` се изпразва от jComponent, когато страницата започне отново.

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