看见一个过长的函数或者需要一段注释才能让人理解的代码,可以考虑将这段代码放进一个独立函数中。

创造一个新的函数,根据这个函数的意图来对它命名(以它“做什么”来命名,而不是以它“怎么做”命名)。

需要重构的代码如下(代码并不复杂,只是为了说明方法):

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

不断学习,不断进步~~~

《重构-改善既有代码的设计》学习笔记----Extract Method(提炼函数)的更多相关文章

  1. 【转】PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数

    原文地址: PHP 杂谈<重构-改善既有代码的设计>之一 重新组织你的函数 思维导图   点击下图,可以看大图.    介绍   我把我比较喜欢的和比较关注的地方写下来和大家分享.上次我写 ...

  2. 《重构--改善既有代码的设计》总结or读后感:重构是程序员的本能

    此文写得有点晚,记得去年7月读完的这本书,只是那时没有写文章的意识,也无所谓总结了,现在稍微聊一下吧. 想起写这篇感想,还是前几天看了这么一篇文章 研究发现重构软件并不会改善代码质量 先从一个大家都有 ...

  3. 《重构——改善既有代码的设计》【PDF】下载

    <重构--改善既有代码的设计>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196358 编辑推荐 重构,一言以蔽之,就是在不改变外 ...

  4. 重构 改善既有代码的设计 (Martin Fowler 著)

    第1章 重构, 第一个案例 1.1 起点 1.2 重构的第一步 1.3 分解并重组 statement() 1.4 运用多态取代与价格相关的条件逻辑 1.5 结语 第2章 重构原则 2.1 何谓重构 ...

  5. 《重构-改善既有代码的设计》学习笔记---Replace Temp with Query(以查询取代临时变量)

    临时变量的问题在于: 它们是暂时的,而且只能在所属函数内使用.由于临时变量只在所属函数内可见,所以,如果很多地方都在用这个临时变量,就会驱使你写出更长的函数.如果把临时变量替换为一个查询,那么其他函数 ...

  6. 『重构--改善既有代码的设计』读书笔记----Extract Method

    在编程中,比较忌讳的一件事情就是长函数.因为长函数代表了你这段代码不能很好的复用以及内部可能出现很多别的地方的重复代码,而且这段长函数内部的处理逻辑你也不能很好的看清楚.因此,今天重构第一个手法就是处 ...

  7. 【重构.改善既有代码的设计】14、总结&读后感

    14.总结 首先,这是一本太老的书,很多观点已经被固化或者过时了.但核心观点没有问题,虽然大多数观点已经被认为是理所当然的事情了.   重构的定义 重构分几种: 1.狭义的代码重构   就是本书讲的, ...

  8. 『重构--改善既有代码的设计』读书笔记---Duplicate Observed Data

    当MVC出现的时候,极大的推动了Model与View分离的潮流.然而对于一些已存在的老系统或者没有维护好的系统,你都会看到当前存在大把的巨大类----将Model,View,Controller都写在 ...

  9. 『重构--改善既有代码的设计』读书笔记----Move Method

    明确函数所在类的位置是很重要的.这样可以避免你的类与别的类有太多耦合.也会让你的类的内聚性变得更加牢固,让你的整个系统变得更加整洁.简单来说,如果在你的程序中,某个类的函数在使用的过程中,更多的是在和 ...

  10. 『重构--改善既有代码的设计』读书笔记----Substitute Algorithm

    重构可以把复杂的东西分解成一个个简单的小块.但有时候,你必须壮士断腕删掉整个算法,用简单的算法来取代,如果你发现做一件事情可以有更清晰的方式,那你完全有理由用更清晰的方式来解决问题.如果你开始使用程序 ...

随机推荐

  1. OpenGL中VA,VAO,VBO和EBO的区别

    1,顶点数组(Vertex Array) VA,顶点数组也是收集好所有的顶点,一次性发送给GPU.不过数据不是存储于GPU中的,绘制速度上没有显示列表快,优点是可以修改数据. 4.VBO(Vertex ...

  2. 泊爷带你学go -- 反射的经典玩法

    package main import ( "fmt" "reflect" ) type order struct { ordId int customerId ...

  3. 使用VBA轻松实现汉字与拼音的转换

    Function pinyin(p As String) As String i = Asc(p) Select Case i Case -20319 To -20318: pinyin = &quo ...

  4. protel项目创建

    File->New->Project->PCB Project//新建PCB项目 Save Project As... Project->Add New to Project- ...

  5. TabLayout下划线指示器自适应文字宽度

    解决方案1: 更新design库到28.0.0-rc01 implementation 'com.android.support:design:28.0.0-rc01' 然后在TabLayout里设置 ...

  6. php中生成透明背景png缩略图程序

    /** *$sourePic:原图路径 * $smallFileName:小图名称 * $width:小图宽 * $heigh:小图高 */function pngthumb($sourePic,$s ...

  7. ENVI5.3 影像重采样 和 tiff 保存

    输入---之前用envi4.5处理后的2013分类影像---输出重采样的影像 直接在工具栏搜索 resize data---出来对话框, 这里有几种方法----sample line 指的行列号,可以 ...

  8. WEBBASE篇: 第十篇, JavaScript知识5

    JavaScript知识5 <!doctype html> <html lang="en"> <head> <meta charset=& ...

  9. 动态改变Spring定时任务执行频率

    @Component@EnableSchedulingpublic class updateCronTask implements SchedulingConfigurer { public stat ...

  10. Qt 学习-----helloword

    (参考:http://www.qter.org/portal.php?mod=view&aid=27&page=3) 1. 打开“文件→新建文件或项目”菜单项(也可以直接按下Ctrl+ ...