Erweitern und entfernen Sie Symbolleistenschaltflächen

Wir haben eine Symbolleiste (bootstrap-navbar) entwickelt, die eine Reihe von Schaltflächen / Steuerelementen enthält.

Diese Symbolleiste funktioniert wie erwartet, aber jetzt gibt es eine neue Anforderung , um einen Mechanismus zum Erweitern dieser Symbolleiste mit neuen Schaltflächen von außen (möglicherweise über die json-Konfiguration) bereitzustellen ...) oder um die Standardtasten zu entfernen.

Stellen Sie sich zum Beispiel vor, dass wir diese Toolbar als Dienst zur Verfügung gestellt haben und dass es Optionen gibt, Buttons nach Konfiguration oder etwas hinzuzufügen / zu entfernen, momentan nicht sicher, wie ...

Meine Hauptfragen sind:

  

1. Welches Muster (Designmuster) sollte ich verwenden, um diese Symbolleiste zu erweitern (wenn möglich natürlich :)). Bitte denken Sie daran, dass jemand, der die Symbolleiste erweitern möchte, die Schaltflächen mit der Schaltfläche zur Verfügung stellen sollte   Logik.
  
2. Wie man das Projekt strukturiert
  
3. Ich möchte die Funktionalität der Schaltfläche in verschiedene Javascript-Dateien aufteilen   und lade sie zusammen in index.html . Was ist der empfohlene Weg?   Hinweis: Ich kann ES6 nicht verwenden (sollte IE11 auch unterstützen :() und ich benutze Knoten js nicht, um WebPack / Gulp / Grunt
zu haben   

Projektstruktur

Nun möchte ich dieses große Skript in kleinere Dateien unterteilen (wie Frage 3), Welche Technik sollte ich verwenden? Vielleicht require.js (da ich nicht die Möglichkeit habe zu kompilieren ...

Jedes Beispiel wird sehr hilfreich sein

Dies ist zum Beispiel der HTML-Code und alle Handler-Logik in der jsFile