E-commerce system design and implementation (14): menu highlight and E-commerce system highlight

E-commerce system design and implementation (14): menu highlight and E-commerce system highlight
Menu highlight is a function that is required by almost all Web sites.

This function is very simple. Add a highlighted style to the menu on the current page and delete the highlighted style from other menus.

It is too simple to highlight only one page menu, but if there are too many menus and pages, there will be controversy.

1st Methods: each page is highlighted separately.

<Li id = "indexli"> <a href = "$ {base}/"> homepage </a> </li> <script type = "text/javascript"> function highlightIndex () {highlight ("indexli");} function highlight (id) {$ ("#" + id ). addClass ("liactive") ;}</script>

Benefits: high flexibility.
Disadvantage: You need to add a highlighted menu method for each page.

2nd Methods: by matching the URL, write only one highlighted menu method.

Var url = window. location. pathname; // The default value is 'homepage 'indexvar current = 'index'; if (url. indexOf ('/Service ')! =-1) {current = 'service';} else if (url. indexOf ('/case ')! =-1) {current = 'case';} else if (url. indexOf ('/article ')! =-1) {current = 'Article';} else if (url. indexOf ('/Code ')! =-1) {current = 'code';} else if (url. indexOf ('/about ')! =-1) {current = 'more';} else if (url. indexOf ('/News ')! =-1) {current = 'more';} else if (url. indexOf ('/help ')! =-1) {current = 'more';} else if (url. indexOf ('/ask ')! =-1) {current = 'Ask ';} else {current = 'index';} for (var I = 0; I <navList. length; I ++) {if (I = map [current]) {navList [I]. className = 'liactive';} else {navList [I]. className = '';}}

Benefit: The Menu highlight logic is processed in one place.
Disadvantage: poor flexibility and strict requirements on URLs.
Simply put, the simpler the URL rules, the more unified the matching is. However, if the URL has exceptions, special processing is required.
When adding another URL, consider whether the new URL conflicts with the existing URL matching rules.

-----------------------------------------------------------
I have used these two methods to talk about my feelings.
If the URL is relatively random, the highlighted function is called separately on each specific page.
If the URLs are very uniform, they can be processed in a unified manner.

In the actual process, for example, in the company's project, there is a dispute regarding the method used. The front-end wants to handle the issue in a unified manner and the backend tends to be customized separately.
During backend development, URLs are relatively random. The front-end wants the backend to name the url according to the menu organization.
Boss does not want to do this. He believes that menus and backend URLs do not need to be strictly unified, and menus and backend services should not be highly dependent.

For our projects and my own projects, I prefer to call the highlighted function separately on each page, which is very flexible.
Some pages only need to highlight the top menu, some pages also need to highlight the left menu.

The logic of the highlighted menu can be encapsulated into a method.

No matter how many pages you add, the highlight of each page does not affect each other.
-----------------------------------------------------------
Just a few more comments to encapsulate the menu logic. Each page calls the highlighted function once, which is done in minutes. It takes only a few hours to write a unified URL match. It cannot be completely correct, and URL match cannot be reused between multiple projects.

Many similar problems often exist in team development, resulting in very low development efficiency.

So, I think a good full-stack development engineer is similar to a small team of five.