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

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsapi Mit jComponent 20 ausgeführt

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.

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>

Probiere es in deinem Browser aus

Bearbeite das Beispiel und führe es aus. Es läuft in einem isolierten Frame in deinem Browser; nichts wird an unseren Server gesendet.

Code

Vorschau