Trovare e chiamare componenti e plugin: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE e ADAPT

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsapi Eseguita con jComponent 20

FIND(selector, [all]) restituisce un componente pronto: 'notice' è il suo nome, '.msg' il suo percorso (corrisponde ai percorsi che lo contengono) e '#id' il suo id; con all a true restituisce la lista. COMPONENTS(path) restituisce la lista dei componenti pronti il cui percorso è sotto path; i flag di un percorso la filtrano ('msg @visible').
SETTER('name/method', a, b, c, d) chiama method di ogni componente pronto con quel nome ('.path/method' per un percorso, '#id/method' per un id, '*/method' per tutti). Un nome non ancora caricato viene caricato prima (un componente lazy). ASETTER(...) non lo chiama: restituisce una funzione che lo farà.
EXE(name, a, b, c, d) (come EXEC()) chiama ciò che dice il nome: 'plugin/method' un metodo di un plugin, 'function' una funzione globale, o un percorso nello stato che contiene una funzione ('FUNC.save'). SEEX(name, value) è uguale, ma quando il nome non è una funzione imposta il percorso a value.
TAPI(name, data, callback) è API(DEF.api, ...) e PIPE(name, data, callback) è API(DEF.pipe, ...): due indirizzi di endpoint che imposti una volta in DEF.api e DEF.pipe.
MIDDLEWARE(name, function(next) {}) registra una funzione che viene eseguita prima di una route: deve chiamare next() per lasciarla proseguire. Una route ne richiede una (o più, separate da virgole) come terzo argomento: ROUTE('/path/', handler, 'name'). MIDDLEWARE(['a', 'b'], callback) esegue i middleware in ordine e poi il callback; uno che non chiama next() ferma la catena.
NEWUIBIND(element, path, config) crea un ui-bind su un elemento dal codice (l'elemento non ha bisogno degli attributi) e lo restituisce.
ADAPT(path, id, text) prepara il testo di un componente che viene da fuori: traduce @(...), sostituisce ~PATH~ e CLASS con il percorso e ~ID~ con l'id, e mette il path nei tag <ui-plugin> che non ce l'hanno. COMPILE è la stessa funzione di NOOP in jComponent 20: non fa nulla.
Gli oggetti dietro a tutto: jComponent, Total, MAIN e M sono lo stesso oggetto (il motore: M.components è la lista dei componenti, M.version la versione), W è window, DEF i valori predefiniti, e REPO, FUNC, TEMP e PLUGINS sono oggetti semplici tuoi: FUNC per funzioni che EXE('FUNC.name') può chiamare, TEMP viene svuotato da jComponent quando la pagina riparte.

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>

Provalo nel tuo browser

Modifica l'esempio ed eseguilo. Gira in un frame isolato del tuo browser; nulla viene inviato al nostro server.

Codice

Anteprima