layout
modules
When developing more complex programs, it is common to:
Split up the program based on purpose/function and write the code in separate modules.
Use sensibly named folders to group files.
EG: the top level folders could look like this:
And inside the folders...
landingPage.js
login.js
bouncingBall.js
manages the landing page
manages the login procedure
is the bouncing ball game
naming standards
When you have multiple JavaScript modules it is important to think about how another person will know which module a variable or function is defined in.
One way is to prefix the JavaScript module, its variables and its functions with a common code.
EG:
module prefixes
ad for ADmin manager
fb for FireBase code
ca for Catch the Alien
modules
ad_manager.js
fb_io.js
ca_game.js
variables
adRrun
fbResult
caStart
functions
ad_init()
fb_login()
ca_load()
html naming convention
When developing JavaScript code which updates a number of html elements, it soon becomes apparent you should have a naming convention for the html elements. Here is a suggested naming convention:
element type_name where element type is p for paragraph, b for button, d for division, i for input
EG:
p_name contains user's name
p_age contains user's age
b_start start button
i_name input box for user's name
html
From skillcrush:
It is a best practice to put JavaScript <script> tags just before the closing </body> tag rather than in the <head> section of your HTML.
The reason for this is that HTML loads from top to bottom.
The head loads first, then the body, and then everything inside the body. If we put our JavaScript links in the head section, the entire JavaScript file will load before loading any of the HTML, which could cause a few problems.
linking & file paths
<img src="/assets/images/picture.jpg">
The "picture.jpg" file is located in the images folder which is inside the assets folder in the current folder.
<script defer src="/manager/lg_manager.js"></script>
<script defer src="/manager/ad_manager.js"></script>
<script defer src="/manager/reg_manager.js"></script>
<script defer src="/manager/html_manager.js"></script>
<script defer src="/fb/fb_data.js"></script>
<script defer src="/fb/fb_io.js"></script>
<script defer src="/fb/fbR_manager.js"></script>