Tips(Best Practice)

There are some tips which can help developers make their source better.

"x-" convention

Since we are always assuming that the designers will change the page radically, the binding target selector may become invalid after page structure refactoring. To combat this issue, we introduced so called "x-" convention in our practice. We always add a css class starting with "x-" to the binding target DOM, which tells the designers try their best to keep the compatibility against the "x-" marked elements when they are refactoing the html source.

Although we always use "x-" convention to render our data, there are still some acceptable exceptions in our practice:

• use "a" directly when rendering the link to the "href" attribute
• use "img" directly when rendering the link to the "src" attribute
• use "li" directly when rendering a list(This one is controversial, some of our members argue that we should use "x-" instead of direct "li" selector)

source modularization

Developers can utilize the frameworks' features to make their source more clear with better structure.

• dependency injection
• web component
• "_merge"
• "_virtual"
• vanilla js function

(to be conintue....)