- Ambiguious sources: It’s not obvious where to look for the JS behavior. (Is the handler attached to .author, .footnote, or .profile-link?)
- Non-reusable: It’s not obvious how to reuse the behavior in another page. (Should blogpost.js be included in the other pages that need it? What if that file contains other behaviors you don’t need for that page?)
- Lack of organization: Making new behaviors gets confusing. (Do you make a new .js file for each page? Do you add them to the global application.js? How do you load them?)
In a nutshell:
- Keep your HTML declarative (get rid of inline scripts).
- Put all your imperative code in JS files.
- Reduce ambiguity by having straight-forward conventions.
- HTML elements can be components that have behaviors.
Some practical tips: