Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ab531b5

Browse files
committed
Merge pull request ktaranov#3 from Darja1989/patch-2
JavaScript Coding Conventions
2 parents fcf9546 + 3e3765a commit ab531b5

File tree

1 file changed

+177
-0
lines changed

1 file changed

+177
-0
lines changed

‎JavaScript Coding Conventions

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
# JavaScript Coding Conventions
2+
3+
| Object Name | Notation | Length | Plural | Prefix | Suffix | Abbreviation | Char Mask |Underscores |
4+
| ------------------------- | ---------- | ------ | ------ | ------ | ------ | ------------ | -------------------|-------------|
5+
| Function name | PascalCase | 50 | Yes | No | Yes | Yes | [A-z][0-9] | No |
6+
| Function arguments | CamelCase | 50 | Yes | No | No | Yes | [A-z][0-9] | No |
7+
| Local variables | CamelCase | 50 | Yes | No | No | Yes | [A-z][0-9] | No |
8+
| Constants name | PascalCase | 50 | Yes | No | No | Yes | [A-z][0-9] | No |
9+
| Field name | CamelCase | 50 | Yes | No | No | Yes | [A-z][0-9] | No |
10+
***
11+
Coding conventions are style guidelines for programming. They typically cover:
12+
13+
1. Naming and declaration rules for variables and functions.
14+
1. Rules for the use of white space, indentation, and comments.
15+
16+
Coding conventions secure quality:
17+
18+
1. Improves code readability
19+
1. Make code maintenance easier
20+
***
21+
Always use the same naming convention for all your code. For example:
22+
***
23+
1. Do use camelCasing for variable and function arguments names;
24+
2. Do use PascalCasing for function names and global variable;
25+
3. Constants (like PI) written in UPPERCASE;
26+
4. Do not use under_scores in variable, constants, function arguments or function names;
27+
5. Do not use hyphens in JavaScript names.
28+
***
29+
#### Naming Conventions
30+
31+
Do use PascalCasing for function names:
32+
33+
function HelloWorld()
34+
{
35+
}
36+
37+
Do use camelCasing for function arguments and local variables:
38+
39+
function Hello(isShow)
40+
{
41+
}
42+
43+
firstName = "John";
44+
lastName = "Doe";
45+
46+
price = 19.90;
47+
discount = 0.10;
48+
49+
fullPrice = price * 100 / discount;
50+
51+
***Note: Don't start names with a $ sign. It will put you in conflict with many JavaScript library names.***
52+
53+
#### Spaces Around Operators
54+
55+
Always put spaces around operators ( = + / * ), and after commas:
56+
57+
Examples:
58+
59+
var x = y + z;
60+
var values = ["Volvo", "Saab", "Fiat"];
61+
62+
#### Code Indentation
63+
64+
Always use 4 spaces for indentation of code blocks:
65+
66+
Functions:
67+
68+
function ToCelsius(fahrenheit)
69+
{
70+
return (5/9) * (fahrenheit-32);
71+
}
72+
73+
***Note: Do not use tabs (tabulators) for indentation. Text editors interpret tabs differently.***
74+
75+
#### Statement Rules
76+
77+
*General rules for simple statements: Always end simple statement with a semicolon.*
78+
79+
Examples:
80+
81+
var values = ["Volvo", "Saab", "Fiat"];
82+
83+
var person = {
84+
firstName: "John",
85+
lastName: "Doe",
86+
age: 50,
87+
eyeColor: "blue"
88+
};
89+
90+
#### General rules for complex (compound) statements:
91+
***
92+
1. Put the opening bracket at the end of the first line.
93+
2. Use one space before the opening bracket.
94+
3. Put the closing bracket on a new line, without leading spaces.
95+
4. Do not end complex statement with a semicolon.
96+
***
97+
98+
Functions:
99+
100+
function toCelsius(fahrenheit) {
101+
return (5/9) * (fahrenheit-32);
102+
}
103+
104+
Loops:
105+
106+
for (i = 0; i < 5; i++) {
107+
x += i;
108+
}
109+
110+
111+
Conditionals:
112+
113+
if (time < 20) {
114+
greeting = "Good day";
115+
} else {
116+
greeting = "Good evening";
117+
}
118+
119+
120+
#### Object Rules
121+
122+
General rules for object definitions:
123+
***
124+
1. Place the opening bracket on the same line as the object name.
125+
2. Use colon plus one space between each property and it's value.
126+
3. Use quotes around string values, not around numeric values.
127+
4. Do not add a comma after the last property-value pair.
128+
5. Place the closing bracket, on a new line, without leading spaces.
129+
6. Always end an object definition with a semicolon.
130+
***
131+
Example:
132+
133+
var person = {
134+
firstName: "John",
135+
lastName: "Doe",
136+
age: 50,
137+
eyeColor: "blue"
138+
};
139+
140+
Short objects can be written compressed, on one line, like this:
141+
142+
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
143+
144+
***Line Length < 80***
145+
146+
For readability, avoid lines longer than 80 characters. If a JavaScript statement does not fit on one line, the best place to break it, is after an operator or a comma.
147+
148+
Example:
149+
150+
document.getElementById("demo").innerHTML = "Hello World.";
151+
152+
#### Loading JavaScript in HTML
153+
154+
Use simple syntax for loading external scripts (the type attribute is not necessary):
155+
156+
<script src="myscript.js">
157+
158+
#### Accessing HTML Elements
159+
160+
A consequence of using "untidy" HTML styles, might result in JavaScript errors. These two JavaScript statements will produce different results:
161+
162+
var obj = getElementById("Demo")
163+
164+
var obj = getElementById("demo")
165+
166+
*If possible, use it naming convention (as JavaScript) in HTML.*
167+
168+
#### File Extensions
169+
170+
1. HTML files should have a .html extension (not .htm);
171+
2. CSS files should have a .css extension;
172+
3. JavaScript files should have a .js extension.
173+
174+
## Offical Reference
175+
176+
1. [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml)
177+
2. [JavaScript Style Guide and Coding Conventions](http://www.w3schools.com/js/js_conventions.asp)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /