Update and replace JavaScript style guide.

The new guide is completely rewritten in light of ES2015.  The old guide
has been replaced with a link to the new guide.
This commit is contained in:
Stephen Hicks 2016-11-02 17:17:28 -07:00 committed by Stephen Hicks
parent 71ec7f1e52
commit 8f254427d9
5 changed files with 2711 additions and 3626 deletions

View File

@ -38,7 +38,7 @@ for more details.
[r]: https://google.github.io/styleguide/Rguide.xml
[sh]: https://google.github.io/styleguide/shell.xml
[htmlcss]: https://google.github.io/styleguide/htmlcssguide.xml
[js]: https://google.github.io/styleguide/javascriptguide.xml
[js]: https://google.github.io/styleguide/jsguide.html
[angular]: https://google.github.io/styleguide/angularjs-google-style.html
[cl]: https://google.github.io/styleguide/lispguide.xml
[vim]: https://google.github.io/styleguide/vimscriptguide.xml

View File

@ -21,14 +21,14 @@
(or not apply) these recommendations, as relevant to their own use cases.</p>
<p class="external">This document describes style for AngularJS apps in google3. This guide
supplements and extends the <a href="https://google.github.io/styleguide/javascriptguide.xml">
supplements and extends the <a href="https://google.github.io/styleguide/jsguide.html">
Google JavaScript Style Guide</a>.
</p>
<p><b>Style Note</b>: Examples on the AngularJS external webpage, and many external apps, are
written in a style that freely uses closures, favors functional inheritance, and does not often use
<a class="external"
href="https://google.github.io/styleguide/javascriptguide.xml?showone=JavaScript_Types#JavaScript_Types">
href="https://github.com/google/closure-compiler/wiki/Types-in-the-Closure-Type-System">
JavaScript types</a>. Google follows a more rigorous Javascript style to support JSCompiler
optimizations and large code bases - see the javascript-style mailing list.
This is not an Angular-specific issue, and is not discussed further in this style guide.
@ -151,9 +151,7 @@ goog.provide('hello.versions.Versions');
</pre>
<h3 id="controllers">Controllers and Scopes</h3>
<p>Controllers are classes. Methods should be defined on MyCtrl.prototype.
See <a href="https://google.github.io/styleguide/javascriptguide.xml?showone=Method_and_property_definitions#Method_and_property_definitions">
the JavaScript style guide</a></p>
<p>Controllers are classes. Methods should be defined on MyCtrl.prototype.</p>
<p>Google Angular applications should use the <b>'controller as'</b> style to export the controller
onto the scope. This is fully implemented in Angular 1.2 and can be mimicked in pre-Angular 1.2

56
include/jsguide.js Normal file
View File

@ -0,0 +1,56 @@
window.initStyleGuide = function(init) {
// Runs the callback on every element matched by the query selector.
function find(querySelector, callback) {
var elements = [].slice.call(document.querySelectorAll(querySelector));
for (var i = 0; i < elements.length; i++) {
callback(elements[i]);
}
}
// Add the tocDiv at the top.
var title = document.getElementsByTagName('h1')[0];
var toc = document.createElement('div');
toc.id = 'tocDiv';
toc.className = 'vertical_toc';
title.parentNode.insertBefore(toc, title.nextSibling);
// If a paragraph starts with (e.g.) "Note:" or "Tip:" then add
// that "callout class" to its element.
find('p', function(paragraph) {
var match = /^([a-z]+):/i.exec(paragraph.textContent);
if (match) {
paragraph.classList.add(match[1].toLowerCase());
}
});
// Fill in text for intra-document links, ensuring that links
// remain up-to-date even if sections are moved or renumbered.
// This triggers on any link with "??" as its text and a URL
// starting with "#", and the filled-in text is exactly the same
// as the text of the referenced section heading.
find('a[href^="#"]', function(link) {
var href = link.getAttribute('href');
var heading = document.getElementById(href.substring(1));
// Fill in link text with heading title
if (heading && link.textContent == '??') {
link.textContent = heading.textContent;
}
});
// Hoedown renders fenced code blocks incompatibly with what
// prettify expects. As a result, prettify doesn't handle them
// properly. Fix it by moving the code directly into the pre.
find('pre > code', function(code) {
var pre = code.parentElement;
pre.className = code.className;
pre.innerHTML = code.innerHTML;
});
// Run the normal init function.
init();
// Call the pretty-printer after we've fixed up the code blocks.
var pretty = document.createElement('script');
pretty.src = 'https://cdn.rawgit.com/google/code-prettify/master/loader/' +
'run_prettify.js';
document.body.appendChild(pretty);
}.bind(null, window.initStyleGuide);

File diff suppressed because it is too large Load Diff

2650
jsguide.html Normal file

File diff suppressed because it is too large Load Diff