VSCode中如何进行前端重构

这篇文章主要介绍“VSCode中如何进行前端重构”，在日常操作中，相信很多人在VSCode中如何进行前端重构问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”VSCode中如何进行前端重构”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

重命名

为什么要重命名：命名不清晰，无法让人理解。

操作步骤：

• 选中变量名，鼠标右键选择重命名符号（Rename Symbol），或者使用快捷键 F2 ；

• 弹出框输入想要修改的名字；

• VSCode 会把后续相关的名字都改掉。

重构操作

• 选中要重构的内容，鼠标右键选择重构（Refactor），或者使用 Ctrl + Shift + R。

• 根据选中的内容，可能会出现以下内容供选择重构：

• generate ‘get’ and ‘set’ accessors 生成get、set处理器

• 将函数转换成 ES2015类

• 将所有函数转换成类

• 提取到 class 'xxx' 中的 Method

• 提取到 class 'xxx' 中的 readonly field

• generate ‘get’ and ‘set’ accessors 生成get、set处理器

• Extract function

• 提取到当前函数里的 inner function

• 提取到 Module 范围的 function

• 提取到 global 范围的 function

• Convert to template string 转换成模板字符串

• Extract constant

• 提取到封闭范围的 constant

• 提取到 Module 范围的 constant

• Convert to optional chain expression

• 删除未使用的声明

• 在未使用的声明前

• 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

• 函数/类

• 变量/表达式

• 字符串

• 表达式/函数

• 对象方法

• 类

魔法数字

为什么要修改魔法数字？因为除进制数之外，数字的实际意义无法被人看懂。

目标：定义一个常量值，写清楚改数字的实际意义。

操作：

• 选中魔法数字进行重构。根据需要，推荐选择：

  两者都会定义一个常量，前者定义在当前函数内，后者则是整个模块/文件中；

• 提取到封闭范围的 constant

• 提取到 Module/global 范围的 constant

• 代码抽取到新的变量中，并出现重命名的输入框；

• 使用全大写单词，单词使用“_”间隔。

例子：今年双十一持续13天，计算除双十一促销结束的时间。

function promotionEndDate() {  return new Date(new Date('2022-11-11').getTime() + 13 * 60 * 60 * 24 * 1000);}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);}

复杂的逻辑条件

为什么要修改复杂逻辑？复杂的逻辑，往往条件判断繁多，阅读难度比较高。

操作：

• 选中复杂的逻辑条件进行重构。根据需要，选择：

• 提取到封闭范围的 constant

• 提取到当前函数里的 inner function

• 提取到 Module/global  范围的 function

• 代码抽离到一个新的变量/函数中，并出现重命名的输入框；

• 使用驼峰命名，使用 is/has 起头，每个单词首字母大写。

例子：返回指定的某个月有多少天

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;        }    }}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);}

写了注释的代码片段

更推荐代码即注释的理念。我们写注释之前要想明白为什么需要注释？

• 如果代码本身已经很清晰，应该删除注释。

• 如果抽取代码片段，取个合适的名字，能让代码易于阅读，也可以删除注释。

目标：将代码片段抽取出来做成函数，函数以此代码块的具体功能做命名。

操作：

• 选择代码块，重构（Refactor）。选择：

• 提取到当前函数里的 inner function

例子：ajax 请求

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;  // 创建 - 非IE6 - 第一步  if (window.XMLHttpRequest) {    xhr = new window.XMLHttpRequest();  } else { // IE6及其以下版本浏览器    xhr = new window.ActiveXObject('Microsoft.XMLHTTP');  }  // 连接 和 发送 - 第二步  if (options.type === 'GET') {    ...  } else if (options.type === 'POST') {    ...  }    // 接收 - 第三步  xhr.onreadystatechange = function () {    if (xhr.readyState === READY_STATE) {      ...    }  };}// 修改后function ajax(options) {  ...  let xhr;  create();  connectAndSend();  recieve();  function create() {...}  function connectAndSend() {...}  function recieve() {...}}

过长的函数

功能拆分做成外部函数，再在内部调用。

操作：

• 选择代码块重构，选择：

• 提取到 Module/Global  范围的 function

• 代码块会生成一个函数，并携带必要的参数

例子：上个例子中，可以将 ajax 的接收模块独立成模块的function

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

重复的代码/过长的文件

操作：

• 选择代码块重构，选择 Move to a new file；

• 代码会迁移到以当前函数/类作为文件名的文件中；如果有多个类/函数，会以第一个类/函数做命明

• 将函数/类使用 export 暴露出去；

• 在原文件中用 import 引入函数/类。

import/export

default 和命名、命名空间和命名的转换。

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

对象方法

生成get、set处理器

const person = {  age: 32};// 生成get、set处理器const person = {  _age: 32,  get age() {    return this._age;  },  set age(value) {    this._age = value;  },};

模板字符串

字符串拼接，快速转换成模板字符串：

class Person{  constructor(firstName, lastName) {    this.firstName = firstName;    this.lastName = lastName;  }  getFullName() {    return this.firstName + ' ' + this.lastName;  }}// 模板字符串class Person{  constructor(firstName, lastName) {    this.firstName = firstName;    this.lastName = lastName;  }  getFullName() {    return `${this.firstName} ${this.lastName}`;  }}

类

生成get、set处理器，与对象方法的结果类似。

提取到 class xxx 的 Method， 与上面写注释的代码、重复代码提取的类似。

在此不再复述。

提供 ES 2015 类转换，支持原型方法转换。

const Person = function() {  this.age = 32;};Person.prototype.getAge = function() {  return this.age;}Person.prototype.setAge = function(value) {  return this.age = value;}// ES 2015 类class Person {  constructor() {    this.age = 32;  }  getAge() {    return this.age;  }  setAge(value) {    return this.age = value;  }}

到此，关于“VSCode中如何进行前端重构”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！