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

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsapi Uruchomiono z jComponent 20

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.

definitions/math.js

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

controllers/api.js

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

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>

Wypróbuj w przeglądarce

Edytuj przykład i uruchom go. Działa w izolowanej ramce w Twojej przeglądarce; nic nie jest wysyłane na nasz serwer.

Kod

Podgląd