VSCode에서 프런트엔드 재구성을 수행하는 방법은 무엇입니까? 방법에 대한 간략한 분석

프런트엔드 리팩토링에 VSCode를 어떻게 사용하나요? 다음 글에서는 VSCode의 프론트엔드 재구성 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

일상적인 개발에서 우리는 종종 리팩토링의 필요성에 직면합니다. VS Code의 "Refactor" 메뉴는 다양한 작업 세트를 제공합니다. 이는 재건축 작업을 보다 효율적으로 완료하는 데 도움이 될 수 있습니다. [추천 학습: "vscode 입문 튜토리얼"]

그러나 이 메뉴에서 제공하는 작업은 매번 다릅니다. 일시적으로 사용하면 특정 문제가 발생할 수 있습니다. 그러므로 많은 학생들은 종종 이 재구성 기능을 감히 건드리지 않습니다.

여기에는 참고할 수 있도록 일반적으로 사용되는 몇 가지 작업을 요약합니다.

먼저, 일반적인 이름 바꾸기로 워밍업을 해보세요!

Rename

이름을 바꾸는 이유: 이름이 명확하지 않아 이해할 수 없습니다.

작업 단계:

• 변수 이름을 선택하고 마우스 오른쪽 버튼을 클릭한 후 기호 이름 바꾸기를 선택하거나 단축키 F2 를 사용하세요. 상자 변경하려는 이름을 입력하세요. 重命名符号（Rename Symbol），或者使用快捷键 F2 ；

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

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

热身完毕，下面我们进入正题！

重构操作

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

• VSCode는 이후의 모든 관련 이름을 변경합니다.
  • 

    이제 워밍업이 완료되었으므로 본격 업무에 들어갑니다!

    리팩토링 작업

    
    • 재구성할 콘텐츠를 선택하고 마우스 오른쪽 버튼을 클릭한 후 리팩터링을 선택하거나 Ctrl + Shift + R 를 사용하세요. >.
    • 선택한 콘텐츠에 따라 선택 및 재구성을 위해 다음 콘텐츠가 나타날 수 있습니다.

  • import/export

    • 기본 내보내기를 명명된 내보내기로 변환
    이름이 지정된 내보내기를 기본 내보내기로 변환
  • 네임스페이스 변환 import를 명명된 내보내기로 변환

    이름이 지정된 가져오기를 네임스페이스 내보내기로 변환

    • function/class
    • 새 파일로 이동
    variable/expression

  • 상수 추출

    추출되어 폐쇄됨 범위 상수
    • 모듈 범위 상수로 추출
    선택적 체인 표현식으로 변환
  • 사용하지 않는 선언 제거

    사용하지 않는 선언 전

    • String
    • 템플릿 문자열 변환으로 변환템플릿 문자열로

  • 표현식/함수

    • 함수 추출
    현재 함수에서 내부 함수 추출
  • 모듈 범위에서 함수 추출

    전역 범위에서 함수 추출

    • 객체 메서드
    • 'get' 및 'set' 접근자를 생성하여 get 및 set 프로세서 생성
  classes

'get' 및 'set' 접근자를 생성하여 get 및 set 프로세서 생성 함수를 ES2015 클래스로 변환

모든 함수를 클래스로 변환

'xxx' 클래스의 메소드로 추출

'xxx' 클래스의 읽기 전용 필드로 추출

• • 매직넘버
  • 매직넘버를 변경하는 이유는 무엇인가요? 왜냐하면 기본 숫자를 제외하면 숫자의 실제 의미를 인간이 이해할 수 없기 때문입니다.
  목표: 상수 값을 정의하고 변경된 숫자의 실제 의미를 적어보세요.
작업:
재구성할 매직 넘버를 선택하세요. 필요에 따라 다음을 선택하는 것이 좋습니다.
닫힌 범위에서 상수 추출

모듈/전역 범위에서 상수 추출둘 다 상수를 정의하고 전자는 현재 함수이고 후자는 전체입니다. 모듈/파일에서

코드가 새 변수로 추출되고 이름이 변경된 입력 상자가 나타납니다.

모두 대문자를 사용하고 단어는 "_"로 구분합니다. ".

• 예: 올해 Double Eleven은 Double Eleven 프로모션이 종료되는 시간을 계산하여 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);
    }

  복잡한 논리 조건
  왜 복잡한 논리를 수정하나요? 복잡한 논리에는 조건부 판단이 많아 읽기 어려운 경우가 많습니다.
  • 작업:
재구성을 위한 복잡한 논리 조건을 선택합니다. 필요에 따라 다음을 선택하세요.
닫힌 범위 상수로 추출

• 현재 함수의 내부 함수로 추출

  🎜🎜🎜모듈/전역 범위 함수로 추출🎜🎜🎜🎜🎜🎜코드 새 변수/함수에는 이름이 변경된 입력 상자가 나타납니다. 🎜🎜🎜🎜 이름은 🎜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 引入函数/类。

例子：日期处理函数：

移动到新文件后：

index.js 中，还能跳转到定义的代码，但是实际上并没有引入。

重命名，修复 import/export；

import/export

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

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

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

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

// named
import { 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的相关知识，请访问：vscode教程！！

위 내용은 VSCode에서 프런트엔드 재구성을 수행하는 방법은 무엇입니까? 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!