Găsește și apelează componente și pluginuri: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE și ADAPT

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsapi Executată cu jComponent 20

FIND(selector, [all]) returnează o componentă care este gata: 'notice' este numele ei, '.msg' calea ei (se potrivește cu căile care o conțin) și '#id' id-ul ei; cu all pe true returnează lista. COMPONENTS(path) returnează lista componentelor gata a căror cale este sub path; flagurile unei căi o filtrează ('msg @visible').
SETTER('name/method', a, b, c, d) apelează method al fiecărei componente gata cu acel nume ('.path/method' pentru o cale, '#id/method' pentru un id, '*/method' pentru toate). Un nume care nu e încă încărcat este încărcat mai întâi (o componentă lazy). ASETTER(...) nu o apelează: returnează o funcție care o va face.
EXE(name, a, b, c, d) (la fel ca EXEC()) apelează ce spune numele: 'plugin/method' o metodă a unui plugin, 'function' o funcție globală sau o cale din stare care ține o funcție ('FUNC.save'). SEEX(name, value) este la fel, dar când numele nu este o funcție setează calea la value.
TAPI(name, data, callback) este API(DEF.api, ...) și PIPE(name, data, callback) este API(DEF.pipe, ...): două adrese de endpoint-uri pe care le setezi o dată în DEF.api și DEF.pipe.
MIDDLEWARE(name, function(next) {}) înregistrează o funcție care rulează înaintea unei rute: trebuie să apeleze next() pentru a o lăsa să continue. O rută cere una (sau mai multe, separate prin virgule) ca al treilea argument: ROUTE('/path/', handler, 'name'). MIDDLEWARE(['a', 'b'], callback) rulează middleware-urile în ordine și apoi callback-ul; unul care nu apelează next() oprește lanțul.
NEWUIBIND(element, path, config) creează din cod un ui-bind pe un element (elementul nu are nevoie de atribute) și îl returnează.
ADAPT(path, id, text) pregătește textul unei componente venite din exterior: traduce @(...), înlocuiește ~PATH~ și CLASS cu calea și ~ID~ cu id-ul, și pune path în etichetele <ui-plugin> care nu au unul. COMPILE este aceeași funcție ca NOOP în jComponent 20: nu face nimic.
Obiectele din spatele tuturor: jComponent, Total, MAIN și M sunt același obiect (motorul: M.components este lista componentelor, M.version versiunea), W este window, DEF valorile implicite, iar REPO, FUNC, TEMP și PLUGINS sunt obiecte simple ale tale: FUNC pentru funcții pe care EXE('FUNC.name') le poate apela, TEMP este golit de jComponent când pagina pornește din nou.

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>

Încearcă în browserul tău

Editează exemplul și rulează-l. Rulează într-un cadru izolat din browserul tău; nimic nu este trimis către serverul nostru.

Cod

Previzualizare