From cedabf6c0232dd61f88b524bb6a5497e44ec6991 Mon Sep 17 00:00:00 2001 From: "Kay.L" Date: Sat, 12 Sep 2015 17:59:00 +0800 Subject: [PATCH 1/2] Update to Drupal Coding Standards --- es5/README.md | 168 +++++++++++++++++++++++++++++++++++++------------- 1 file changed, 124 insertions(+), 44 deletions(-) diff --git a/es5/README.md b/es5/README.md index 2d24f1a4a2..73da24c1b0 100644 --- a/es5/README.md +++ b/es5/README.md @@ -1,8 +1,9 @@ [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) -# Airbnb JavaScript Style Guide() { +# Drupal JavaScript Coding Standards() { -*A mostly reasonable approach to JavaScript* +- Adopted from [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript/tree/master/es5). +- Use ESLint for Drupal JavaScript Coding Standards. [More info](https://www.drupal.org/node/1955232). ## Table of Contents @@ -27,6 +28,7 @@ 1. [Constructors](#constructors) 1. [Events](#events) 1. [Modules](#modules) + 1. [Iterators and Generators](#iterators-and-generators) 1. [jQuery](#jquery) 1. [ECMAScript 5 Compatibility](#ecmascript-5-compatibility) 1. [Testing](#testing) @@ -267,7 +269,7 @@ ```javascript // anonymous function expression - var anonymous = function() { + var anonymous = function () { return true; }; @@ -277,7 +279,7 @@ }; // immediately-invoked function expression (IIFE) - (function() { + (function () { console.log('Welcome to the Internet. Please follow me.'); })(); ``` @@ -417,7 +419,7 @@ ```javascript // bad - function() { + function () { test(); console.log('doing stuff..'); @@ -433,7 +435,7 @@ } // good - function() { + function () { var name = getName(); test(); @@ -449,7 +451,7 @@ } // bad - unnecessary function call - function() { + function () { var name = getName(); if (!arguments.length) { @@ -462,7 +464,7 @@ } // good - function() { + function () { var name; if (!arguments.length) { @@ -517,7 +519,7 @@ anonymous(); // => TypeError anonymous is not a function - var anonymous = function() { + var anonymous = function () { console.log('anonymous function expression'); }; } @@ -635,10 +637,10 @@ } // bad - function() { return false; } + function () { return false; } // good - function() { + function () { return false; } ``` @@ -768,17 +770,17 @@ ```javascript // bad - function() { + function () { ∙∙∙∙var name; } // bad - function() { + function () { ∙var name; } // good - function() { + function () { ∙∙var name; } ``` @@ -809,7 +811,7 @@ }); ``` - - Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space before the argument list in function calls and declarations. + - Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space before the argument list in function calls and declarations. Place 1 space before the opening parenthesis in function expressions. ```javascript // bad @@ -831,6 +833,16 @@ function fight() { console.log('Swooosh!'); } + + // bad + var fight = function() { + console.log ('Swooosh!'); + } + + // good + var fight = function () { + console.log('Swooosh!'); + } ``` - Set off operators with spaces. @@ -847,14 +859,14 @@ ```javascript // bad - (function(global) { + (function (global) { // ...stuff... })(this); ``` ```javascript // bad - (function(global) { + (function (global) { // ...stuff... })(this);↵ ↵ @@ -862,7 +874,7 @@ ```javascript // good - (function(global) { + (function (global) { // ...stuff... })(this);↵ ``` @@ -925,19 +937,19 @@ // bad var obj = { - foo: function() { + foo: function () { }, - bar: function() { + bar: function () { } }; return obj; // good var obj = { - foo: function() { + foo: function () { }, - bar: function() { + bar: function () { } }; @@ -1020,19 +1032,19 @@ ```javascript // bad - (function() { + (function () { var name = 'Skywalker' return name })() // good - (function() { + (function () { var name = 'Skywalker'; return name; })(); // good (guards against the function becoming an argument when two files with IIFEs are concatenated) - ;(function() { + ;(function () { var name = 'Skywalker'; return name; })(); @@ -1153,7 +1165,7 @@ // good var thisIsMyObject = {}; - function thisIsMyFunction() {} + function thisIsMyfunction () {} ``` - Use PascalCase when naming constructors or classes. @@ -1193,25 +1205,25 @@ ```javascript // bad - function() { + function () { var self = this; - return function() { + return function () { console.log(self); }; } // bad - function() { + function () { var that = this; - return function() { + return function () { console.log(that); }; } // good - function() { + function () { var _this = this; - return function() { + return function () { console.log(_this); }; } @@ -1221,7 +1233,7 @@ ```javascript // bad - var log = function(msg) { + var log = function (msg) { console.log(msg); }; @@ -1297,11 +1309,11 @@ this.set('lightsaber', lightsaber); } - Jedi.prototype.set = function(key, val) { + Jedi.prototype.set = function (key, val) { this[key] = val; }; - Jedi.prototype.get = function(key) { + Jedi.prototype.get = function (key) { return this[key]; }; ``` @@ -1343,12 +1355,12 @@ ```javascript // bad - Jedi.prototype.jump = function() { + Jedi.prototype.jump = function () { this.jumping = true; return true; }; - Jedi.prototype.setHeight = function(height) { + Jedi.prototype.setHeight = function (height) { this.height = height; }; @@ -1357,12 +1369,12 @@ luke.setHeight(20); // => undefined // good - Jedi.prototype.jump = function() { + Jedi.prototype.jump = function () { this.jumping = true; return this; }; - Jedi.prototype.setHeight = function(height) { + Jedi.prototype.setHeight = function (height) { this.height = height; return this; }; @@ -1404,7 +1416,7 @@ ... - $(this).on('listingUpdated', function(e, listingId) { + $(this).on('listingUpdated', function (e, listingId) { // do something with listingId }); ``` @@ -1417,7 +1429,7 @@ ... - $(this).on('listingUpdated', function(e, data) { + $(this).on('listingUpdated', function (e, data) { // do something with data.listingId }); ``` @@ -1435,7 +1447,7 @@ ```javascript // fancyInput/fancyInput.js - !function(global) { + !function (global) { 'use strict'; var previousFancyInput = global.FancyInput; @@ -1452,6 +1464,70 @@ global.FancyInput = FancyInput; }(this); ``` + +**[⬆ back to top](#table-of-contents)** + + +## Iterators and Generators + + - Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`. + + > Why? This enforces our immutable rule. Dealing with pure functions that return values is easier to reason about than side-effects. + + ```javascript + const numbers = [1, 2, 3, 4, 5]; + + // bad + let sum = 0; + for (let num of numbers) { + sum += num; + } + + sum === 15; + + // good + let sum = 0; + numbers.forEach((num) => sum += num); + sum === 15; + + // best (use the functional force) + const sum = numbers.reduce((total, num) => total + num, 0); + sum === 15; + ``` + + - The body of every for in statement MUST be wrapped in an if statement that performs the filtering. It MAY select for a particular type or range of values, or it can exclude functions, or it can exclude properties from the prototype. + - You MUST use the hasOwnProperty method to distinguish the true members of the object, which SHOULD be placed inside the loop, not on the same line: + + ```javascript + // bad + for (var variable in object) { + // Statements... + } + + // good + for (var variable in object) { + if (filter) { + // Statements... + } + } + + // bad + for (var variable in object) { + // Statements... + } + + // good + for (var variable in object) { + if (object.hasOwnProperty(variable)) { + // Statements... + } + } + ``` + + - Don't use generators for now. + + > Why? They don't transpile well to ES5. + **[⬆ back to top](#table-of-contents)** @@ -1530,7 +1606,7 @@ - **Yup.** ```javascript - function() { + function () { return true; } ``` @@ -1561,12 +1637,16 @@ **Tools** - - Code Style Linters + - ESLint for Drupal + + [ESLint](http://eslint.org/) - [Drupal Style .eslintrc](https://www.drupal.org/node/1955232) + + - Other Code Style Linters (*This is not fully compatible wtih Drupal Coding Standards*) + [JSHint](http://www.jshint.com/) - [Airbnb Style .jshintrc](https://github.com/airbnb/javascript/blob/master/linters/jshintrc) + [JSCS](https://github.com/jscs-dev/node-jscs) - [Airbnb Style Preset](https://github.com/jscs-dev/node-jscs/blob/master/presets/airbnb.json) **Other Style Guides** + - [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) - [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) - [jQuery Core Style Guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines) - [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwldrn/idiomatic.js/) From b02e8b0c1564f94800e9d779389c61bad7e3015d Mon Sep 17 00:00:00 2001 From: Frank Anderson Date: Sat, 12 Sep 2015 09:08:10 -0700 Subject: [PATCH 2/2] Update README.md Changed the if else rule to match Drupal CS. --- es5/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/es5/README.md b/es5/README.md index 73da24c1b0..373bc8d888 100644 --- a/es5/README.md +++ b/es5/README.md @@ -645,7 +645,7 @@ } ``` - - If you're using multi-line blocks with `if` and `else`, put `else` on the same line as your + - If you're using multi-line blocks with `if` and `else`, put `else` a new line after your `if` block's closing brace. ```javascript @@ -653,8 +653,7 @@ if (test) { thing1(); thing2(); - } - else { + } else { thing3(); } @@ -662,7 +661,8 @@ if (test) { thing1(); thing2(); - } else { + } + else { thing3(); } ```