Pycharm
 
2023.3
快捷方式：Windows
获取 PyCharm
  1. 语言和框架
  2. JavaScript
  3. 重构 JavaScript

专业的
重构 JavaScript

最后修改时间：2023 年 9 月 28 日

仅适用于 PyCharm Professional：下载以尝试或 比较版本

所需插件：

Javascript and TypeScript - 该插件仅在 PyCharm Professional 中可用，默认情况下启用。

重构意味着更新源代码而不改变应用程序的行为。重构可以帮助您保持代码可靠、干燥且易于维护。

移动符号重构

除了移动文件和文件夹之外，PyCharm 还允许您移动 JavaScript 顶级符号。Move Symbol Refactoring适用于 ES6 模块中的类、函数和变量。

移动类、函数或变量

  1. 选择要移动的符号。

  2. 按或选择重构 | 从上下文菜单或主菜单移动。或者，选择重构 | 重构此或按，然后从列表中选择“移动” 。F6CtrlAltShift0T

    “移动模块成员”对话框打开。

  3. 指定目标文件并选择要移动的成员。

  4. 默认情况下，PyCharm 会自动将成员的可见性提高到所需的级别。如果要保持可见性级别不变，请在“可见性”中单击“原样”。

拉动类成员重构

Pull类成员重构将类方法在类层次结构中向上移动——从当前类到超类。

示例：将类方法移至超类

假设您有一个AccountingDepartment扩展抽象类的类Department。在此示例中，“拉取类成员向上printMeeting()”重构将方法从其移动AccountingDepartment到其超类Department。

class Department {
    name;

    printName() {
        console.log("Department name: " + this.name);
    }
}

class AccountingDepartment extends Department {
    printMeeting() {
        console.log("The Accounting Department meets each Monday at 10am.");
    }

    generateReports() {
        console.log("Generating accounting reports...");
    }
}

将类的方法移至超类

  1. 将插入符号放在类中要从中拉出成员的任意位置。

  2. 选择重构 | 从主菜单或上下文菜单中拉出成员。将打开“拉出成员”对话框。

  3. 从列表中，选择要将方法移动到的超类。

  4. 要拉出方法，请在“要拉出的成员”列表中选中该方法旁边的复选框。

重命名重构

除了在任何语言的上下文中都可用的重命名文件和文件夹之外，您还可以重命名类、方法、函数、变量和参数。PyCharm 更改其声明中的符号名称，以及默认情况下其在当前项目中的所有用法。

重命名类及其方法

保持类名称和包含文件的名称一致

当您重命名类时，如果文件具有相同的名称，PyCharm 还会建议重命名该文件。如果您接受建议，PyCharm 会在其他文件的导入语句中更新此文件的名称。

/help/img/idea/2023.3/ws_js_refactoring_rename_class_and_file.png
动图

如果您拒绝此建议，您可以稍后使用“重命名文件”意图操作重命名该文件。另一个意图操作建议将类移动到具有相应名称的新文件中。建议名称的格式由从代码样式：JavaScript页面上的文件名约定列表中选择的样式确定。

ws_js_refactoring_rename_file_intention_custom_naming_convention.png

如果您刚刚创建了一个新文件，但在开始在其中键入类或接口时想出了一个更好的名称，那么这非常有用。要调用意图操作，请将插入符号放在感兴趣的类的名称处，然后按。AltEnter

重命名函数、变量和参数

/help/img/idea/2023.3/ws_javascript_rename_function.png
动图

函数、变量和参数的重命名重构可能会就地执行，但您可以按 在重命名对话框中配置重构范围。ShiftF6

要默认打开“重命名”对话框，请打开“设置”对话框 ( )，然后转至编辑器 | 代码编辑，然后在“指定重构选项”区域中选择“在模式对话框中”选项。CtrlAlt0S

重构设置：在模式对话框中打开设置

重命名常量

重命名符号的动态用法

由于 JavaScript 的动态特性，在某些情况下，动态引用是有效的用法，应该重命名。然而，重命名动态用法通常不是预期的行为。在下面的示例中，更改test()为test1()inrename.test()是正确的，而 inhello.test()则为错误。

class Rename{
    test() {
        return 12345;
    }
}

let rename = new Rename();
let hello = window["Test"];

let a = rename.test();
let b = hello.test();

因此，PyCharm在应用复杂的重构之前始终显示预览窗口。

动态使用的重构预览

提取重构

PyCharm 提供各种Extract重构来引入参数、变量、常量、字段、方法和函数。要运行任何这些重构，请选择要重构的表达式，然后选择“重构”|“重构”。<目标>。您可以选择整个表达式或将插入符号放置在其中的任何位置，PyCharm 将帮助您进行选择。

参数介绍

使用引入参数重构将函数调用中的表达式替换为参数。PyCharm 将相应地更新函数的声明和调用。新参数的默认值可以在函数体内初始化或通过函数调用传递。

假设您有一段1在函数中硬编码的代码calculate_sum(i)。通过引入参数重构，您可以用参数替换此硬1编码i2。新i2参数可以作为可选参数或根据需要提取。

示例1：引入可选参数

提取新参数i2作为可选参数。新参数在 的主体中初始化，并且incalculate_sum(i)的调用没有改变。calculate_sum(i)show_sum()

请参阅下面的选择参数类型（可选）。

function calculate_sum(i) {
    alert('Adding ' + 1 + ' to ' + i);
    return 1 + i;
}

function show_sum() {
    alert('Result: ' + calculate_sum(5));
}

示例2：引入必需的参数

提取一个新参数作为必需参数， ini2的调用也相应改变。calculate_sum(i)show_sum()

请参阅下面的选择参数类型（必需）。

function calculate_sum(i) {
    alert('Adding ' + 1 + ' to ' + i);
    return 1 + i;
}

function show_sum() {
    alert('Result: ' + calculate_sum(5));
}

引入一个参数

  1. 在编辑器中，将插入符号放在要转换为参数的表达式内，然后按或选择Refactor | 从上下文菜单中引入参数。CtrlAlt0P

    或者，执行以下操作之一：

    • 按并选择引入参数。CtrlAltShift0T

    • 转到重构 | 摘录| 范围。

  2. 如果在当前插入符号位置检测到多个表达式，请从“表达式”列表中选择所需的表达式。

    ws_js_extract_parameter_select_expression.png

  3. 如果找到多个所选表达式，请从“找到多个匹配项”列表中选择“仅替换此匹配项”或“替换所有匹配项”。

    ws_js_extract_parameter_multiple_occurrences.png

    最后，出现配置重构的弹出窗口。

    ws_js_extract_parameter_specify_parameter_name_and_type.png

  4. 选择“生成 JSDoc”以生成JSDoc注释块。如果您需要指定自定义默认参数值，这可能会有所帮助。

  5. 选择新参数的类型（可选或必需）并指定其默认值（如果适用）：

    • 如果选中可选参数复选框，则参数将使用函数体中的默认值进行初始化。

      请参阅上面的引入参数示例 1。

    • 如果清除可选参数复选框，则默认参数值将通过现有函数调用传递。所有函数调用都将根据新函数签名进行更改，并且参数初始化将添加到函数体中。

      请参阅上面的引入参数示例 2。

    最初，PyCharm 接受调用重构的表达式作为默认值。大多数情况下您不需要更改它。如果仍然需要，请在 JSDoc 注释中以 格式指定另一个默认值@param <parameter name> - <default value>。

  6. 通过在列表中双击建议的参数名称之一来接受它，或者在带有红色画布的字段中指定自定义名称。准备好后按下。Enter

    ws_js_extract_parameter_result.png

    另请注意，在 ES6 代码中，function calculate_sum(i, i2 = 1)将应用新的默认函数参数语法而不是i2 = i2 || 1;. 从https://developer.mozilla.org 网站了解有关默认函数参数的更多信息。

选择重构模式

您可以如上所述直接在编辑器中（在就地模式下）提取参数，或使用“引入参数”对话框。这两种方法很相似，区别如下：

  • 预览重构的结果。

    在对话框中，您可以单击“预览”并在“查找”工具窗口的专用选项卡中检查预期的更改。在就地模式下，此功能不可用。

  • 指定默认参数值。

    在对话框中，PyCharm 在“值”字段中建议默认参数值，您可以在其中接受建议或指定其他值。在就地模式下，PyCharm 将调用重构的表达式视为默认参数值。要指定另一个值，您必须使用 JSDoc 注释块。

默认情况下，PyCharm 在就地模式下运行引入参数重构。要使用“提取参数”对话框，请打开“设置”对话框 ( )，然后转至编辑器| 代码编辑，然后选择“重构”区域中的“在模式对话框中”选项。CtrlAlt0S

引入变量

使用引入变量重构将表达式替换为函数范围变量 (var)或块范围变量 (let)。这种重构使您的源代码更易于阅读和维护。

假设您有一个函数，其语句中的表达式部分是硬编码的return：

Parenizor.method('toString', function ())
{
    return '(' + this.getValue() + ')';
}
通过引入变量重构，您可以将'(' + this.getValue() + ')'表达式替换为变量，例如string。提取的变量的范围取决于其声明中使用的语句var或let声明新变量的上下文（函数内部或外部）。

示例 1：通过 let 语句声明引入块作用域变量

从语句中的表达式中string提取变量。新变量是用内部语句声明的。'(' + this.getValue() + ')'returnletParenizor.method('toString', function ())

Parenizor.method('toString', function ())
{
    return '(' + this.getValue() + ')';
}

示例 2：引入变量并在任何函数外部声明它

appName从表达式中提取变量navigator.appName并使用var任何函数外部的语句进行声明。

var browserName = "N/A";
if (navigator.appName.indexOf("Netscape") != -1) {
    browserName = "NS";
} else if (navigator.appName.indexOf("Microsoft") != -1) {
    browserName = "MSIE";
} else if (navigator.appName.indexOf("Opera") != -1) {
    browserName = "O";
}

引入一个变量

  1. 在编辑器中，选择要转换为变量的表达式，然后按或选择Refactor | 从上下文菜单中引入变量。CtrlAlt0V

    或者，执行以下操作之一：

    • 按并选择引入变量。CtrlAltShift0T

    • 转到重构 | 摘录| 多变的。

  2. 如果在当前插入符号位置检测到多个表达式，请从“表达式”列表中选择所需的表达式。

    ws_js_refactoring_extract_variable_inplace_select_expression.png

  3. 如果找到多个所选表达式，请从“找到多个匹配项”列表中选择“仅替换此匹配项”或“替换所有匹配项”。

    ws_js_refactoring_extract_variable_inplace_multiple_occurrences.png

    最后，出现配置重构的弹出窗口。

  4. 从列表中选择要在新变量声明中使用的语句：

    ws_js_refactoring_extract_variable_inplace_choose_scope_type.png

  5. 通过在列表中双击建议的参数名称之一来接受它，或者在带有红色画布的字段中指定自定义名称。准备好后按下。Enter

选择重构模式

您可以如上所述在编辑器中直接提取变量（在就地模式下），或者使用“提取变量”对话框。默认情况下，PyCharm 在就地模式下运行引入变量重构。要使用“提取变量”对话框，请打开“设置”对话框 ( )，然后转至编辑器 | 代码编辑，然后选择“重构”区域中的“在模式对话框中”选项。CtrlAlt0S

引入常数

使用引入常量重构将表达式替换为常量。这种重构使您的源代码更易于阅读和维护。它还可以帮助您避免使用硬编码常量，而不对其值或用途进行任何解释。

在类内部，您可以引入只读字段或选择一个范围（如果多个范围合适）。在其他情况下，PyCharm 仅引入局部常量。

示例 1：选择引入常量的范围

假设您有一个带有硬编码AccountingDepartment方法的类。printName()"Department name :"

class AccountingDepartment {
    name;

    printName() {
        console.log("Department name: " + this.name);
    }

    printMeeting() {...
    }

    generateReports() {...
    }
}

PyCharm 可以引入一个新常量作为本地常量并在函数内部声明它printName()，或者作为全局常量或模块并在类外部声明它。

class AccountingDepartment {
    name;

    printName() {
        const departmentName = "Department name: ";
        console.log(departmentName + this.name);
    }

    printMeeting() {...
    }

    generateReports() {...
    }
}
/help/img/idea/2023.3/ws_js_refactoring_extract_constant_local.png
动图

示例 2：在不选择范围的情况下引入常量

如果从任何类外部调用 Introduce Constant 重构，PyCharm 会自动引入局部变量并在当前函数或块内声明它。

let output = MyFunction(5, 8);
document.writeln("The value is .".output);
/help/img/idea/2023.3/ws_js_extract_constant.png
动图

引入一个常数

  1. 在编辑器中，选择要转换为常量的表达式，然后按或选择Refactor | 从上下文菜单中引入常量。CtrlAlt0C

    或者，执行以下操作之一：

    • 按并选择引入常数。CtrlAltShift0T

    • 转到重构 | 摘录| 持续的。

    调用Introduce Constant重构

  2. 如果在当前插入符号位置检测到多个表达式，请从“表达式”列表中选择所需的表达式。

    引入常量：选择表达式

  3. 如果从类内部调用重构，请引入只读字段或选择新常量的范围，请参阅示例 1。

    引入常量：选择范围

    对于全局常量，可以找到所选表达式的多次出现。从找到的多个匹配项列表中选择仅替换此匹配项或替换所有匹配项。

    引入常量：全局常量多次出现

  4. 通过在列表中双击建议的参数名称之一来接受它，或者在带有红色画布的字段中指定自定义名称。准备好后按下。Enter

    引入常量：选择名称

介绍领域

Introduce Field重构声明一个新字段并使用所选表达式对其进行初始化。原来的表达式被替换为字段的用法。

笔记

Introduce Field 重构仅在类中可用。

在下面的示例中，_calcArea引入了相同的字段 。这些示例说明了初始化引入字段的三种不同方法。

示例1：引入的字段在封闭方法中初始化

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }

    get area() {
        return this.calcArea();
    }

    calcArea() {
        return this.height * this.width;
    }
}

示例 2：提取的字段在其声明中初始化

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }

    get area() {
        return this.calcArea();
    }

    calcArea() {
        return this.height * this.width;
    }
}

示例3：提取的字段在类的构造函数中初始化

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }

    get area() {
        return this.calcArea();
    }

    calcArea() {
        return this.height * this.width;
    }
}

引入一个字段

  1. 在编辑器中，选择要转换为字段的表达式，然后按或选择Refactor | 从上下文菜单中引入字段。CtrlAlt0F

    或者，执行以下操作之一：

    • 按并选择引入字段。CtrlAltShift0T

    • 转到重构 | 摘录| 场地。

  2. 在弹出窗口中，选择新字段的初始化位置：

    • 目前的方法，参考上面的例子1。

    • 字段声明，参考上面的示例2。

    • 构造函数，参考上面的例子3。

    就地提取字段

  3. 通过在列表中双击建议的参数名称之一来接受它，或者在带有红色画布的字段中指定自定义名称。准备好后按下。Enter

选择重构模式

默认情况下，PyCharm 直接在编辑器中运行 Introduce Field 重构（就地模式），如上所述。

要在重构时使用“提取字段”对话框，请打开“设置”对话框 ( )，然后转到“编辑器”|“提取字段”对话框。代码编辑，然后选择“重构”区域中的“在模式对话框中”选项。CtrlAlt0S

提取方法

提取方法重构允许您使用提取的代码创建命名方法或函数。当调用提取方法重构时，PyCharm 会检测作为所选代码片段的输入的变量以及作为其输出的变量。检测到的输出变量用作提取的方法或函数的返回值。

在下面的示例中，从c = a + b;表达式中提取了一个函数。

示例 1：从另一个函数内的表达式中提取全局作用域函数

c = a + b;调用重构的表达式位于函数内部MyFunction()。选择全局目标范围。

例1.1：生成函数声明

function MyFunction(a, b) {
    c = a + b;
    return (c * c);
}

result = MyFunction(4, 6);
document.write(result);

示例 1.2：提取的函数在表达式内声明

function MyFunction(a, b) {
    c = a + b;
    return (c * c);
}

result = MyFunction(4, 6);
document.write(result);

示例 2：从任何函数外部的表达式中提取全局作用域函数

c = a + b;调用重构的表达式位于任何函数之外。因此，无法选择目标范围。

例2.1：生成函数声明