看见一个过长的函数或者需要一段注释才能让人理解的代码,可以考虑将这段代码放进一个独立函数中。
创造一个新的函数,根据这个函数的意图来对它命名(以它“做什么”来命名,而不是以它“怎么做”命名)。
需要重构的代码如下(代码并不复杂,只是为了说明方法):
function print () { var num = 1; console.log('*****************'); console.log('******Hello******'); console.log('*****************'); while(num < 10){ num += 2; } console.log('num:', num); }
示例:
1、无局部变量
可以轻松提炼打印“Hello World”的代码。只需要剪切、粘贴、再插入一个函数调用的动作即可。
function print () { var num = 1; printHello(); while(num < 10){ num += 2; } console.log('num:', num); } function printHello () { console.log('*****************'); console.log('******Hello******'); console.log('*****************'); }
2、有局部变量
- 只读取,并不修改局部变量。此时可以简单地将局部变量作为参数传给目标函数。
function print () { var num = 1; printHello(); while(num < 10){ num += 2; } printNum (num); } function printHello () { console.log('*****************'); console.log('******Hello******'); console.log('*****************'); } function printNum (num) { console.log('num:', num); }
- 对局部变量赋值
1) 只在被提炼的代码中使用,可以将这个临时变量声明移到被提炼代码中,然后一起提炼出去。(这个很容易理解)
2) 被提炼代码之后的代码还使用了这个变量,需要在提炼的代码中返回改变后的值。
function print () { printHello(); var result = getNum(); printNum (result); } function printHello () { console.log('*****************'); console.log('******Hello******'); console.log('*****************'); } function getNum () { var num = 1; while(num < 10){ num += 2; } return num; } function printNum (result) { console.log('num:', result); }
不断学习,不断进步~~~