Code specification

  1. Use the ESLint tool to check JS code
  2. No lint warnings or errors.
  3. Without the console. The log ()

2. Routine check-ups

2.1. Code style

  1. Hardcoded data, const is used.
❎ if(code === 10){} ✅ const status = 10; If (code = = = status) {}.Copy the code
  1. Avoid too much if else and try using maps or ternary expressions
// Example 1 ❎ if (brand === 'oppo') {boss = 'Tony'} else if (brand === 'vivo') {boss = 'Leo'} ✅ let map = {oppo: 'Tony', vivo: 'Leo'} boss = map['oppo'] // Example 2 ❎ if (status) {a = 1} else {a = 2} ✅ a = status? 1:2Copy the code
  1. Remove unwanted comment code.
  2. Remove unnecessary comments.
  3. Add necessary comments. Necessary comments explain what the code does and why.
  4. Does the code conform to programming specifications? (Position of braces, variable and function names, line length, indentation, formatting, and comments)
  5. Is the loop set to length and correct termination conditions?
  6. Is the array index within the allowed range?
  7. Are HTML tags written correctly, nested correctly, and closed correctly?
  8. Whether the variable has an initial value
  9. Use watch and this.$forceUpdate() as little as possible
  10. Project directories/APIS/routes should be as modular and semantically named as possible

2.2. ES6 | 7…

  1. Use the ES6 +.
  2. Use the arrow function. Avoid the let that | self = this.
  3. Use function parameter defaults.
  4. The use of…
  5. Use const let.
  6. Use import export.
  7. Use the string template.
  8. The arrays | objects to deconstruct the assignment.
  9. Using Promise | Async/Await.
  10. Use optional chaining as the determination condition
A && user.a.b .bCopy the code

2.3. Third-party libraries

  1. Use functions such as Lodash (introduced on demand) rather than self-actualization.
  2. Try to use the UI library already referenced by the project rather than rewriting the component.
  3. Whether to introduce CookUI, remove ElementUI
  4. Whether to use security front-end scaffolding, component libraries, common packages

2.4. The CSS

  1. Naming conventions. Comply with team naming rules.
  2. The use of SCSS
  3. Use flexbox.
  4. Avoid using! important
  5. Avoid inline styles. Separate content from design for easier maintenance.
  6. Define some global styles for easy use

2.5. The annotation

  1. Are there appropriate comments around important features?
  2. Does the important function comment contain the relevant function description? (Input, output, function, etc.)
  3. Can you infer from the comments what the following code does?
  4. Does TODO still exist in the code? Can features be removed or improved?
  5. Do you leave instructions where accidents may occur

3. Code quality

  1. Does the code work?
  2. Is there useless debugging code?
  3. Whether the console has an obvious error
  4. Is the code easy to understand and logical? Whether the redundant
  5. Is the code as modular as possible?
  6. Is it as componentized as possible
  7. Whether the timer is eliminated with the life cycle
  8. Whether component destruction removes listeners
  9. Whether to delete unused installation packages from NPM
  10. Interface requests must use async await
  11. More than two parameters can be converted to object parameters, otherwise a method parameter to increase the maintainability of the code
  12. There is no error handling, such as sending request data when the network is abnormal
  13. Use async/await asynchronous requests with try/catch synchronously
  14. Parse () is used synchronously with a try/catch conversion
  15. Make use of environment profiles and global constants
  16. Implicit conversions are used for conditional judgment
  17. After the data is obtained, it is processed and then assigned
  18. If a value cannot be null, whether a default value is set in advance
Data: {name: 'not logged in'} person? .name && (name = person.name)Copy the code

4. Safety check

  1. Are all pages where users can enter information filtered against XSS and special characters? (XSS attack Defense)
  2. Are all data inputs checked (for correct type, length, format, and range) and encoded? (Form verification)
  3. The front end checks whether the return from the interface is valid and correct.
  4. When developing code related to DOM manipulation, do you deal with cases where the DOM does not exist or has been artificially modified?
  5. When retrieving data and information, are types processed, converted and set to null default values?
  6. Is error handling logic written in all the places where errors can occur? For example, block execution, display error messages, and record error logs and information.
  7. Are XSS characters filtered in the code where window.location attributes are retrieved?
  8. Are the output values checked and encoded?
  9. Can invalid parameter values be handled?
  10. No permission or access error is 404 accessed? (Later unified 404 page)

5. Performance check

  1. Localstorage usage issues (to be added)
  2. Whether the button is throttling or anti-shaking
  3. Is the JS code at the bottom as far as possible? Is the CSS code at the top as much as possible?
  4. Is the CDN deployed or the caching function enabled?
  5. Are static resources packed and compressed before going live or published? (webpack)
  6. Correct use of preloading, lazy loading and other techniques to improve performance.
  7. Are images and other resources compressed?
  8. Loop lengths are cached ahead of time
Const a = [1,2,3,4,5] ❎ for (let I = 0; i < a.length; I ++) {} ✅ const len = a.length for (let I = 0; i < len; i++) {}Copy the code
  1. The loop ends as early as possible
  2. SetInterval is used with setTimeout when lists need to be polled
  3. Interfaces are invoked within Created as much as possible

PS: The above is only a personal summary, the coverage is not complete, welcome to add ~~~~~~~~