Configuration-Driven List Display Without Duplication

Among the Short Link System, Web Notepad System, and Image Hosting System, the requirements for displaying the list of saved data are different.

The Notepad System should display the value using a multi-line text box. As shown below:

The Image Hosting System should display the value in the form of an image. As shown below:

The Short Link System uses the original display method. Just display the entire value as text.

The code is already written. The functionality is correct as well. 

The current question is, how to design the code structure reasonably, so that the configuration items in worker.js can control the display method of the list.

The configuration item for setting the system is in worker.js. At most, there is one more item, which controls which index.html to load.

But the function of implementing the list display is in main.js. 

The file main.js is on Github. It is specified to load in the index.html file.

If the content of main.js is moved out and put into index.html, and then different systems use different index.html files, with minor modifications to the JS code logic to achieve the differences in display effects. 

This can indeed achieve the effect, but the large chunks of identical code in main.js need to be copied into every index.html, which is too inelegant. 

If in the future, the identical parts of the code need to be modified, that would be a shotgun surgery. One would have to open so many index.html files and change them one by one. If a change is made incorrectly or one is missed, problems will arise.

- To Be Continued