Fully cached menu with TypoScript

menu.ts

page.10 >

page.10 = COA
page.10 {
  cache {
    key = main-menu
  }

  10 = TEXT
  10 {
    data = date : U
    strftime = %H:%M:%S
    noTrimWrap = |Time: | |
  }
  20 = HMENU
  20 {
    special = directory
    special.value = 2
    wrap = <div class"menu">|</div>
    
    1 = TMENU
    1.expAll = 1
    1.wrap = <ul>|</ul>
    1 {
      NO = 1
      NO.wrapItemAndSub = <li>|</li>
    }
    2 < .1
    3 < .1
    4 < .1
  }
}

# replaces the A tag of the active menu item
page.stdWrap.replacement.10 {
  search.cObject = HMENU
  search.cObject {
    special = list
    special.value.field = uid
    # take care to copy any additional params to the A tag
    1 = TMENU
    1 {
      NO = 1
    }
  }
  replace.cObject = HMENU
  replace.cObject {
    special = list
    special.value.field = uid
    # take care to copy any additional params to the A tag
    1 = TMENU
    1 {
      NO = 1
      NO.ATagParams = class="active"
    }
  }
}

/*
debug here
page.20 >
page.20 < page.stdWrap.replacement.10.search.cObject

page.30 >
page.30 < page.stdWrap.replacement.10.replace.cObject
*/

wäre es nicht einfacher die highlighting Klassen 'current' und 'active' per Javascript im Browser setzen zu lassen?
jeder Menüeintrag benötigt dafür natürlich eine eindeutige ID (zb. '#m').
auf jeder Seite wird ein Javascript Funktionsaufruf mit der aktuellen page uid als Parameter generiert.

die dazugehörige javascript-Funktion sucht den Menüeintrag, setzt die 'current' Klasse und hangelt sich im Menü-DOM nach oben um jeweils die 'active' Klasse zu setzen.

Einfacher, ja - sauberer, nein. Genausogut könnte man das gesamte Menü auf einer Seite ausgeben und "vorberechnen/cachen" lassen und auf allen andren Seiten per Ajax laden - technisch gehts, ist aber alles andre als sinnvoll.
Alles was serverseitig im Markup geht, sollte imho nicht per JS clientseitig geflickt werden.

Eine noch optimierte Loesung findet man übrigens hier: https://gist.github.com/julrich/d91c1ac1968418e6ae8290f2a2e90afb