Making a code → Atoms

The client application can be divided into 3 main layers: data, behavior and design. Each layer has its own language: html, javascript and css, respectively. The connection between them is carried out through some identifiers: the names of tags, classes, identifiers. But unfortunately, in most cases they are strongly tied to the context of use, which complicates support and refactoring.

A few examples:

1. var user = new User ( 'tenshi' ) var isUser = anElement. hasClassName ( 'user' ) var container = document. getElementById ( 'user' )
2. var user = new User ( 'tenshi' ) var isUser = anElement. hasClassName ( 'user' ) var container = document. getElementById ( 'user' )
3. var user = new User ( 'tenshi' ) var isUser = anElement. hasClassName ( 'user' ) var container = document. getElementById ( 'user' )

Here we see many different entities with one name: variable name, constructor name, class name, identifier. What if you looked at the source code of the page and found one class has a 'user' class, which should not be there? Due to the fact that the class name is not an atomic entity for your application (that is, it requires an additional context like var, new, hasClassName, getElementById, to find meaning), a search on the “user” line will give you a pile of garbage by hands.

To solve the described problem, namespaces are entered. For example:

1. var user = new User ( 'tenshi' )
2. var isUser = anElement. hasClassName ( 'm-user' )
3. var container = document. getElementById ( 'id-user' )

At first glance, a double indication of the context seems meaningless, but this allows the resulting atoms to be used to designate the same entities in the whole project, no matter what languages ​​are used in it.

1. < div id = "id-user" > Tenshi < / div >
2. < div class = "b-person-info m-user" > ahtung! tenshi is a user! < / div >

1. # id-user { font-size : 24pt }
2. .b-person-info { border : 1px solid transparent }
3. .b-person-info .m-user { border-color : red }

1. var anUserElement = $ ( 'id-user' )
2. var aPersonElement = anUserElement. select ( '.b-person' ) [ 0 ]
3. aPersonElement. addClassName ( 'm-user' )

The most common prefixes are:
id- for identifiers
b- for css blocks
m- for block modifiers
')
For names used within the same language, prefixes are usually not used. Although, it is found, for example, that the names of constructors begin with the prefixes T or C, or they are placed in a single namespace like $ or YMaps:

1. var aMapList = new CMapList
2. ( $$ ( '# id-map-list .b-map' )
3. . map
4. ( YMaps. Map . Bind
5. ( YMaps
6. , { propagateEvents : true
7. , coordSystem : new CCoordSystem
8. }
9. )
10. )
11. )

And what atoms are used in your projects?