Definition
A data model is a set of JS objects that describes all data inside an app and covers all its logic.
In the previous chapter we made an HTML/CSS mockup of our app.
The mockup with a clear HTML element structure is a basis to design the data model, because we can see there:
- element nesting
- repetitive patterns
You can see, that our mockup is build from repetitive rows. And inside each row there are repetitive keys. So we need a data structure with repetitive rows with nested repetitive keys.
Keyboard
Keyboard is an array 1 of rows.
const keyboard = [row1, row2, row3]
Row
Row is an array with keys.
const row1 = [key1, key2, key3, ...]
Key
Key is an object 2 with the structure:
const key = {
code,
label,
main,
shifted
}
Only code
is required. Other properties are optional.
code
identifies a key position on a physical keyboard. This code is the same for keyboards in all languages.
label
is the text on the key if it doesn't match with main
or code
. For “Escape” label
is “Esc”, for “Space” it is an empty string.
main
is the value returned after key pressed: 1
, 2
, q
.
shifted
is the value returned after key pressed while holding shift key !
, @
, Q
.
We don't always specify all these props, because we don’t need them, or we can get them from other props. E.g. Tab
has only code
, because it doesn’t have a returned value main
or shifted
, and its label are the same as the code. Escape
has label: Esc
because we want to display on the key shorter version of the code: 'Escape'
. And it hasn’t also main
and shifted
.
keyboardData/en.js
Inside root project folder make a new folder keyboardData
and create there a file 3 en.js
:
keyboardData/en.js
const keyboard = [
[
{ code: 'Escape', label: 'Esc' },
{ code: 'F1' },
{ code: 'F2' },
{ code: 'F3' },
{ code: 'F4' },
{ code: 'F5' }
],
[
{
code: 'Backquote',
main: '`',
shifted: '~'
},
{
code: 'Digit1',
main: '1',
shifted: '!'
},
{
code: 'Digit2',
main: '2',
shifted: '@'
},
{
code: 'Digit3',
main: '3',
shifted: '#'
},
{
code: 'Digit4',
main: '4',
shifted: '$'
},
{
code: 'Digit5',
main: '5',
shifted: '%'
}
],
[
{ code: 'Tab' },
{
code: 'KeyQ',
main: 'q',
shifted: 'Q'
},
{
code: 'KeyW',
main: 'w',
shifted: 'W'
},
{
code: 'KeyE',
main: 'e',
shifted: 'E'
},
{
code: 'KeyR',
main: 'r',
shifted: 'R'
}
]
]
export default keyboard
The whole keyboard
data model is a 2 dimensional array.
You can get any row from keyboard by index:
const row = keyboard[rowIndex]
//rowIndex is 0, 1, ..., 6
You can get any key from keyboard by 2 indexes
const key = keyboard[rowIndex][keyIndex]
//keyIndex is 0, 1, .., 16
Data source
Where to get the data from?
main
, shifted
and label
are written on keys on physical keyboard.
How to get code
will be explained in the chapter 8: "keydown
event handling".
Conclusion
We need to have this data model in front of our eyes as well as HTML/CSS mockup to design the app in a modular way. We will create small components that are responsible for each logical part of the app. And before we do that, it's important to know which data will be passed to these components.
Differences between old code and new code
Entire code after the chapter 3
-
Array is a collection of similar data elements. ↩
-
An object is like a code description of a real life objects, e.g.
employee = { age: 30, name: 'John Doe', position: 'driver' }
.age
is a property.30
is a value of propertyage
. So object is aproperty-value
set. We can read properties by dotemployee.age
(30), or bracketsemployee["name"]
(John Doe). ↩ -
A file with extension
*.js
and keywordexport
in it is called ES6 module, or just module. You can import its code from another*.js
file with keywordimport
. ↩
Top comments (0)