Hitta och anropa komponenter och plugins: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE och ADAPT

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsapi Körd med jComponent 20

FIND(selector, [all]) returnerar en komponent som är redo: 'notice' är dess namn, '.msg' dess sökväg (den matchar sökvägar som innehåller den) och '#id' dess id; med all satt till true returnerar den listan. COMPONENTS(path) returnerar listan över de redo komponenter vars sökväg ligger under path; flaggorna i en sökväg filtrerar den ('msg @visible').
SETTER('name/method', a, b, c, d) anropar method hos varje redo komponent med det namnet ('.path/method' för en sökväg, '#id/method' för ett id, '*/method' för alla). Ett namn som ännu inte är laddat laddas först (en lat komponent). ASETTER(...) anropar den inte: den returnerar en funktion som kommer att göra det.
EXE(name, a, b, c, d) (samma som EXEC()) anropar det namnet säger: 'plugin/method' en metod i ett plugin, 'function' en global funktion, eller en sökväg i tillståndet som håller en funktion ('FUNC.save'). SEEX(name, value) är detsamma, men när namnet inte är en funktion sätter den sökvägen till value.
TAPI(name, data, callback) är API(DEF.api, ...) och PIPE(name, data, callback) är API(DEF.pipe, ...): två slutpunktsadresser som du sätter en gång i DEF.api och DEF.pipe.
MIDDLEWARE(name, function(next) {}) registrerar en funktion som körs före en rutt: den måste anropa next() för att släppa fram den. En rutt ber om en (eller flera, separerade med kommatecken) som tredje argument: ROUTE('/path/', handler, 'name'). MIDDLEWARE(['a', 'b'], callback) kör middleware i ordning och sedan callbacken; en som inte anropar next() stoppar kedjan.
NEWUIBIND(element, path, config) skapar en ui-bind på ett element från koden (elementet behöver inte attributen) och returnerar den.
ADAPT(path, id, text) förbereder texten för en komponent som kommer utifrån: den översätter @(...), ersätter ~PATH~ och CLASS med sökvägen och ~ID~ med id:t, och lägger in path i de <ui-plugin>-taggar som saknar en. COMPILE är samma funktion som NOOP i jComponent 20: den gör ingenting.
Objekten bakom allt: jComponent, Total, MAIN och M är samma objekt (motorn: M.components är listan över komponenter, M.version versionen), W är window, DEF standardvärdena, och REPO, FUNC, TEMP och PLUGINS är vanliga objekt som är dina: FUNC för funktioner som EXE('FUNC.name') kan anropa, TEMP töms av jComponent när sidan startar om.

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>

Prova det i din webbläsare

Redigera exemplet och kör det. Det körs i en isolerad ram i din webbläsare; ingenting skickas till vår server.

Kod

Förhandsvisning