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

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

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

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. Openresty 进行限流的方法

    1.使用Openresty进行限流, 使用漏桶原理进行设计 和路由系统设计类似. LUA脚本去通过变量去redis取值,从redis中得到队列的大小.漏和桶的大小. 然后通过比较,队列大小与漏和桶进行 ...

  2. MAC Homebrew安装和简单使用

    前言: 这个周六日在刚刚买的macbookpro(系统版本是:10.13.5)上面安装angular,一开始是按照windows上的顺序安装的,先安装node.js,然后在安装angular的时候报错 ...

  3. ionic 3.0中使用原生插件ionic-native

    作为一个ionic的新手,今天使用了ionic的原生粘贴板插件  @ionic-native/clipboard,根据ionic官方文档上执行的命令 $ ionic cordova plugin ad ...

  4. 2018-计算机系机试-A

    #include<stdio.h> #include<cstdio> #include<cmath> #include<cstring> #includ ...

  5. echarts 自定义主题

    https://blog.csdn.net/flitrue/article/details/52841338 import $echarts from 'echarts' import  'echar ...

  6. Python第十课学习

    Python第十课学习 www.cnblogs.com/yuanchenqi/articles/5828233.html 函数: 1 减少代码的重复 2 更易扩展,弹性更强:便于日后文件功能的修改 3 ...

  7. 小伙 zwfw-new.hunan.gov.cn.iname.damddos.com [222.240.80.52]

    由于这个应用出问题非常影响用户体验:于是立马让运维保留现场 dump 线程和内存同时重启应用,还好重启之后恢复正常.于是开始着手排查问题.

  8. [LeetCode&Python] Problem 101. Symmetric Tree

    Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...

  9. Vue基础之初识Vue

    Vue特点及优点 小巧,压缩后体积17KB: 渐进式,不需要一口吃成大胖子,一上来就用所有的东西,可以一步一步.有阶段的先吃成小胖子: 数据驱动,双向数据绑定,MVVM模式,详见下一段 指令,例如v- ...

  10. spring查看生成的cglib代理类源码详解

    1.让程序阻塞(抛出异常会导致程序结束,所以在抛出异常之前阻塞) 2. windows控制台 cd到jdk目录下的lib目录,找到sa-jdi.jar 执行: java -classpath sa-j ...