1
1
1
https://github.com/google/styleguide
Google 编码风格/代码风格 手册/指南
Style guides for Google-originated open-source projects.
https://google.github.io/styleguide/htmlcssguide.xml
Google HTML/CSS Style Guide
General Style Rules
Protocol
link▽
Omit the protocol from embedded resources.(省略嵌入资源的协议。)Omit the protocol portion (
http:
,https:
) from URLs pointing to images and other media files, style sheets, and scripts unless the respective files are not available over both protocols.Omitting the protocol—which makes the URL relative—prevents mixed content issues and results in minor file size savings.
<!-- Not recommended -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script><!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>/* Not recommended */
.example {
background: url(https://www.google.com/images/example);
}/* Recommended */
.example {
background: url(//www.google.com/images/example);
}https://google.github.io/styleguide/javascriptguide.xml
Google JavaScript Style Guide
Tips and Tricks
link▽
JavaScript tidbitsTrue and False Boolean Expressions
The following are all false in boolean expressions:
null
undefined
''
the empty string0
the numberBut be careful, because these are all true:
'0'
the string[]
the empty array{}
the empty objectThis means that instead of this:
while (x != null) {you can write this shorter code (as long as you don't expect x to be 0, or the empty string, or false):
while (x) {And if you want to check a string to see if it is null or empty, you could do this:
if (y != null && y != '') {But this is shorter and nicer:
if (y) {Caution: There are many unintuitive things about boolean expressions. Here are some of them:
Boolean('0') == true
'0' != true
0 != null
0 == []
0 == false
Boolean(null) == false
null != true
null != false
Boolean(undefined) == false
undefined != true
undefined != false
Boolean([]) == true
[] != true
[] == false
Boolean({}) == true
{} != true
{} != falseConditional (Ternary) Operator (?:)
Instead of this:
if (val) {
return foo();
} else {
return bar();
}you can write this:
return val ? foo() : bar();The ternary conditional is also useful when generating HTML:
var html = '<input type="checkbox"' +
(isChecked ? ' checked' : '') +
(isEnabled ? '' : ' disabled') +
' name="foo">';&& and ||
These binary boolean operators are short-circuited, and evaluate to the last evaluated term.
"||" has been called the 'default' operator, because instead of writing this:
/** @param {*=} opt_win */
function foo(opt_win) {
var win;
if (opt_win) {
win = opt_win;
} else {
win = window;
}
// ...
}you can write this:
/** @param {*=} opt_win */
function foo(opt_win) {
var win = opt_win || window;
// ...
}"&&" is also useful for shortening code. For instance, instead of this:
if (node) {
if (node.kids) {
if (node.kids[index]) {
foo(node.kids[index]);
}
}
}you could do this:
if (node && node.kids && node.kids[index]) {
foo(node.kids[index]);
}or this:
var kid = node && node.kids && node.kids[index];
if (kid) {
foo(kid);
}However, this is going a little too far:
node && node.kids && node.kids[index] && foo(node.kids[index]);Iterating over Node Lists
Node lists are often implemented as node iterators with a filter. This means that getting a property like length is O(n), and iterating over the list by re-checking the length will be O(n^2).
var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
doSomething(paragraphs[i]);
}It is better to do this instead:
var paragraphs = document.getElementsByTagName('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
doSomething(paragraph);
}This works well for all collections and arrays as long as the array does not contain things that are treated as boolean false.
In cases where you are iterating over the childNodes you can also use the firstChild and nextSibling properties.
var parentNode = document.getElementById('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
doSomething(child);
}https://google.github.io/styleguide/angularjs-google-style.html
An AngularJS Style Guide for Closure Users at Google
https://google.github.io/styleguide/javaguide.html
Google Java Style Guide
https://google.github.io/styleguide/pyguide.html
Google Python Style Guide
https://google.github.io/styleguide/shell.xml
Shell Style Guide
https://google.github.io/styleguide/xmlstyle.html
Google XML Document Format Style Guide
Version 1.0
Copyright Google 2008https://google.github.io/styleguide/cppguide.html#Formatting
Google C++ Style Guide
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1