Giter Club home page Giter Club logo

style-guide's Introduction

Front-End Development Style Guide

Table of Contents

  1. JS
  2. Types

JS

This JS Style Guide is based on Airbnb’s ES5 Style Guide (as of late April 2015), but it aims to be more thorough. Also, where my opinions are considerably different from (or even opposed to) the given reference, a “:warning:” icon indicates that. Moreover, a “:lipstick:” icon indicates cosmetical preferences.

Types

💥 There are six primitive types in JS: Boolean, Number, String, Null, Undefined & Symbol (new in ES6), and a complex one: Object, that includes Arrays, Functions, RegExps, Dates, etc. When referring to them (e.g. in JSDoc), use PascalCase.

Objects

💥 Use the literal syntax to create Objects:

// GOOD:
var foo = {};

// BAD:
var foo = new Object();

💥 ⚠️ Don’t strive to avoid reserved words for Object keys. There’s no need to do that. Just place them inside quotes, like this: { 'class': 'ns-Block-element' }, or like this: $el['class'] = 'ns-Block-element', if needed.

💥 💄 For empty & one-property Object literals, use one line of code. Otherwise, split lines:

var foo = {};
var bar = { baz: 'foo' }; // Note the spaces inside the curly braces.
var someObject = {
  foo: 'bar',
  baz: true
};

Arrays

💥 Use the literal syntax to create Arrays:

// GOOD:
var foo = [];

// BAD:
var foo = new Array();

💥 Use Array#push() to append elements to an Array:

// GOOD:
foo.push('bar');

// BAD:
foo[foo.length] = 'bar';

💥 To copy an Array, use Array#slice():

// GOOD:
var fooCopy = foo.slice();

// BAD:
var fooCopy = [];
for (var index = 0, length = foo.length; index < length; ++index) {
  fooCopy[index] = foo[index];
}

💥 To convert an Array-like Object (e.g. Arguments) to an Array, also use Array#slice():

var someFunction = () => {
  var args = Array.prototype.slice.call(arguments);
  // ...
};

💥 💄 For zero-length & one-element Array literals, use one line of code. Otherwise, split lines:

var foo = [];
var bar = [ 'baz' ]; // Note the spaces inside the square brackets.
var someArray = [
  'foo',
  'bar',
  'baz'
];

💥 💄 Write foo[index] (without spaces inside the square brackets) for property accessors, just like for Objects. But write var foo = [ 'bar' ]; (with spaces) for the literal Array syntax.

💥 Don’t leave a trailing comma after an Array’s last element:

// GOOD:
var someArray = [
  'foo',
  'bar'
];

// BAD:
var someArray = [
  'foo',
  'bar',
];

Strings

💥 Use single quotes for Strings:

💥 Write Strings longer than 100 characters on multiple lines, using concatenation:

var foo = 'The twins of Mammon quarrelled. Their warring plunged the world into a new darkness, and the beast ' +
  'abhorred the darkness. So it began to move swiftly, and grew more powerful, and went forth and ' +
  'multiplied. And the beasts brought fire and light to the darkness.';

💥 ⚠️ Don’t strive to programmatically build up a String with Array#join(), if that would negatively impact readability.

Functions

💥 Use only Function expressions, never Function statements. Use ES6’s fat arrow notation for Function expressions, whenever possible:

// GOOD:
var square = (x) => {
  return x * x;
};
var cube = function() { // Note there’s no space between `function` and `()`.
  return x * x * x;
};

// BAD:
function someFunction() {
  // ...
}

💥 💄 Use the (...)(...) notation for IIFEs instead of (...(...)):

// GOOD:
(() => {
  // ...
})();
(function($) {
  // ...
})(jQuery);

// BAD:
(function($) {
  // ...
}(jQuery));

💥 Never name a Function parameter arguments. That’ll take precedence over the arguments Object that’s given to every Function scope.

Properties

💥 Use the dot notation when accessing properties, and the subscript notation only when accessing properties with a variable or a reserved word:

// GOOD:
var foo = {
  bar: 'baz',
  'class': false
};
var barProperty = 'bar';
if (foo['class']) {
  console.log(foo.bar);
  foo[barProperty] = 'foobarbaz';
}

// BAD:
if (foo.class) {
  console.log(foo['bar']);
}

💥 Use ES6’s shorthand notation for Function properties, whenever possible:

var someMixin = {
  getDefaultProperties() {
    // ...
  },
  fooMethod(bar, baz) {
    // ...
  }
};

CSS

...

style-guide's People

Contributors

c7tincu avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.