重构 JavaScript

重构是指在不改变应用程序行为的情况下更新源代码。重构可帮助您保持代码健壮、 dry ，且易于维护。

移动符号重构

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

移动类、函数或变量

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

提升类成员重构

上移类成员重构会将类方法从当前类上移到其父类中。

示例：将类方法移动到父类中

假设您有一个类 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...");
                        }
                    }
                
    

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

将类的方法移动到父类

将光标放在包含要上移成员的类内的任意位置。
从主菜单或上下文菜单中选择重构｜上提成员。将打开对话框上提成员。
从列表中选择要移动方法的父类。
若要上移方法，在要上提的成员列表中勾选对应复选框。

重命名重构

除了重命名文件和文件夹（适用于所有语言）之外，您还可以重命名类、方法、函数、变量和参数。 WebStorm 会在符号声明及其在当前项目中的所有默认用法中更改符号名称。

重命名类及其方法

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

保持类名与包含文件名一致

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

如果您拒绝该建议，稍后可以随时使用重命名文件意图操作重命名该文件。另一个意图操作将建议将类移动到一个具有相应名称的新文件中。建议名称的格式由文件名约定列表中在 Code Style: JavaScript 页面上选择的样式决定。

ws_js_refactoring_rename_file_intention_custom_naming_convention.png

当您刚创建一个新文件但在开始输入类或接口时想到更好的名称时，此功能非常有用。要调用意图操作，将光标置于相关类的名称上并按下 Alt+Enter。

重命名函数、变量和参数

Rename 重构可在函数、变量和参数中就地进行，但您也可以按 Shift+F6 在重命名对话框中配置重构范围。

若要默认打开重命名对话框，请打开设置对话框（Ctrl+Alt+S ），转到编辑器｜代码编辑，然后在指定重构选项区域中选择在模式对话框中选项。

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

重命名常量

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

重命名符号的动态用法

由于 JavaScript 的动态特性，在某些情况下动态引用是合法用法，应当进行重命名。然而，在很多情况下，重命名动态用法并不是预期的行为。在下例中，在 rename.test() 中将 test() 更改为 test1() 是正确的，而在 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();
            
     

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

提取重构

WebStorm 提供多种 Extract 重构，用于引入参数、变量、常量、字段、方法及函数。要运行这些重构中的任意一个，请选中要重构的表达式并选择重构｜<target>。您可以选择整个表达式或将光标放在表达式中的任意位置，WebStorm 将帮助您执行选择。

引入参数

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

假设您在函数 calculate_sum(i) 中有一段包含硬编码 1 的代码。通过 Introduce Parameter 重构，您可以将该硬编码的 1 替换为 i2 参数。新参数 i2 可以提取为 optional 或 required。

示例 1：引入可选参数

新参数 i2 被提取为可选参数。新参数被初始化在 calculate_sum(i) 的函数体内， show_sum() 中对 calculate_sum(i) 的调用未做修改。

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

                        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 被提取为必填参数， show_sum() 中对 calculate_sum(i) 的调用也相应更改。

请参阅下文的选择参数类型（必填）。

                        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注释块。如果您需要指定自定义默认参数值，此操作可能会很有帮助。
选择新参数的类型（可选或必填），并在适用情况下指定其默认值：
- 如果选中可选参数复选框，参数将在函数体中使用默认值进行初始化。
  请参阅上方的引入参数示例 1。
- 如果取消选中可选参数复选框，默认参数值将通过现有函数调用传递。所有函数调用将根据新的函数签名进行更改，并将在函数体中添加参数初始化。
  请参阅上方的引入参数示例 2。
默认情况下，WebStorm使用调用重构时所在的表达式作为默认值。在大多数情况下，您无需更改此值。如果仍需更改，请在 JSDoc 注释中按格式 @param <parameter name> - <default value> 指定另一个默认值。
通过在列表中双击接受建议的参数名称之一，或在红色画布字段中指定自定义名称。准备就绪后按 Enter。
另请注意，在 ES6 代码中，将使用新的默认函数参数语法 function calculate_sum(i, i2 = 1) 替代 i2 = i2 || 1;。请访问 https://developer.mozilla.org 网站了解有关默认函数参数的更多信息。

选择重构模式

您可以直接在编辑器中（即时模式下）按上述说明提取参数，也可以使用引入参数对话框。这两种方式非常相似，其区别如下：

预览重构结果。
在对话框中，您可以单击预览，并在查找工具窗口的专用选项卡中查看预期更改。在即时模式下，此功能不可用。
指定默认参数值。
在对话框中，WebStorm在值字段中建议默认参数值，您可以接受建议或指定其他值。在即时模式下，WebStorm使用调用重构时所在的表达式作为默认参数值。如需指定其他值，您必须使用 JSDoc 注释块。

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

引入变量

使用引入变量重构可将表达式替换为函数作用域变量 (var)或块作用域变量 (let)。此重构可提升源代码的可读性和可维护性。

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

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

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

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

变量 string 是从 '(' + this.getValue() + ')' 表达式中提取的，在 return 语句中使用。新变量使用 let 语句在 Parenizor.method('toString', function ()) 中声明。

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

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

示例 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";
                        }
                    
     

                        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 以引入函数作用域变量。
- 选择 let 以引入块作用域变量，请参阅上方的示例 2。
- 选择 const 以引入常量。
通过在列表中双击接受建议的参数名称之一，或在红色画布字段中指定自定义名称。准备就绪后按 Enter。

选择重构模式

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

引入常量

使用 Introduce Constant 重构来将表达式替换为常量。此重构可以使您的源代码更易阅读与维护。它还有助于避免使用未说明其值或用途的硬编码常量。

在类中，您可以引入 readonly 字段或在多个适用作用域中选择一个作用域。在其他上下文中，WebStorm 仅引入局部常量。

示例 1：为引入的常量选择作用域

假设您有一个类 AccountingDepartment ，其中的方法 printName() 使用了硬编码的 "Department name :"。

                class AccountingDepartment {
                    name;

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

                    printMeeting() {...
                    }

                    generateReports() {...
                    }
                }
            
   

WebStorm 可以将新常量作为局部常量引入，并在 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 重构，WebStorm 会自动引入一个局部变量，并在当前函数或代码块中声明。

                        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。

引入字段

引入字段重构会声明一个新字段，并使用所选表达式对其进行初始化。原始表达式将被该字段的用法替换。

在以下示例中，引入了相同的字段 _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 并选择引入字段。
- 转到重构｜提取｜字段。
在弹出窗口中，选择新字段的初始化位置：
- 当前方法，请参阅上文示例 1。
- 字段声明，请参阅上文示例 2。
- 构造函数，请参阅上文示例 3。
通过在列表中双击接受建议的参数名称之一，或在红色画布字段中指定自定义名称。准备好后，按下 Enter。

选择重构模式

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

如需在重构时使用“提取字段”对话框，请打开设置对话框（Ctrl+Alt+S ），转到编辑器 | 代码编辑，然后在重构区域中选择在模态对话框中选项。

提取方法

提取方法重构允许使用提取的代码创建一个命名的方法或函数。当调用提取方法重构时，WebStorm 会识别所选代码片段的输入变量及其输出变量。识别出的输出变量将用于作为提取方法或函数的返回值。

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

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

调用重构的表达式 c = a + b; 位于函数 MyFunction() 内部。已选择 global 作为目标作用域。

示例 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 并选择提取方法。
- 转到重构｜提取｜方法。
所选代码片段可以是一个语句集，也可以是代码中使用的表达式。
如果所选表达式在函数内部，请从列表中选择目标作用域：
- 如果您选择 global ，提取的函数将会在任何函数外部声明。请参阅上文示例 1。
- 要在当前封闭函数内定义提取的函数，请选择 function <current enclosing function name>。请参阅上文示例 3。
要打开具有更多选项的“提取方法”对话框，请再次按下 Ctrl+Alt+M。在此对话框中，您可以选择是否通过生成的函数声明或在表达式中来声明提取的函数。请参阅上文示例。

默认打开提取函数对话框

打开设置对话框（Ctrl+Alt+S ），转到编辑器 | 代码编辑，然后在重构区域中选择在模态对话框中选项。

提取父类

提取超类重构会基于当前类的成员创建新的抽象类。创建的类会自动进行扩展。

假设您有一个类 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...");
                        }
                    }
                
   

提取父类

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

引入对象或数组解构

解构让您可以轻松地从数组和对象中解包值到变量中。该功能具有非常简洁的语法，在应用程序中传递数据时经常使用。有关详细信息，请参阅 Exploring ES6。

在 WebStorm 中，您可以使用意图操作 Alt+Enter 启动解构。使用替换为对象/数组解构操作时，原始赋值会被删除。如需保留赋值，请使用引入对象/数组解构。

替换原始赋值语句

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

保留原始赋值

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

为函数生成解构参数

将光标放在函数的参数中，然后按 Alt+Enter。
从列表中选择将参数转换为对象。

某些其他 WebStorm 操作也会默认使用解构。例如，考虑适用于使用 CommonJS 模块的 Node.js 应用程序的插入 ‘require()’ 快速修复。有关详细信息，请参阅 Node.js。

提取 Vue 组件

提取 Vue 组件重构允许您从现有组件中提取新的 Vue.js 组件，无需任何复制粘贴操作。请注意，此重构仅支持就地操作，请确保在编辑器 | 代码编辑设置页面中已选择在编辑器中重构选项 Ctrl+Alt+S。

提取 Vue.js 组件

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

内联重构

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

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

                
    

运行内联重构

在编辑器中，将光标置于要内联的符号上，按 Ctrl+Alt+N ，或者从上下文菜单或主菜单中选择重构｜内联。
在与所选符号对应的内联对话框中，确认内联重构。

更改函数签名重构

使用变更签名重构来更改函数名称、添加、删除、重新排序和重命名参数，并将新参数向上传播到调用链中。

您也可以使用引入参数重构添加参数。

以下示例展示了运行变更签名重构的不同方式。在所有示例中，函数 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() 中以 ES6 语言级别的 function generate_result(input = 100) {} 格式，或以 ES5 的 input = input || 100 格式进行初始化。

                    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 中，选择参数并单击。选择要传播新参数的方法对话框将打开。左侧窗格显示函数调用的层次结构。当您选择一个函数时，右侧窗格会在调用方方法和被调用方法字段中分别显示该函数的代码及其调用的函数的代码。
请参阅上面的示例 3。
在左侧窗格中，选中要传播参数到相应函数的复选框，然后单击确定。

预览更改并完成重构

在更改签名对话框中，单击预览。
在重构预览选项卡的 Find 工具窗口中，查看预期更改，进行必要的调整后，点击执行重构。

将默认导出转换为具名导出

对于类、函数、常量变量、字符串、对象和类型，您可以将 export default 语句替换为命名的 export 语句，并自动更新相应的 import 语句。

如果符号被重新导出，则相应的 export 语句也将被更新。

可以从 export default 语句和 import 语句中调用该重构。

将光标置于 export default 语句或您要导出的内容名称上，按下 Alt+Enter ，然后选择将默认导出转换为具名导出。要切换预览，请按 Ctrl+Q。
在 import 语句中，将光标置于导入内容的名称上，按下 Alt+Enter ，然后选择将默认导出转换为具名导出。预览（Ctrl+Q ）显示将如何更新 import 语句。

将具名导出转换为默认导出

对于类、函数、常量变量、字符串、对象和类型，您可以将命名的 export 语句替换为 export default 语句，并自动更新相应的 import 语句。

可以从 export default 语句和 import 语句中调用该重构。

将光标置于 export 语句中的导出内容名称上，按下 Alt+Enter ，然后选择将具名导出转换为默认导出。要切换预览，请按 Ctrl+Q。
在 import 语句中，将光标置于导入内容的名称上，按下 Alt+Enter ，然后选择将具名导出转换为默认导出。预览（Ctrl+Q ）显示将如何更新 import 语句。

最后修改日期： 2025年 9月 26日