Your location:Tech News>News>Script>15 simple JS coding standards to make your code cleaner (Summary)

Latest News

15 simple JS coding standards to make your code cleaner (Summary)

Author:fsadmin

Views:

  Author | Daniel Anderson

  This article was originally published on the website Medium, after authorization by the author translation and Share.

  Coding standards can help the following aspects:

  Consistent with the code

  Easy to read and understand

  Easy to maintain

  The following coding standards I have helped a few comments on the above.

  1. Instead of using comparison === ==

  This is important because JavaScript is a dynamic language, so use == may give you unexpected results because it allows different types.

  Fail:

  if (val == 2)

  Pass:

  if (val === 2)

  2. Never use var, instead of using let

  Let will help avoid the use of JavaScript in the scope of the problem caused by a variety var.

  Fail:

  var myVar = 10;

  Pass:

  let myVar = 10;

  3. Use const instead of let

  This prevents developers try to change things should not be done, and indeed help to improve readability.

  Fail:

  let VAT_PERCENT = 20;

  Pass:

  const VAT_PERCENT = 20;

  4. Always use a semicolon (;)

  While this is optional in JavaScript, unlike other languages as required semicolon as a statement terminator.But use; helps make the code consistent.

  Fail:

  const VAT_PERCENT = 20;

  let amount = 10

  return addVat (amount, vatPercent)

  Pass:

  const vatPercent = 20;

  let amount = 10;

  return addVat (amount, vatPercent);

  5. JavaScript naming conventions

  let should be used camelCase.

  const If you use uppercase snake in the top of the file nomenclature.If the top is not in the file, use camelCase.

  class should be Pascal nomenclature: MyClass

  functions function should be hump nomenclature: myFunction

  6. When using a template string string concatenation

  Template string expressions allow embedding.

  Fail:

  let fullName = firstName + "" + lastName;

  Pass:

  let fullName = `$ {firstName} $ {lastName}`;

  7. Whenever possible, use the arrow functions ES6

  Arrow function is a function to write more concise expression syntax.

  Fail:

  var multiply = function (a, b) {

  return a * b;

  };

  Pass:

  const multiply = (a, b) => {return a * b};

  8. Always use curly braces around the control structure

  All control structures must use braces (for example, if, else, for, do, while, etc.), so that when the post-maintenance, less error-prone.

  Fail:

  if (valid)

  doSomething ();

  if (amount> 100)

  doSomething ();

  else if (amount> 200)

  doSomethingElse ();

  Pass:

  if (valid) {

  doSomething ();

  }

  if (amount> 100) {

  doSomething ();

  }

  else if (amount> 200) {

  doSomethingElse ();

  }

  9. Ensure that braces start from the same line, with a space

  Fail:

  if (myNumber === 0)

  {

  doSomething ();

  }

  Pass:

  if (myNumber === 0) {

  doSomething ();

  }

  10. Try reducing nesting

  if in if becomes confusing and difficult to read.Sometimes you may not be able to solve the problem, but a good card can look at the code structure, see if you can improve.

  Fail:

  if (myNumber> 0) {

  if (myNumber> 100) {

  if (!hasDiscountAlready) {

  return addDiscountPercent (0);

  } Else {

  return addDiscountPercent (10);

  }

  } Else if (myNumber> 50) {

  if (hasDiscountAlready) {

  return addDiscountPercent (5);

  }

  } Else {

  if (!hasDiscountAlready) {

  return addDiscountPercent (0);

  } Else {

  return addDiscountPercent (1);

  }

  }

  } Else {

  error ();

  }

  Pass:

  if (myNumber <= 0) {

  return error;

  }

  if (!hasDiscountAlready) {

  return addDiscountPercent (0);

  }

  if (myNumber> 100) {

  return addDiscountPercent (10);

  }

  if (myNumber> 50) {

  return addDiscountPercent (5);

  }

  return addDiscountPercent (1);

  After the above it can be seen by way of example, to reduce nesting, will become easier to read.

  11. Whenever possible, use the default parameters

  In JavaScript, if you do not pass parameters when calling the function, its value is undefined

  Fail:

  myFunction (a, b) {

  return a + b;

  }

  Pass:

  myFunction (a = 0, b = 0) {

  return a + b;

  }

  12. `Switch` statement should use` break` and has `default`

  I usually try not to use a switch statement, but you do want to use it, make sure that each condition break, and wrote defalut.

  Fail:

  switch (myNumber)

  {

  case 10:

  addDiscountPercent (0);

  case 20:

  addDiscountPercent (2);

  case 30:

  addDiscountPercent (3);

  }

  Pass:

  switch (myNumber)

  {

  case 10:

  addDiscountPercent (0);

  break;

  case 20:

  addDiscountPercent (2);

  break;

  case 30:

  addDiscountPercent (3);

  break;

  default:

  addDiscountPercent (0);

  break;

  }

  13. Do not use a wildcard import

  Fail:

  import * as Foo from ''https: // www.jb51.net / article / Foo '';

  Pass:

  import Foo from ''https: // www.jb51.net / article / Foo '';

  14. Use the shortcut boolean

  Fail:

  if (isValid === true)

  if (isValid === false)

  Pass:

  if (isValid)

  if (!isValid)

  15. Try to avoid unnecessary ternary statement

  Fail:

  const boo = a ? a: b;

  Pass:

  const boo = a || b;

  to sum up

  Any coding standard language can really help improve the readability and maintainability of the application.If you work in a team, it is a very difficult thing to enforce coding standards.Here are some suggestions to help you:

  Code review, Progressive Pass Code.

  Or use some sort of code analyzer

  When you create new content, so that you initialize a senior developer, other developers can use this code as a guide.

  Original link: https: // medium.com / javascript-in-plain-english / 19-simple-javascript-coding-standards-to-keep-your-code-clean-7422d6f9bc0

  This article about 15 simple JS coding standards to make your code cleaner (Summary) article on the introduction to this, and more, please JS coding standard search script home earlier article or continue to browse below for related after the article I hope you can support script home!

  You may also be interested in the article: JS of the URL string urlencode encoding and decoding method in the encoding / decoding analysis Javascript decodeURIComponent be attached UTF-8 coding methods through the use of javascript JS several ways to encode a string of JavaScript to guide url URL encode coding method of JavaScript Base64 encoding and decoding, implement URL parameter passing.JS achieve Base64 encoding and decoding Detailed Example

Recommend article

Relate article