Seitenvergleich

...

Bei der vollständigen Modulidentifikation wird der gesamte Pfad zu dem zu ladenden Modul beginnend ab plugin/remote/ angegeben. Ein solcher Pfad ist bspw. brandbox/custom/src/Custom/Package/js/script welcher durch die Javascript-API von brandbox in die URL https://[Domain]/plugin/remote/brandbox/custom/src/Custom/Package/js/script.js?bust=[Cachezeitstempel] übersetzt und geladen wird. Ein auf diese Weise geladenes Modul muss in seinem Grundaufbau einem RequireJS-Modul entsprechen.

...

Grundaufbau eines RequireJS-Moduls

define([], () => {

	return /* new (falls ein Singleton gewünscht ist) */ class CustomPackageScript {

		constructor() {
			console.log('i'm a constructor!')
		}

	}

})

...

Diese Modulidentifikation wird für ES6-Moduldefinitionen genutzt und ist der RequireJS-Moduldefinition bei einer Neutentwicklung vorzuziehen. Eine App- bzw. Modulidentifikation setzt eine gültige composer.json für eine App sowie eine gültige config.json für ein Paket vorraus. Diese Modulidentifikation setzt sich aus dem Paketnamen oder dem Appnamen sowie dem relativen Pfad des nachzuladenden Moduls zusammen. Bspw. wird die App-Modulidentifikation brandbox/custom.script durch die Javascript-API in https://[Domain]/plugin/remote/brandbox/custom/resources/js/script.js?bust=[Cachezeitstempel] und die Paket-Modulidentifikation Custom/Package.script in https://[Domain]/plugin/remote/brandbox/custom/src/Custom/Package/js/script.js?bust=[Cachezeitstempel] übersetzt.

...

Grundaufbau eines ES6-Moduls

'use strict'

export default /* new (falls ein Singleton gewünscht ist) */ class CustomPackageScript {

	constructor() {
		console.log('i'm a constructor!')
	}

}

...

/**
 * @param {Element} element Element-Instanz des HTML-Elements mit dem data-js-Attribut
 * 
 * @returns {?Promise<void>} Es darf optional ein Promise zurückgegeben werden
 */
/* async */ call (element) {}

Module über Javascript nachladen

Neben den HTML-Attributes können Module auch direkt im Javascript-Code nachgeladen werden. Hierfür steht die Funktion brandbox.import() zur Verfügung. Diese akzeptiert ebenfalls eine [Modulidentifikation] als Parameter. Diese Funktion ist asynchron und gibt einen Promise für das Ergebnis zurück. Innerhalb einer async-Funktion kann mithilfe von await auf das Ergebnis gewartet werden, ansonsten muss mit Promise.then() eine Ergebnisfunktion definiert werden.

...

Nachladen in einer asynchronen Funktion

const custom = await brandbox.import('[Modulidentifikation]')

Nachladen in einer synchronen Funktion

brandbox.import('[Modulidentifikation]').then(/* async */ (custom) => {
	// Innerhalb von custom steht nun das Modul zur Verfügung
})

Eine Anfrage an brandbox senden

Für eine Anfrage an brandbox wird die FetchAPI von Javascript eingesetzt. Diese Anfrage wird hinter einer Facade der brandbox Javascript-API verwaltet, welche Hilfsfunktionen für Entwickler anbietet.

const response = await brandbox.import({request: 'Custom/Package.request'}) // Weitere Parameter stehen über die Codevervollständigung zur Verfügung

Erweiterte API-Funktionen

const request = (await brandbox.network()).build()

// 'request'-Parameter für brandbox setzen
request.request = 'Custom/Package.request'

// Anfragetyp aus 'GET' festlegen
request.method = request.constructor.METHOD_GET

// Parameter hinzufügen
request.parameter.append('something', 'strange')

// Kopfzeile festlegen
request.header.append('x-custom-header', 'content')

// Weitere Parameter stehen über die Codevervollständigung zur Verfügung
// CSRF-Parameter werden nicht automatisch ergänzt
// StackResponses werden nicht automatisch verarbeitet

const response = await request.process()
const content = await response.response.text()

console.log(response.status)
console.log(content)

StackResponse-Listener ergänzen

const network = await brandbox.network()

network.stack.attach('CustomStackResponseType', async (response) => {
	console.log(response)
})

...