AIRBNB JavaScript Coding Specification (covers ECMAScript 6+) __ajax

One of the most reasonable javasscript coding specifications. _ Translate from:
Https://github.com/airbnb/javascript

Note : This guide assumes that you are using Babel and requires that you use BABEL-PRESET-AIRBNB or a comparable preset plug-in. It also assumes that you are installing shims/polyfills, utility airbnb-browser-shims, or equivalent plug-ins in your application.

directory type referencing object array deconstruction String function arrow function class and constructor module iterator and Generator property variable elevation comparison operator and equals code block control statement annotation White comma semicolon type convert naming rule accessor event Jqu ery ECMAScript 5 compatibility ECMAScript 6+ (ES 2015+) Coding style Standard library test performance related resources

type

–1.1 Basic Type : When you access a basic type, you will directly process its value. String number boolean null undefined symbol

const FOO = 1;
Let bar = foo;

bar = 9;

Console.log (foo, bar); => 1, 9

Symbols cannot be fully polyfill, so they should not be used if the target browser/environment does not support them.

–1.2 Compound type : When you access a composite type, you need to refer to its value. Object Array function

   
   
    
    JavaScript  Code:
   
   

1.  const FOO =  [1,  2];
2.  const BAR = foo;
3.   
4.  Bar[0]  =  9;
5.   
6.  Console.log (Foo[0], bar[0]);  => 9, 9

back to Table of contents

referencing References

–2.1 Use const for all references, and do not use Var. Eslint:prefer-const, No-const-assign

Why. This ensures that you cannot reassign references and redistribute code that can lead to bugs and incomprehensible.

   
   
    
    JavaScript  Code:
   
   

1.  Bad
2.  var a =  1;
3.  var B =  2;
4.   
5.  Good
6.  Const A =  1;
7.  Const B =  2;

–2.2 If you must have a variable reference, use let instead of Var. Eslint:no-var Jscs:disallowvar

Why. Because let is a block-level scope, Var is a function scope.

   
   
    
    JavaScript  Code:
   
   

1.  Bad
2.  var count =  1;
3.  if  (true)  {
4.  Count +  1;
5.  }
6.   
7.  //good, use let.
8. Let  count =  1;
9.  if  (true)  {
ten.  Count +  1;
One.  }

–2.3 note Let and const are block-level scopes.

   
   
    
    JavaScript  Code:
   
   

1.  The const and let exist only in the code block in which they are defined.
2.  {
3. Let   a =  1;
4.   Const B =  1;
5.  }
6.  Console.log (a);  Referenceerror, reference error
7.  Console.log (b);  Referenceerror, referencing error

back to Table of contents

Object Objects

–3.1 creates an object using literal syntax. Eslint:no-new-object

   
   
    
    JavaScript  Code:
   
   

1.  Bad
2.  Const ITEM =  new  Object ();
3.   
4.  Good
5.  Const ITEM =  {};

–3.2 uses the computed property name when creating an object with a dynamic property name.

Why? They allow you to define all the attributes of an object in one place.

   
   
    
    JavaScript  Code:
   
   

1.  function Getkey (k)  {
2.   Return  ' a key named ${k} ';
3.  }
4.   
5.  //Bad
6.  Const OBJ =  {
7.  ID:  5,
8.  Name:  ' San Francisco ',
9.  };  obj[getkey (' enabled ')]  =  true;
One.  Good
.  Const OBJ =  {
.  ID:  5
.  Name:  ' San Francisco ',
.   [Getkey (' enabled ')]:  True,
.  };

–3.3 uses the object method shorthand syntax. Eslint:object-shorthand jscs:requireenhancedobjectliterals

   
   
    
    JavaScript  Code:
   
   

1.  Bad
2.  Const ATOM =  {
3.   Value:  1,
4.   
5.  addvalue:  function  (value)  {
6.   return Atom.value  +  value;
7.   },
8.  };
9.  Good
.  Const ATOM =  {
.   Value:  1
.  AddValue (value)  {
.   return Atom.value  +  value;
.}  ;

–3.4 uses the object property shorthand syntax. Eslint:object-shorthand jscs:requireenhancedobjectliterals

why.? write code and describe more briefly.

   
   
    
    JavaScript  Code:
   
   

1.  Const Lukeskywalker =  ' Luke skywalker ';
2.   
3.  Bad
4.  Const OBJ =  {
5.  Lukeskywalker:lukeskywalker,
6.  };
7.   
8.  Good
9.  Const OBJ =  {
ten.  Lukeskywalker, one
.  };

–3.5 writes the shorthand attribute group at the beginning of the object declaration.

Why? It is easier to see which properties are using shorthand syntax.

   
   
    
    JavaScript  Code:
   
   

1.  Const Anakinskywalker =  ' Anakin skywalker ';
2.  Const Lukeskywalker =  ' Luke skywalker ';
3.   
4.  Bad
5.  Const OBJ =  {
6.  Episodeone:  1,
7.  Twojediwalkintoacantina:  2,
8.  Lukeskywalker,
9.  Episodethree:  3,
ten.  Maythefourth:  4, one
.  Anakinskywalker,
.  };   
-April.  Good
.  Const OBJ =  {
.  Lukeskywalker, no
.  Anakinskywalker, a
.  Episodeone:  1
.  Twojediwalkintoacantina:  2
.  Episodethree:  3
.  Maythefourth:  4
.  };

–3.6 The property of an invalid identifier with quotation marks only. Eslint:quote-props jscs:disallowquotedkeysinobjects

Why? Generally speaking, we think it's easier to read. It improves syntax highlighting and is more easily optimized by many JS engines.

   
   
    
    JavaScript  Code:
   
   

1.  Bad
2.  Const BAD =  {
3.   ' Foo ':  3,
4.   ' Bar ':  4,
5.   ' Data-blah ':  5,
6.  };
7.   
8.  Good
9.  Const GOOD =  {
ten.  Foo:  3, one
.  Bar:  4
.   ' Data-blah ':  5  };

–3.7 do not call Object.prototype's methods directly, such as hasOwnProperty, propertyIsEnumerable, and isprototypeof.

Why. These methods may be overwritten by the attributes of the object-for example, {Hasownproperty:false}– or, the object may be a null (NULL) object (Object.create (null)).

   
   
    
    JavaScript  Code:
   
   

1.  Bad
2.  Console.log (Object.hasownproperty (key));
3.   
4.  Good
5.  Console.log (Object.prototype.hasOwnProperty.call (Object, key));
6.   
7.  Best
8.  Const has =  Object.prototype.hasOwnProperty;  Within the scope of the module, the cache is looked up once.
9.  /* or *
.  Import has from  ' has ';
One.  //...  Console.log (Has.call (object, key));

–3.8 uses object expansion operators to light copy objects, prior to object.assign. Use the object remainder operator to obtain a new object that omits certain attributes.

   
   
    
    JavaScript  Code:
   
   

1.  Very bad
2.  Const ORIGINAL =  {A:  1, B:  2  };
3.  Const COPY =  object.assign (original,  {c:  3  });  ' original ' is a variable ಠ_ಠ
4.  Delete copy.a;  So does this
5.   
6.  //Bad
7.  Const ORIGINAL =  {A:  1, B:  2  };
8.  Const COPY =  object.assign ({}, original,  {c:  3  });  Copy => {a:1, b:2, c:3}
9.   
A.  //Good one
.  Const ORIGINAL =  {A:  1, B:  2  };  Const Copy =  {  ... original, C:  3  };  Copy => {a:1, b:2, C:3}
.  Const  {A,  ... noA}  = copy;  NoA => {b:2, c:3}

back to Table of contents

Array Arrays

–4.1 use literal quantities to create an array. Eslint:no-array-constructor

   
   
    
    JavaScript  Code:
   
   

1.  Bad
2.  Const ITEMS =  new  Array ();
3.   
4.  Good
5.  Const ITEMS =  [];

–4.2 uses Array#push instead of direct assignment when adding elements to an array.