Google coding Style Guide ： Google 编码风格/代码风格 手册/指南

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 tidbits

True and False Boolean Expressions

The following are all false in boolean expressions:

• null
• undefined
• '' the empty string
• 0 the number

But be careful, because these are all true:

• '0' the string
• [] the empty array
• {} the empty object

This 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

{} != false

Conditional (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 2008

https://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