Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

With the rapid iteration of the agile development of the project, there are more and more similar codes. In order to catch up with the schedule, the development may not have much time to consider the code quality, and the business process is constantly expanding with the iteration, so the development cannot be considered as comprehensive. As a result, front-end projects become more redundant and have a lot of legacy code or problems.

Moderate code refactoring is necessary to improve readability and code quality.

However, refactoring does not mean that you have to do it all at once. You also need to consider the cost of refactoring, especially if some code runs for a long time, there will be a lot of stumbles in the process, and consider whether refactoring is worthwhile and the scope of refactoring. Step by step with code that you are completely familiar with, so as not to interfere with normal project iterations.

Business logic refactoring

Mainly optimize the code structure, improve readability; Reasonable split and combination, improve code reuse

  1. Check and remove the devil numbers from the program, and define the numbers as meaningful macro constants
  2. Troubleshoot and use guard statements to unnest multiple layers of if statements
  3. Check and delete redundant service logic
  4. Identify and merge duplicate business code and isolate common functions
  5. Check for interdependent coupling between the business logic and the underlying utility class control class
  6. Check network interfaces provided by the background and encapsulate them as apis to separate front-end service interfaces from back-end apis
  7. Check the large function, divide the large function into several independent function small function, avoid one function to achieve too many functions, follow the “single responsibility principle”
  8. Replace the conditional judgment with polymorphism

Generic component refactoring

  1. Extraction and encapsulation of common components
  2. Component plug-in development and remote deployment
  3. Check whether common components and business code are coupled and need to be decoupled

System stability reconfiguration

  1. Troubleshoot common errors
  • Error: The base class from which all other errors are inherited
  • EvalError: The Eval function executes an exception
  • RangeError: The array is out of bounds
  • ReferenceError: Error that occurs when referring to a variable that does not exist
  • SyntaxError: indicates a SyntaxError
  • TypeError: indicates an error that occurs when the value type is not the expected type
  • URIError: An error caused by using the global URI handler in a wrong way
  1. Exception capture plus logging

Memory Leak Detection

  1. The timer
  2. A static variable
  3. Unexpected global variables: check Windows mounted objects, need to release after use
  4. Memory leaks caused by closures
  5. No DOM element references are cleared
  6. Event listening, no untying

Unnecessary Resource Deletion

Delete useless resources such as images, CSS styles, JS, etc

Performance partial refactoring

  1. Review and identify optimization points to improve site performance
  2. Check and delete unnecessary interface layers to reduce interface drawing time
  3. Check long code pages and carry out reasonable modular transformation
  4. Common style code extraction, fair use of CSS precompiled language, fair use of Scoped