preface

The Internet is so hot today that it has caught the attention of many young people. This has led to the birth of many programmers, and programmers work with code every day, not only their own code, but also other people’s code. This has led to a common discussion of the problem of programmer so-and-so writing bad code, how should I tell him? Blah, blah, blah, blah, blah, blah. So how to write a high quality code, it has become a programmer’s basic accomplishment.

Writing high-quality code requires that we develop this awareness and habit on a daily basis, so that it not only looks good to ourselves, but also to others. Let’s take a look at some of the details that were overlooked during development.

      

  • Specific variable

“NO” : NO parameter is specified

If (value.length < 8) {// why is 8 less than 8? Length, displacement, or height?

.

}

YES: Add variables

const MAX_INPUT_LENGTH = 8;

If (value.length < MAX_INPUT_LENGTH) {// The maximum input length cannot be exceeded

.

}

  • For functions that return true or false, it is best to start with should/is/can/has
  • Function function is best pure function, input is consistent, output is always unique.
  • Function parameters must be specified.

    • page.getSVG({

    imageApi: api,

    IncludePageBackground: true, //

    compress: false,

    })



  • A function performs an independent function; do not mix multiple functions with one function

    • This is one of the most important rules in software engineering, and as functions need to do more, they become harder to write, test, understand, and compose. When you can pull out a function to do just one action, they will be easier to refactor and your code will be easier to read. If you follow this rule strictly, you will be ahead of many developers.

  • Functional programming is preferred

    • NO: Program with a for loop

    for(i = 1; i <= 10; I++) {// when you see the for loop, you don’t want to see it

    a[i] = a[i] +1;

    }

    YES: Use functional programming

    Let b = a.ap (item => ++item); Now almost all the for loop in javascript can be map, filter, find, some, any, forEach replaced by functional programming, etc.

  • Never use eval() on strings; it opens too many loopholes. Eval () is really the devil!!
    1. First, eval() can accept arbitrary strings and treat them as Javascript code, which introduces a security problem called XSS attacks. Injecting a script tag, or a request, for no reason no longer seems safe.
    2. Second, in terms of performance, if you write in eval() these days, modern browsers will use slow path because it’s an unpredictable path, so it’s slow.
    3. In addition, eval() differs from Function constructs in that eval() can interfere with the scope chain, whereas Function() is better in that it only sees the global scope wherever you execute Function(), so it avoids local variable contamination.

         (function () { 



            var local = 1; 



           eval("local = 3; console.log(local)"); 
// logs “3” 



            console.log(local); // logs “3” 



} ());



        (function () { 



           var local = 1; 



Function(“console.log(typeof local);” )
(a); // logs undefined



} ());

Running results:


       

www.nowamagic.net/librarys/ve…


  • Never name arguments as arguments. This will override arguments objects in the original function scope.
  1. // bad
  2. function foo(name, options, arguments) { 
  3.  // ...
  4. } 
  5. // good
  6. function foo(name, options, args) {
  7.  // ...
  8. }
  • Don’t usearguments. You can choose rest syntax… Alternative.

      • Why is that? The use of… Can specify the parameters you want to pass in. The rest argument is a real Array, and arguments is an array-like Array.

    1. // bad
    2. function concatenateAll() {  
    3. const args = Array.prototype.slice.call(arguments); 

       return args.join('');
    4. }
    5.  // good
    6. function concatenateAll(... args) {
    7.   return args.join('');
    8. }
  • Exponentiation uses the exponentiation operator **
    1. // bad
    2. const binary = Math.pow(2, 10);
    4. // good
    5. const binary = 2 ** 10;


    • Variables should not be chain-assigned

    1. // bad
    2. (function example() {
    3. // JavaScript parses it as
    4. // let a = ( b = ( c = 1 ) );
    5. // the let keyword applies only to variable A;
    6. // Variables B and c become global variables.
    7. let a = b = c = 1;
    8. } ());
    10. console.log(a); // Throw ReferenceError
    11. console.log(b); / / 1
    12. console.log(c); / / 1
    14. // good
    15. (function example() {
    16. let a = 1;
    17. let b = a;
    18. let c = a;
    19. } ());
    21. console.log(a); // Throw ReferenceError
    22. console.log(b); // Throw ReferenceError
    23. console.log(c); // Throw ReferenceError
    25. // Also applies to const
    • Do not store this reference. Please use the arrow function
    1. // bad
    2. function foo() {
    3. const self = this;
    4. return function () {
    5. console.log(self);
    6. };
    7. }
    9. // bad
    10. function foo() {
    11. const that = this;
    12. return function () {
    13. console.log(that);
    14. };
    15. }
    17. // good
    18. function foo() {
    19. return () => {
    20. console.log(this);
    21. };
    22. }


    • conclusion

    It’s actually easier to standardize code these days, because there are a lot of tools for static checking and stuff like that. I would normally use ESlint to tweak the code specification, but what we need is an awareness of the code specification in addition to tooling. Building a habit over time is definitely a benefit for later code writing.

    • Refer to the article
    1. Airbnb JavaScript code specification github.com/airbnb/java…
    2. See how many JS code styles you’ve written juejin.cn/post/684490…