重构 JavaScript

重构意味着在不改变应用程序行为的情况下更新源代码。重构帮助您保持代码的坚固、简洁和易于维护。

移动符号重构

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

移动类、函数或变量

选择要移动的符号。
按 F6 或从上下文菜单或主菜单中选择重构 | 移动。或者，选择重构 | 执行重构或按 Ctrl+Alt+Shift+T ，然后从列表中选择移动。
移动模块成员对话框将打开。
指定目标文件并选择要移动的成员。
默认情况下，PyCharm 会自动将成员权限提升到所需级别。如果您想保持可见性级别不变，请点击保留原样，然后在可见中选择。

向上 Pull Class Members 重构

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

例如：将类方法移动到超类

假设您有一个类 AccountingDepartment 扩展一个抽象类 Department。在此示例中， Pull Class Members Up 重构将 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...");
                        }
                    }
                
    

                    class Department {
                        name;

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

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

                    class AccountingDepartment extends Department {
                        generateReports() {
                            console.log("Generating accounting reports...");
                        }
                    }
                
    

将类的方法移到超类

将文本光标放置在您要上移成员的类内的任意位置。
请选择重构 | 上移成员从主菜单或上下文菜单中。将成员上移对话框打开。
从列表中选择您要移动方法的超类。
要向上提取方法，请在要被向上拉取的成员列表中选中其旁边的复选框。

重命名重构

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

重命名类及其方法

在编辑器中，将插入点放在要重命名的类或方法上，或选择它，然后按 Shift+F6 或从上下文菜单中选择收藏列表的新名称。
在打开的收藏列表的新名称对话框中，输入类或方法的新名称。
可选：
- 请选择搜索注释和文本和搜索文本匹配项复选框以便重命名类或方法在注释、字符串字面量和文本中的用法。
- 默认情况下，类或方法会在整个项目中被重命名。您可以从列表中选择另一个范围。

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

当您重命名一个类时，PyCharm 还会建议重命名同名文件。如果您接受建议，PyCharm 会更新其他文件中的 import 语句中的文件名。

如果您拒绝此建议，您可以稍后随时使用重命名文件意图操作重命名文件。另一种意图操作建议将类移动到具有相应名称的新文件中。建议名称的格式由文件名约定列表中选定的样式决定，位于代码样式：JavaScript页面。

ws_js_refactoring_rename_file_intention_custom_naming_convention.png

如果您刚创建了一个新文件，但在其中开始输入类或接口时想出了一个更好的名称，这会很有用。要调用意图操作，请将文本光标置于相关类的名称处并按下 Alt+Enter。

重命名函数、变量和参数

函数、变量和参数的 Rename重构可能会在原地执行，但您可以按 Shift+F6 在收藏列表的新名称对话框中配置重构范围。

要默认打开收藏列表的新名称对话框，请打开设置对话框（Ctrl+Alt+S ），转到编辑器 | 代码编辑，并在指定重构选项区域中选择在模态对话框选项。

在编辑器中，将插入点放在要重命名的函数、变量或参数上，或选择它，然后按 Shift+F6 或从上下文菜单中选择收藏列表的新名称。
如果 PyCharm 在注释或字符串中检测到符号的用法，请指定是否也要重命名这些用法。
在带有 canvas 的字段中，输入函数、变量或参数的新名称。
或者：
请再次按下 Shift+F6 以打开收藏列表的新名称对话框。
- 选中搜索注释和文本和搜索文本匹配项复选框，以重命名符号在注释、字符串字面量和文本中的用法。
- 默认情况下，该符号在整个项目中重命名。您可以从列表中选择另一个范围。

重命名常量

在编辑器中，将插入点放在要重命名的常量上，或选择它，然后按 Shift+F6 或从上下文菜单中选择收藏列表的新名称。
在打开的收藏列表的新名称对话框中，输入常量的新名称。
可选：
- 选中搜索注释和文本和搜索文本匹配项复选框，以便重命名注释、字符串文字和文本中的常量用法。
- 默认情况下，常量在整个项目中重命名。您可以从列表中选择另一个范围。

重命名符号的动态用法

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

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

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

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

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

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

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

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

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

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

因此 PyCharm 总是在应用复杂重构前显示预览窗口。

提取重构

PyCharm 提供多种 Extract重构操作，以引入参数、变量、常量、字段、方法和函数。要执行这些重构操作，请选择要重构的表达式并选择重构 | <target>。您可以选择整个表达式或将文本光标置于其中的任意位置，PyCharm 都将帮助您进行选择。

引入参数

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

假设您有一段代码，其中在函数 1 中硬编码了 calculate_sum(i)。通过引入参数重构，您可以用一个 1 参数来替换这个硬编码的 i2。新的 i2 参数可以提取为可选或必需。

示例 1：引入一个可选参数

一个新的参数 i2 被提取为可选参数。新参数在 calculate_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));
                        }
                    
     

                        function calculate_sum(i, i2) {
                            i2 = i2 || 1;
                            alert('Adding ' + i2 + ' to ' + i);
                            return i2 + i;
                        }

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

示例 2：介绍必需参数

新的参数 i2 被提取为必需参数， 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));
                        }
                    
     

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

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

引入一个参数

在编辑器中，将文本光标放置在您想要转换为参数的表达式内，然后按 Ctrl+Alt+P 或从上下文菜单中选择重构 | 引入参数。
或者，执行以下操作之一：
- 按 Ctrl+Alt+Shift+T 并选择引入参数。
- 转到重构 | 提取 | 参数。
如果在当前文本光标位置检测到多个表达式，请从表达式列表中选择所需的表达式。
如果找到多于一个的所选表达式实例，请从找到多处出现列表中选择仅替换此处或替换所有匹配项。
最后，用于配置重构的弹出窗口会出现。
选择生成 JSDoc 生成一个 JSDoc 注释块。如果您需要指定自定义的默认参数值，这可能会有所帮助。
选择新参数的类型（optional 或 required ）并指定其默认值（如果适用）：
- 如果选中可选形参复选框，参数将在函数体中使用默认值进行初始化。
  请参见 Introduce Parameter example 1 上方。
- 如果清除了可选形参复选框，默认参数值将通过现有的函数调用传递。所有的函数调用都将根据新的函数签名进行更改，并且函数体内将添加一个参数初始化。
  请参见上面的 Introduce Parameter example 2。
最初，PyCharm 将调用重构的表达式作为默认值接收。在大多数情况下，您无需更改它。如果仍有必要，请在格式 @param <parameter name> - <default value> 的 JSDoc 注释中指定另一个默认值。
通过双击列表中的建议参数名之一接受它，或在红色画布的字段中指定自定义名称。按 Enter 准备。
请注意，在 ES6 代码中，将应用新的默认函数参数语法 function calculate_sum(i, i2 = 1) ，而不是 i2 = i2 || 1;。了解有关默认函数参数的更多信息，详见 https://developer.mozilla.org 网站。

选择重构模式

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

预览重构的结果。
在对话框中，您可以点击预览，并在查找工具窗口的专用选项卡中查看预期的更改。在就地模式下，此功能不可用。
指定默认参数值。
在对话框中，PyCharm 在值字段中建议默认参数值，您可以接受建议或指定另一个值。在就地模式中，PyCharm 会将调用重构的表达式视为默认参数值。要指定另一个值，您必须使用 JSDoc 注释块。

默认情况下，PyCharm 以就地模式运行引入参数重构。要使用提取形参对话框，请打开设置对话框（Ctrl+Alt+S ），转到编辑器 │ 代码编辑，并在重构区域中选择在模态对话框选项。

引入变量

使用 Introduce Variable 重构将表达式替换为 function-scoped variable (var) 或 block-scoped variable (let)。此重构使您的源代码更易读和维护。

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

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

借助引入变量重构，您可以用变量替换 '(' + this.getValue() + ')' 表达式，例如， string。提取变量的作用域取决于其声明中使用的语句 var 或 let 以及新变量声明的上下文（在函数内部或外部）。

示例 1：用 let 声明引入块作用域变量

从 '(' + this.getValue() + ')' 表达式中在 return 语句提取出一个变量 string。新变量通过 let 语句在 Parenizor.method('toString', function ()) 内声明。

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

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

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

从 navigator.appName 表达式中提取了一个变量 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";
                        }
                    
     

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

引入变量

在编辑器中，选择要转换为变量的表达式，然后按 Ctrl+Alt+V 或从上下文菜单中选择重构 | 引入变量。
或者，执行以下操作之一：
- 按 Ctrl+Alt+Shift+T 并选择引入变量。
- 转到重构 | 提取 | 变量。
如果在当前文本光标位置检测到多个表达式，请从表达式列表中选择所需的表达式。
如果找到多于一个的所选表达式实例，请从找到多处出现列表中选择仅替换此处或替换所有匹配项。
最后，用于配置重构的弹出窗口会出现。
从列表中选择用于声明新变量的语句：
- 选择 var 引入一个函数作用域变量。
- 选择让来引入块级作用域变量，请参阅上面的示例 2。
- 选择常量以引入一个常量。
通过双击列表中的建议参数名之一接受它，或在红色画布的字段中指定自定义名称。按 Enter 准备。

选择重构模式

您可以直接在编辑器中（就地模式）提取变量，如上所述或使用提取变量对话框。默认情况下，PyCharm 在就地模式下运行引入变量重构。要使用提取变量对话框，请打开设置对话框（Ctrl+Alt+S ），转到编辑器 │ 代码编辑，并在重构区域中选择在模态对话框选项。

引入常量

使用 Introduce Constant 重构将表达式替换为常量。此重构使您的源代码更易读和维护。它还可以帮助您避免使用未解释其值或目的的硬编码常量。

在类中，您可以引入 readonly 字段或选择一个范围（如果有多个范围适合）。在其他上下文中，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() {...
                            }
                        }
                    
     

                        const departmentName = "Department name: ";

                        class AccountingDepartment {
                            name;

                            printName() {
                                console.log(departmentName + this.name);
                            }

                            printMeeting() {...
                            }

                            generateReports() {...
                            }
                        }

                    
     

示例 2：仅引入常量而不选择范围

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

                        let output = MyFunction(5, 8);
                        document.writeln("The value is .".output);

                        let output = MyFunction(5, 8);
                        const Value = "The value is ";
                        document.writeln(Value.output);

引入常量

在编辑器中，选择要转换为常量的表达式，然后按 Ctrl+Alt+C 或从上下文菜单中选择重构 | 引入常量。
或者，执行以下操作之一：
- 按 Ctrl+Alt+Shift+T 并选择引入常量。
- 转到重构 | 提取 | 常量。
如果在当前文本光标位置检测到多个表达式，请从表达式列表中选择所需的表达式。
如果从类内部调用重构，请引入 readonly 字段或选择新常量的作用域，参见示例 1。
对于全局常量，可以找到所选表达式的多个出现。从找到多处出现列表中选择仅替换此处或替换所有匹配项。
通过双击列表中的建议参数名之一接受它，或在红色画布的字段中指定自定义名称。按 Enter 准备。

引入字段

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

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

                            _calcArea;

                            get area() {
                                this._calcArea = this.calcArea();
                                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;
                            }
                        }
                    
     

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

                            _calcArea = this.calcArea();

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

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

                            _calcArea;

                            get area() {
                                return this._calcArea;
                            }

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

介绍字段

在编辑器中，选择要转换为字段的表达式并按 Ctrl+Alt+F 或从上下文菜单中选择重构 | 引入字段。
或者，执行以下操作之一：
- 按 Ctrl+Alt+Shift+T 并选择引入字段。
- 转到重构｜提取｜字段。
在弹出窗口中，选择新字段将被初始化的位置：
- 当前方法，请参阅上面的 Example 1。
- 字段声明，请参见上面的示例 2。
- 构造函数，请参阅上面的 Example 3。
通过双击列表中的建议参数名之一接受它，或在红色画布的字段中指定自定义名称。按 Enter 准备。

选择重构模式

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

要在重构时使用 Extract Field 对话框，请打开设置对话框（Ctrl+Alt+S ），转到编辑器 │ 代码编辑，并在重构区域中选择在模态对话框选项。

提取方法

提取方法重构允许您使用提取的代码创建一个命名方法或函数。当调用 Extract Method重构时，PyCharm会检测出选定代码片段的输入变量和输出变量。检测到的 output 变量用作提取方法或函数的返回值。

在下面的示例中，函数是从 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);
                    
     

                        function extracted(a, b) {
                            c = a + b;
                        }

                        function MyFunction(a, b) {
                            extracted(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);
                    
     

                        let extracted = function (a, b) {
                            c = a + b;
                        };

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

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

示例 2：从任何函数外部的表达式中提取一个全局范围的函数

c = a + b; 表达式（重构在此调用）不在任何函数内。因此，没有可用的目标范围选择。

示例 2.1：生成了一个函数声明

c = a + b;

                        function extracted() {
                            c = a + b;
                        }

                        extracted();

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

c = a + b;

                        let extracted = function () {
                            c = a + b;
                        };
                        extracted();
                    
     

例 3：在封闭函数内提取具有定义的函数

c = a + b; 表达式，它所在的位置调用了重构，该表达式位于 MyFunction() 函数内部。已经选择 function MyFunction 目标范围。

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

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

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

                            extracted();
                            return (c * c);
                        }

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

                    
     

提取函数

在编辑器中，选择要转换为函数的代码片段，然后按 Ctrl+Alt+M 或者从上下文菜单中选择重构 | 提取方法。
或者，执行以下操作之一：
- 按 Ctrl+Alt+Shift+T 并选择提取方法。
- 转到重构 | 提取 | 方法。
所选代码片段可以是一组语句，也可以是代码中使用的一个表达式。
如果选中的表达式在函数内，请从列表中选择目标范围：
- 如果您选择全局，提取的函数将在任何函数外部声明。请参阅上面的 Example 1。
- 要在当前封闭函数内定义提取的函数，请选择 function <current enclosing function name>。请参见 Example 3上文。
要打开具有更多选项的 Extract Method 对话框，请再次按 Ctrl+Alt+M。在此对话框中，您可以选择提取的函数是否通过生成的函数声明声明，或在表达式内声明。请参见上面的示例。

默认打开 Extract Function 对话框

打开设置对话框 (Ctrl+Alt+S )，进入编辑器 │ 代码编辑，并在重构区域选择在模态对话框选项。

提取超类

Extract Superclass 重构基于当前类的成员创建一个新的抽象类。创建的类会自动扩展。

假设您有一个类 AccountingDepartment 并且您希望其中的 printName() 方法将被重用。

                    class AccountingDepartment {
                        name;

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

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

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

您可以提取一个超类 Department 并在其中包含 printName 和 Name 字段。

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

提取超类

将文本光标置于您想要提取超类的类中的任意位置。
从主菜单中选择重构 | 提取 | 超类或从上下文菜单中选择重构｜提取超类。提取超类对话框打开。
指定新超类的名称并选中类成员旁边的复选框以将其包括在内。可选地，标记您要设为抽象的成员。
在目标文件字段中，指定新类文件的位置。默认情况下，该字段显示调用重构时当前文件的路径。
选择提取超类。 PyCharm 创建一个新类，并使用 extends 标记源类。
要创建一个超类并将方法参数中的源类引用替换为超类引用，请选择提取超类并在可能的地方使用它。 PyCharm 在重构预览窗格的查找工具窗口中显示建议的更改。

引入对象或数组析构

解构让您可以轻松地将数组和对象中的值解包到变量中。此功能具有非常简洁的语法，通常在需要在您的应用程序中传递数据时使用。欲了解更多信息，请参阅 Exploring ES6。

在 PyCharm 中，您可以使用意图操作 Alt+Enter 调用解构。使用替换为对象/数组解构操作，原始赋值将被删除。为了保持此分配，请使用引入对象/数组解构。

替换原始分配

请将文本光标放在数组或对象中的某个值上，然后按 Alt+Enter。
从列表中选择替换为对象解构或替换为数组解构。
如果数组或对象中的某些值未被使用，则这些元素将被跳过：

保持原始分配

请将文本光标放在数组或对象中的某个值上，然后按 Alt+Enter。
从列表中选择介绍对象解构或介绍数组解构。
此意图操作在使用 React 类组件时非常方便：

为函数生成解构参数

将文本光标放置在函数的参数处并按下 Alt+Enter。
从列表中选择将形参转换为对象。

提取 Vue 组件

提取 Vue 组件重构允许您从现有组件中提取新的 Vue.js 组件，而无需复制和粘贴。请注意，此重构仅适用于原地操作，因此请确保在编辑器 │ 代码编辑设置页面  Ctrl+Alt+S 上选择了在编辑器中重构选项。

提取 Vue.js 组件

请选择要提取的代码片段，然后从其上下文菜单中选择重构 | 提取 Vue 组件或从主菜单中选择重构 | 提取 | 提取 Vue 组件。
或者，使用专用的意图操作：选择要提取的模板片段，按 Alt+Enter ，然后从列表中选择提取 Vue 组件。如需更多信息，请参阅 Vue.js。
请输入新组件的名称。如果此名称已被使用或无效，PyCharm 会显示警告。否则，将创建一个新的单文件组件，并将其导入到父组件中。

内联重构

内联重构与提取重构相反。

示例 1：内联变量

内联变量重构用该变量或常量的初始化器替换冗余的使用。这种重构仅适用于块级作用域和函数作用域变量。

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

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

示例 2：内联函数

将内联方法/内联函数重构的结果是将方法或函数的主体放入其调用者的主体中；方法/函数本身被删除。

在下面的示例中， Sum() 的主体被放置在 Multiplication() 和 Division() 的主体中。

                    function Sum(a, b) {
                        return a + b;
                    }

                    function Multiplication(a, b) {
                        c = Sum(a, b);
                        d = c * c;
                        return d;
                    }

                    function Division(a, b) {
                        c = Sum(a, b);
                        d = Multiplication(a, b);
                        result = c / d;
                        return result;
                    }
                
    

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

                    function Division(a, b) {
                        c = a + b;
                        d = Multiplication(a, b);
                        result = c / d;
                        return result;
                    }

                
    

运行 Inline 重构

在编辑器中，把文本光标放在要内联的符号上，然后按 Ctrl+Alt+N 或从上下文菜单或主菜单中选择重构 | 内联。
在与所选符号对应的内联对话框中，确认内联重构。

“更改签名”重构

使用 Change Signature重构来更改函数名称，添加、删除、重新排序和重命名参数，并在调用层级中传播新参数。

您还可以使用 Introduce Parameter重构来添加参数。

以下示例展示了运行 Change Signature 重构的不同方式。在所有情况下，函数 result() 被重命名为 generate_result() ，并且该函数添加了一个新的参数 input。示例显示了函数调用、调用函数 show_result() 和其他代码片段在不同重构设置下可能受到的影响。

示例 1：重命名函数、添加参数并通过函数调用传递其值

在此示例中，函数 result() 被重命名为 generate_result() ，添加了一个参数 input ，并在函数调用中将值 100 作为参数传递。

                    function result() {
                    }

                    function show_result() {
                        alert('Result: ' + result());
                    }
                
    

                    function generate_result(input) {
                    }

                    function show_result() {
                        alert('Result: ' + generate_result(100));
                    }
                
    

示例 2：重命名函数并添加默认参数

在此示例中，函数 result() 被重命名为 generate_result()。默认参数 input 已添加，值为 100。新参数在 generate_result() 中以 function generate_result(input = 100) {} 的格式为 ES6 语言级别或 input = input || 100 的格式为 ES5 进行初始化。

                    function result() {
                    }

                    function show_result() {
                        alert('Result: ' + result());
                    }
                
    

                    function generate_result(input = 100) {
                    }

                    function show_result() {

                    alert('Result: ' + generate_result());
                    }

示例 3：重命名函数，添加默认参数，并将参数传递到函数调用

                    function result() {
                    }

                    function show_result() {
                        alert('Result: ' + result());
                    }
                
    

                    function generate_result(input = 100) {
                    }

                    function show_result() {

                    alert('Result: ' + generate_result());
                    }

调用更改签名

在编辑器中，将文本光标放在待重构的函数名称内，按 Ctrl+F6 或从上下文菜单或主菜单中选择重构 | 更改签名。更改签名对话框打开。

重命名函数

在更改签名对话框 Ctrl+F6 中，编辑名称字段。

管理函数参数

在更改签名对话框 Ctrl+F6 中，使用参数表及其右侧的按钮：
- 要添加新参数，请点击   Alt+Insert ，并指定新参数的名称及其默认值或通过函数调用传递的值。
  请参见示例1和示例2上方。
- 要删除参数，请点击相应行中的任意单元格，然后点击   Alt+Delete。
- 要重新排序参数，请使用   Alt+Up 和   Alt+Down。
- 要重命名参数，请编辑名称字段。
- 如果必要，请传递新参数到调用当前函数的函数中。

沿调用层次传播参数

在更改签名对话框 Ctrl+F6 中，选择参数并点击。选择传播新参数的方法对话框打开。左侧窗格显示函数调用的层次结构。当您选择一个函数时，右侧窗格会显示其代码和它调用的函数的代码，分别在调用方法和被调用方法字段中。
请参见 Example 3上方。
在左侧窗格中，选中您想要传播参数的函数旁边的复选框，然后点击 OK。

预览更改并完成重构

在更改签名对话框中，点击预览。
在重构预览选项卡中， “查找”工具窗口，查看预期的更改，进行必要的调整，并在准备好时点击执行重构。

最后修改日期： 2025年 4月 23日