使用webStorm进行代码重构

Rename

快捷键 shift+F6
用来将变量，函数参数、函数名、属性名进行重命名，webstrom自动用新的全称来替换旧的名称。

案例一

重构前

function testFn(){
    var sss = 'evan is a good guy';
    doFn1(sss);
    doFn2(sss);
    doFn3(sss);
}

重构后

function testFn(){
    var desc = 'evan is a good guy';
    doFn1(desc);
    doFn2(desc);
    doFn3(desc);
}

演示

Inline

快捷键 ctrl+alt+n
用来将方法或变量名替换为方法的内容或变量的值。

案例一

重构前

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

重构后

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

演示

案例二

重构前

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

重构后

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

演示

Extract Method

快捷键 ctrl+alt+m
将某一部分代码抽出组成一个函数。

案例一

重构前

function testFn(){
    var name='evan';
    var url="http://search.com/query";
    $.ajax({url:url,data:{arg1:name,type:"get"}});
}

重构后

function myAjax(name) {
    var url = "http://search.com/query";
    $.ajax({url: url, data: {arg1: name, type: "get"}});
}
function testFn(){
    var name='evan';
    myAjax(name);
}

演示

Extract Variable

快捷键 ctrl+alt+v
将相同的表达式提取出来赋值给一个变量，并更新引用。

案例一

重构前

function testFn(){
    doFn1('evan is a good guy');
    doFn2('evan is a good guy');
    doFn3('evan is a good guy');
}

重构后

function testFn(){
    var str = 'evan is a good guy';
    doFn1(str);
    doFn2(str);
    doFn3(str);
}

演示

Extract Field

快捷键 ctrl+alt+f
将表达式提取出来使其成为类的属性，并自动更新引用。

重构前

class People {
    constructor(name) {
        var addr='shenzhen';
        this.name = name;
        this.sayName();
    }
    sayName() {
        console.log(this.name);
    }
}

重构后

class People {
    addr = 'shenzhen';
    constructor(name) { //构造函数
        var addr=this.addr;
        this.name = name;
        this.sayName();
    }
    sayName() {
        console.log(this.name);
    }
}

演示

Extract Parameter

快捷键 ctrl+alt+p
将表达式变成由参数传入

案例一

重构前

function testFn(){
    doFn1('evan is a good guy!!!');
}
var desc = 'may is a good girl';
testFn(desc);

重构后

/**
 * @param {string} a_desc
 */
function testFn( a_desc) {
    a_desc = a_desc || 'evan is a good guy!!!';
    doFn1(a_desc);
}
testFn();

Change signature

快捷键 crtl+F6
修改函数签名（函数名，函数参数），并自动更新相关引用。
重构前

function testFn(args){
    doFn1(args);
    doFn2(args);
    doFn3(args);
}
testFn("may is a good girl");
testFn("may is a good girl");

重构后

function testFn(desc = "evan", agree = true){
    doFn1(desc);
    doFn2(desc);
    doFn3(desc);
}
testFn("may is a good girl", true);

演示

/**
*author:sasa
*QQ:548263205-好好写前端​
**/