使用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-好好寫前端​
**/