Refactorización front-end con VS Code

En el desarrollo diario, a menudo nos encontramos con la necesidad de refactorizar, y el menú "Refactorizar" en VS Code nos brinda una gran cantidad de operaciones. Puede ayudarnos a completar el trabajo de refactorización de manera más eficiente.

Sin embargo, las operaciones proporcionadas por este menú son diferentes cada vez, si lo usa temporalmente, traerá algunos problemas. Por lo tanto, a menudo hay estudiantes que no se atreven a tocar esta función de refactorización.

Aquí, se resumen algunas operaciones de uso común para su referencia.

Primero, un cambio de nombre común, ¡caliente!

Rebautizar

Por qué cambiar el nombre: el nombre no es lo suficientemente claro para que la gente lo entienda.

Pasos:

Seleccione el nombre de la variable, haga clic con el botón derecho para seleccionar 重命名符号（Rename Symbol）o utilice las teclas de método abreviado F2 ;
Introduzca el nombre que desea modificar en el cuadro emergente;
VSCode cambiará todos los nombres relacionados posteriores.

Se acabó el calentamiento, ¡vamos al grano!

operación de refactorización

Seleccione el contenido que desea reconstruir, haga clic con el botón derecho para seleccionar 重构（Refactor）o use Ctrl + Shift + R.
Dependiendo de lo que se seleccione, pueden aparecer las siguientes opciones para la refactorización:
- importación y exportación
  - Convertir exportación predeterminada a exportación con nombre
  - Convertir exportación con nombre a exportación predeterminada
  - Convierta la importación de espacio de nombres en exportación con nombre
  - Convertir importaciones con nombre en exportación de espacio de nombres
- función/clase
  - Mover a un nuevo archivo
- variable/expresión
  - Extraer constante
  - constante extraída al osciloscopio adjunto
  - Constante extraída al alcance del módulo
  - Convertir a expresión de cadena opcional
  - eliminar declaraciones no utilizadas
  - antes de la declaración no utilizada
- cuerda
  - Convertir a cadena de plantilla Convertir a cadena de plantilla
- expresión/función
  - Extraer función
  - La función interna extraída en la función actual
  - Funciones extraídas al alcance del Módulo
  - función extraída al alcance global
- 对象方法
  - generate ‘get’ and ‘set’ accessors 生成get、set处理器
- 类
  - generate ‘get’ and ‘set’ accessors 生成get、set处理器
  - 将函数转换成 ES2015类
  - 将所有函数转换成类
  - 提取到 class 'xxx' 中的 Method
  - 提取到 class 'xxx' 中的 readonly field

魔法数字

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

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

操作：

选中魔法数字进行重构。根据需要，推荐选择：
- 提取到封闭范围的 constant
- 提取到 Module/global 范围的 constant
两者都会定义一个常量，前者定义在当前函数内，后者则是整个模块/文件中；
代码抽取到新的变量中，并出现重命名的输入框；
使用全大写单词，单词使用“_”间隔。

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

function promotionEndDate() {
  return new Date(new Date('2022-11-11').getTime() + 13 * 60 * 60 * 24 * 1000);
}

/**
 * 修改后：
 * 将开始时间 START_DATE，持续的天数 LASTING_DAYS 抽取出来做成变量
 * 如果只有一处使用，则在使用到的函数内定义；
 * 如果多处都有用，可以考虑放在函数外，模块内。
 */
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
El bloque de código genera una función con los parámetros necesarios

Ejemplo: en el ejemplo anterior, el módulo receptor de ajax se puede separar en la función del módulo

function ajax(options) {
  ...

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

Código duplicado/archivos demasiado largos

funcionar:

Seleccione la refactorización del bloque de código, seleccione Mover a un nuevo archivo ;
El código se migrará al archivo con la función/clase actual como nombre de archivo; si hay varias clases/funciones, se especificará la primera clase/función
Exponer funciones/clases usando exportar;
Use importar para importar funciones/clases en el archivo original.

Ejemplo: Función de manejo de fecha:

Después de pasar al nuevo archivo:

En index.js, también puede saltar al código definido, pero en realidad no se presenta.

Renombrar, corregir importación/exportación;

importación y exportación

transformaciones predeterminadas y de nomenclatura, espacio de nombres y nomenclatura.

// named
export function nextMonthDay(year, month) {}

// default
export default function nextMonthDay(year, month) {}

// namepace 
import * as refactor from './refactor';

// named
import { nextMonthDay } from './refactor';
复制代码

método de objeto

Generar obtener y establecer procesadores

const person = {
  age: 32
};

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

cadena de plantilla

Concatenación de cadenas, conversión rápida a cadena de plantilla:

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}`;
  }
}
复制代码

tipo

Genere controladores get y set , similares a los resultados de los métodos de objetos.

El Método extraído a la clase xxx es similar al código escrito en los comentarios anteriores y extraído del código repetido.

No se repetirá aquí.

Proporciona transformaciones de clases de ES 2015 y admite transformaciones de métodos prototipo.

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;
  }
}
复制代码

Resumir

Hay muchas formas de refactorizar el código, estas son algunas de ellas. Espero ser útil.

Para el resto del contenido, puede hacer clic en el menú de refactorización más al refactorizar el código para ver si hay sorpresas.