Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to carry out front-end refactoring in VSCode". In daily operation, I believe many people have doubts about how to carry out front-end refactoring in VSCode. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to carry out front-end refactoring in VSCode". Next, please follow the editor to study!

Rename

Why to rename: the name is not clear and cannot be understood.

Procedure:

Select the variable name, select the rename symbol (Rename Symbol) with the right mouse button, or use the shortcut key F2

Enter the name you want to change in the pop-up box

VSCode will change all the related names.

Reconstruction operation

Select the content to be refactored, right-click to select refactoring (Refactor), or use Ctrl + Shift + R.

Depending on what is selected, the following may appear for refactoring:

Generate 'get' and' set' accessors generates get, set processors

Convert a function to an ES2015 class

Convert all functions to classes

Method extracted into class' xxx'

Readonly field extracted into class' xxx'

Generate 'get' and' set' accessors generates get, set processors

Extract function

The inner function extracted to the current function

Extract function into the Module range

Extract function into the global range

Convert Convert to template string to template string

Extract constant

Constant extracted to a closed range

Extract constant into the Module range

Convert to optional chain expression

Delete unused statements

Before the unused declaration

Move to a new File

Convert default export to named export

Convert named export to default export

Convert namespace import to named export

Convert named imports to namepace export

Import/export

Function / class

Variable / expression

String

Expression / function

Object method

Class

Magic number

Why modify magic numbers? Because apart from the decimal number, the actual meaning of the number can not be understood.

Goal: define a constant value and write down the actual meaning of the changed number.

Action:

Select the magic number to reconstruct. As needed, the recommended choices are:

Both define a constant, the former in the current function and the latter in the entire module / file

Constant extracted to a closed range

Extract constant into the Module/global range

The code is extracted into a new variable and a renamed input box appears

Use all uppercase words, which are spaced with "_".

Example: this year's Singles Day will last for 13 days, except for the end of the Singles Day promotion.

Function promotionEndDate () {return new Date (new Date ('2022-11-11). GetTime () + 13 * 60 * 60 * 24 * 1000);} / * * modified: * extract the start time START_DATE and the number of days of duration LASTING_DAYS to make a variable * if there is only one use, it is defined in the function used; * if it is useful in many places, you can consider putting it outside the function and in the module. * / function promotionEndDate () {const START_DATE = '2022-11-11; const LASTING_DAYS = 13; return new Date (new Date (START_DATE). GetTime () + LASTING_DAYS * 60 * 60 * 24 * 1000);}

Complex logical conditions

Why modify complex logic? Complex logic often has many conditional judgments and is more difficult to read.

Action:

Select complex logical conditions for refactoring. As needed, select:

Constant extracted to a closed range

The inner function extracted to the current function

Extract function into the Module/global range

The code is extracted into a new variable / function and a renamed input box appears

Use hump naming, start with is/has, and capitalize the first letter of each word.

Example: returns the number of days in a specified month

Function monthDay (year, month) {var day31 = [1,3,5,7,8,10,12]; var day30 = [4,6,9,11]; if (day31.indexOf (month) >-1) {return 31;} else if (day30.indexOf (month) >-1) {return 30 } else {if ((year% 4 = = 0) & & (year% 100! = 0 | | year% 400 = = 0)) {return 29;} else {return 28 } / * * modified * whether leap years are often used in date processing functions, so they are extracted to the outermost layer of the current module * / function monthDay (year, month) {. If (day31.indexOf (month) >-1) {return 31;} else if (day30.indexOf (month) >-1) {return 30;} else {if (isLeapYear (year)) {return 29;} else {return 28 } function isLeapYear (year) {return (year% 4 = = 0) & & (year% 100! = 0 | | year% 400 = = 0);}

A code snippet with comments

The idea that code is a comment is more recommended. Before we write comments, we need to figure out why we need comments.

If the code itself is clear, you should delete the comments.

If you extract a code snippet and give it an appropriate name, you can make the code easy to read or delete comments.

Goal: extract the code snippet to make a function, which is named according to the specific function of the code block.

Action:

Select the code block and Refactor it. Select:

The inner function extracted to the current function

Example: ajax request

Function ajax (options) {options = options | | {}; options.type = (options.type | | 'GET'). ToUpperCase (); options.dataType = options.dataType | |' json'; const READY_STATE = 4; const NET_STATUS = {OK: 200, RIDERCT: 300}; const params = this.formatAjaxParams (options.data); let xhr; / / create-non-IE6-first step if (window.XMLHttpRequest) {xhr = new window.XMLHttpRequest () } else {/ / IE6 and below browsers xhr = new window.ActiveXObject ('Microsoft.XMLHTTP') } / / Connect and send-second step if (options.type = 'GET') {...} else if (options.type =' POST') {.} / / receive-third step xhr.onreadystatechange = function () {if (xhr.readyState = READY_STATE) {...}};} / / modified function ajax (options) {. Let xhr; create (); connectAndSend (); recieve (); function create () {.} function connectAndSend () {.} function recieve () {.}}

Excessively long function

The function is split into an external function and then called internally.

Action:

Select code block refactoring and select:

Extract function into the Module/Global range

The code block generates a function with the necessary parameters

Example: in the previous example, the receiving module of ajax can be separated into the function of the module.

Function ajax (options) {... Create (); recieve (); connectAndSend (options, xhr, params);} function connectAndSend (options, xhr, params) {if (options.type = = 'GET') {.} else if (options.type =' POST') {.}

Duplicate code / overly long file

Action:

Select code block refactoring, select Move to a new file

The code is migrated to a file with the current function / class as the file name; if there is more than one class / function, the first class / function is specified

Expose functions / classes using export

Use import to introduce functions / classes in the original file.

Import/export

Default and naming, namespaces, and naming conversion.

/ / namedexport function nextMonthDay (year, month) {} / / defaultexport default function nextMonthDay (year, month) {} / / namepace import * as refactor from'. / refactor';// namedimport {nextMonthDay} from'. / refactor'

Object method

Generate get, set processors

Const person = {age: 32}; / generate get, set processor const person = {_ age: 32, get age () {return this._age;}, set age (value) {this._age = value;},}

Template string

String concatenation, quickly converted to template string:

Class Person {constructor (firstName, lastName) {this.firstName = firstName; this.lastName = lastName;} getFullName () {return this.firstName +'+ this.lastName;}} / / template string class Person {constructor (firstName, lastName) {this.firstName = firstName; this.lastName = lastName;} getFullName () {return `${this.firstName} ${this.lastName}`;}}

Class

Generate get, set handlers, similar to the results of object methods.

The Method extracted to class xxx is similar to the code annotated above and the repeated code extracted.

I will not repeat it here.

Provides ES 2015 class transformations and supports prototype method transformations.

Const Person = function () {this.age = 32;}; Person.prototype.getAge = function () {return this.age;} Person.prototype.setAge = function (value) {return this.age = value;} / / ES 2015 type class Person {constructor () {this.age = 32;} getAge () {return this.age;} setAge (value) {return this.age = value }} at this point, the study on "how to do front-end refactoring in VSCode" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.