Feature Based Routing

Hi, we’ve modified the DOM Based Routing script to turn it into a Feature Based Routing following the Trevor Davis post “JavaScript Execution Patterns for Non-Web Apps” https://viget.com/extend/javascript-execution-patterns-for-non-web-apps


  1. Routing based on features rather than body class names
  2. No Jquery dependency (but you can still enclose it within an anonymous function)

Any feedback / further improvement is more than welcome )

I’ve done this in the past but used a body class for the feature. I find this works better as it’s easier to target a body class rather than an attribute, especially with multiple features:

[data-features="foo"] { }
body.foo { }

[data-features~="foo"][data-features~="bar"] { }
body.foo.bar { }

Is there a particular benefit you get from using the data attribute?

Sticking with body classes is probably the path of least resistance. you could simply append any “features” you want to the body_class filter and be up and running with least resistance. A lot of commercial plugins make use of the body class filter too, e.g. gravityforms, others.

1 Like