Now there is a project that needs to show specific styles for some special groups of people： For the elderly to implement the elderly version, some fonts will be enlarged, some dom structures will be different, and some icons on the page will be displayed in fonts; For people with color blindness, some treatments will be done on color; These changes may affect the original code. How to design the architecture to ensure the least intrusion into the source code? Can be highly expanded and deleted?

CodePudding user response：

Because you did not indicate the development language and development environment used by the project. I only use web HTML, CSS, and JavaScript as examples to express my thoughts. Do you often configure the theme desktop of your computer? The idea of ​​this project and the theme desktop should be relatively similar.

First of all, we need to determine a premise. We cannot determine whether a user is an elderly person through technical means, and there is no way to determine whether a user is color-blind. We can only do so that users can choose the theme they like according to their own situation or preferences. Set this prerequisite, the next thing to do is to prepare the css file corresponding to each theme, and then cooperate with js to load the css file according to the theme selected by the user.

In this process, in fact, it is more necessary to think about the code, how to write this code is more appropriate.

When the overall page style is consistent, the elderly people need to enlarge the fonts, and the color blind people need to deal with colors. Then you need to extract all the codes for setting the font size and setting the interface color in the CSS, and the remaining CSS code is used as the common style of the two themes, so that the overall layout style can be guaranteed to a certain extent. Finally, the font size and color of these two themes are written differently. For the theme used by the elderly, the font size is mainly adjusted, but the color is still the original color. For people with color blindness, use the original font size and make targeted adjustments to the color.

This method is actually one of the most basic programming ideas, leaving general code to find out the uncommon code, it can also be applied to C, C , Java, Python, etc.

Because you did not provide more specific project information, such as the development language used by the project, whether the program is in a computer application or a mobile application, I only provide my method and cannot provide the specific code.

CodePudding user response：

I think the below approach is a decent one: design the website for ordinary people. Whichever element U want to be changed later for elderly or colorblinded people, give it a class of ordinary(ordinary-p, ordinary-h1, ordinary-icon and ...). Later on define a state in your store, which when user clicks on a button to indicate that they are colorblinded or elder , is changed. Then U can use querySelectAll and find all those elements and remove that className and replace it with the new className like colorblinded-h1 or ... further on, all U will be needing to do is define all those classes in SASS or plain CSS.