How to call a set of shared named functions on different JavaScript objects based on the name of the current plugin clicked on

I am building a JavaScript app which will consist of multiple plugin apps and all data is fetched from a remote PHP API as JSON data.

The core app has a left sidebar which loads a list of Taxonomy items for the loaded plugin. For example the Bookmarks module loads a list of Tags in the sidebar. When a Tag is clicked on it then fetches a new list of Bookmark Entities from the API which belong to the clicked on Taxonomy tag record and then replaces the HTML list of tags with the new HTML list of Bookmark entities/records.

Clicking on a Bookmark entity record will then load the bookmark URL into a right iframe panel.

I plan to have several plugin apps in addition to the Bookmarks app and each plugin will load its own list of Taxonomy records and Entity records into the same HTML Sidebar element.

Each time a new list is generated it is simply injected into the DOM for the sidebar element replacing the previous old version.

SO I plan on having a separate JavaScript object/file for each module/plugin app and each app will have a set of functions which it has in common among all the apps.

For example something like loadSideBarTaxonomyList() function might be responsible for building the sidebar HTML for the current app plugin. So each plugin could have this same function and the core app could simply call this function for the currently loaded/selected plugin app.

This is where I am requesting your help and ideas.

If I have 10 plugin apps and 1 core app JavaScript. I might have a click event on a plugin selector widget which allows the user to select the plugin app to use.

In this click event I might want to fire off a call to the loadSideBarTaxonomyList() function on the selected plugin apps JavaScript object/code.

Keep in mind also that some of these plugin apps codebase will have its own set of click event handlers and such which all will might be watching or working on the same DOM elements at times. It might be useful to somehow un-load a module/plugin when a new one is clicked/selected to load?

So I am not sure how my code might look to handle calling a set of function names on the current selected plugin code?

Assume I have these plugin apps: - Bookmarks - Notebooks - Code Snippets

The user clicks to load the Notebooks app. I now need to call the function loadSideBarTaxonomyList() on the Notebooks app JavaScript. How might I call that function where the loaded app can change?

Is this a good use case for the Factory Pattern or possibly some other pattern fits best?

Also should I unbind each DOM event that a plugin app adds when a new plugin is loaded? So each time a plugin app is selected it will bind its own DOM events and when a new plugin is loaded it will first unbind the previous plugins DOM events. If I loaded the Bookmarks app 4 times within the hour, each time it would bind and unbind its events which I think might be a good idea?

Thanks for any help

---