Summarized some useful front-end code specifications, share with you, I hope to help you ~

Code review content

    1. Take a look at each responsible module, select some good or need to improve the share, everyone to provide solutions
    1. Project Optimization Suggestions
    1. Question points in the project
    1. Code specification

    Feel free to share any of the above or if you want to

Purpose of code Review

    1. Help you improve code quality, develop good coding habits, improve system performance and stability
    1. Learn from each other and find good ideas
    1. Self improvement

Code Review steps

    1. It is suggested to write a Word to share the process clearly
    1. Project optimization suggestions => project query points => Review of some snippets of code

First, JS specification

1. Const named constants

  • Eliminate magic string, all constants should be named
// const COL_NUM = 10; let row = Math.ceil(num / COL_NUM); // let row = math.ceil (num / 10);Copy the code

2. Pass default values for function arguments

Function createMicrobrewery(name = "Hipster Brew Co.") {} function createMicrobrewery(name) {const breweryName = name || "Hipster Brew Co."; / /... }Copy the code

3. If the function has many parameters, it can be deconstructed

  • The fewer parameters a function has, the better. If there are many parameters, you can use deconstruction, regardless of the order of parameters
Function createMenu({title, body, buttonText, cancellable}) {function createMenu({title, body, buttonText, cancellable}) { } createMenu({ title: "Foo", body: "Bar", buttonText: "Baz", cancellable: true }); Function createMenu(title, body, buttonText, cancellable) {//... }Copy the code

4. Use… The args instead of the arguments

  • Args is a real array
Function getName(... args) { console.log("args", args); } / / do not recommend the function getName () {/ / 1. Let the args = Array. The prototype. Slice. The call (the arguments) / / 2. Let the args = Array.from(arguments) console.log("args", args); }Copy the code

5. When introducing modules, third-party plug-ins should be introduced first, then internal components

Import {Component, Vue, Prop, Watch} from "vue-property-decorator"; import {Component, Vue, Prop, Watch} from "vue-property-decorator"; import _ from "lodash"; import Utils from "./utils/"; import AppHeader from "./app-header.vue"; // Import Utils from "./ Utils /"; import { Component, Vue, Prop, Watch } from "vue-property-decorator"; import AppHeader from "./app-header.vue"; import _ from "lodash";Copy the code

6. Avoid abbreviations when naming files

// studentScoreAnalysis recommended // stuScoAna not recommendedCopy the code

7. Use functional programming

  • Functional programming makes the logic of your code clearer and more elegant
Const programmerOutput = [{name: 'Uncle Bobby', linesOfCode: 500}, {name: 'Suzie Q', linesOfCode: 500} 1500 }, { name: 'Jimmy Gosling', linesOfCode: 150 }, { name: 'Gracie Hopper', linesOfCode: 1000 } ]; let totalOutput = programmerOutput .map(output => output.linesOfCode) .reduce((totalLines, Lines) => totalLines + lines, 0) const programmerOutput = [{name: 'Uncle Bobby', linesOfCode: 500}, {name: 'Suzie Q', linesOfCode: 1500 }, { name: 'Jimmy Gosling', linesOfCode: 150 }, { name: 'Gracie Hopper', linesOfCode: 1000}]; let totalOutput = 0; for (let i = 0; i < programmerOutput.length; i++) { totalOutput += programmerOutput[i].linesOfCode; }Copy the code

7.1 Extensions – What is Functional programming

  • The function is a first-class citizen
    • Functions can be on an equal footing with other data types. They can assign values, serve as arguments, or serve as return values
Function fn2(fn) {fn()} function fn3() {return function() {}}Copy the code

  • A function is a pure function

    • Same input, same output
    • No side effects (side effects: operations inside a function can affect the outside, such as changing the value of a global variable or modifying the DOM node)

    Map and reduce in 7 are typical pure functions

Function random(x){return math.random () \* x} function random(x){return math.random () \* x} Function setColor(el,color){el.style.color = color; } var count = 0; function addCount(x){ count+=x; return count; }Copy the code

Functional programming example: compose function

function compose(... args){ let start = args.length -1 return function(){ let i = start - 1 let result = args[start].apply(this, arguments) while(i>=0){ result = args[i].call(this, result) i-- } return result } } function addHello(str){ return `Hello ${str}` } function toUpperCase(str){ return str.toUpperCase() } function reverse(str){ return str.split('').reverse().join(''); } let composeFn = compose(reverse, toUpperCase, addHello) composeFn('abcde')Copy the code

This process consists of three steps: hello, uppercase, invert, and the compose function combines the three actions into one and outputs the correct result

8. Minimum function principle

  • It improves code readability, reusability, and testing

9. Save the object property values as local variables

  • Avoid the overhead of finding attributes
}} function getMaleSex(){let sex = person.info.sex; If (sex === 'male '){console.log(sex)}} function getMaleSex(){if(person.info.sex){console.log(sex)}} function getMaleSex(){if(person.info.sex) === 'male '){console.log(person.info.sex)}}Copy the code

10. Use a library of tools rather than rewriting a function. If rewriting a function requires writing unit tests, make sure the function is correct

Second, VUE specification

1. During the loop, the key value is bound to the ID

2. Complex statements use computed

3. Component value transfer

  • Sibling eventBus
  • Provide /inject components
  • Values are passed between page components, lost when the router is used and refreshed using vuex

4. Vue template – Remove meaningless redundant labels

5. Vue Templates – Large modules require comments

Vue Style Guide