フロントエンドの再構築に VSCode を使用する方法は?以下の記事ではVSCodeでフロントエンドを再構築する方法を紹介しますので、ご参考になれば幸いです。
日常の開発では、リファクタリングが必要な場面がよくあります。VS Code の "リファクタリング" メニューは、豊富な操作を提供します。 。それは再建作業をより効率的に完了するのに役立ちます。 [推奨学習：「vscode入門チュートリアル」]
ただし、このメニューで提供される操作は毎回異なり、一時的に使用すると何らかの不具合が発生します。そのため、多くの学生はこの再構成機能にはあえて触れないことが多いです。
ここでは、参考のためによく使用される操作をいくつかまとめます。
まず、一般的な名前変更についてウォーミングアップしてみましょう。
名前を変更する理由: 名前が明確ではなく、理解できません。
操作手順:
変数名を選択し、右クリックして シンボル名の変更 を選択するか、ショートカット キー F2 # を使用します。 ##;
#ウォーミングアップは完了しました。本題に入りましょう。 
Ctrl Shift R を使用してください。 #選択したコンテンツに応じて、選択と再構築のために次のコンテンツが表示される場合があります:
デフォルトのエクスポートを名前付きエクスポートに変換する
名前付きエクスポートをデフォルトのエクスポートに変換する新しいファイルに移動
定数の抽出閉じたスコープ内の定数に抽出します
現在の関数の内部関数を抽出#モジュール スコープで関数を抽出
#グローバル スコープで関数を抽出#クラス
##メソッドに抽出##クラス 'xxx'読み取り専用フィールドに抽出
再構築するマジックナンバーを選択します。ニーズに応じて、以下を選択することをお勧めします。
#閉じたスコープの定数に抽出 モジュール内の定数に抽出/globalscope
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);
}閉じたスコープ定数に抽出します
現在の関数の内部関数に抽出します例子：返回指定的某个月有多少天
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）。选择：
例子：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() {...}
}过长的函数
功能拆分做成外部函数，再在内部调用。
操作：
选择代码块重构，选择：
代码块会生成一个函数，并携带必要的参数
例子：上个例子中，可以将 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 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
