JavaScript重构(七):重用老代码

EB Tresos Studio许可证管理实战:离线激活与Client License Administrator工具详解 本文详细解析了EB Tresos Studio许可证管理的核心技巧,重点介绍离线激活流程与Client License Administrator工具的高效使用方法。通过实际案例和代码示例,帮助汽车电子开发团队实现从基础激活到企业级许可证全生命周期管理的进阶操作,提升AUTOSAR工具链使用效率。 阅读详情

在Java中,有这样一段老代码:

class Round{
    public void drawRound(); //画圆
}

现在新代码希望能和它共存,使用一个Person的对象来控制,只不过,可能drawRound,也可能drawRect啊:

class Rect{
    public void drawRect(); //画方
}

好,废话少说,我先想到了Adapter模式:

interface Drawable{
    public void draw();
}

public class RoundAdapter implements Drawable{
    private Round round;
    public void draw(){
        round.drawRound();
    }
}

public class RectAdapter implements Drawable{
    private Rect rect;
    public void draw(){
        rect.drawRect();
    }
}

然后,我再引入一个Person对象,就能搞定这一切了:

class Person{
    private Drawable adapter;
    public Person(Drawable adapter){
        this.adapter = adapter;
    }
    public void draw(){
        this.adapter.draw();
    }
}

Drawable rou = new RoundAdapter();
Drawable rec = new RectAdapter();
new Person(rou).draw(); //画圆
new Person(rec).draw(); //画方

想必到此已经让你烦了,一个Adapter模式的最简单例子。再多看一看,这个模式的核心是什么?接口!对,正是例子中的Drawable接口——正是在接口的规约和领导下,我们才能让画圆和画方都变得那么听话。

 

现在JavaScript中,也有这样一段老代码:

function Round(){
    this.drawRound = function(){
        alert("round");
    }
}

我也想依葫芦画瓢,但是JavaScript没有接口了,怎么办?

……

接口的作用是什么?是对类的行为的规约,可是JavaScript的行为是动态的,无法用简单纯粹的接口来实现、来约束,即便模拟出这样一个接口(参见《JavaScript Design Pattern》),在此又有必要使用它么?强行做出一个接口来,这不是和JavaScript的初衷相违背了吗?

再回到这个问题上面,我原本希望Person的对象可以调用一个统一的draw方法,只是在通过构造Person对象的时候,传入一个不同实现的Drawable对象,做出了不同约束下的实现。

那么,JavaScript中,不仅仅方法的调用者可以作为一个参数传入,方法本身也可以作为参数传入(即所谓方法闭包),这样,所有变化点都控制在这个参数之中,不也实现了我想要的接口规约的效果吗:

function Rect(){
    this.drawRect = function(){
        alert("rect");
    }
}

function Person(obj){
    //obj参数的格式:{doWhat,who}
    for(var i in obj){
        this.doWhat = i;
        this.who = obj[i];
        break;
    }
    this.draw = function(){
        this.who[this.doWhat].call(this.who);
    };
}

var rou = { drawRound : new Round() };
var rec = { drawRect : new Rect() };
(new Person(rou)).draw();
(new Person(rec)).draw();

 

写到这里,我觉得很开心:

在Java中,通过接口的规约和适配器的帮助,我将变化点封装在Person构造器的参数之中;

JavaScript中,没有了接口、脱离了适配器的帮助,我依然能将变化点封装在Person的构造器参数之中。

vue-27(实践练习:将现有组件重构为使用组合式 API) 摘要:Vue组件重构实践指南 本文介绍了将Vue Options API组件重构为Composition API的方法。主要内容包括: 重构机会识别:寻找复杂逻辑、重复代码和分散的反应性数据部分 Composition API核心概念:setup函数作为入口点,ref和reactive创建响应式数据 可组合项(composables)实现逻辑复用 生命周期钩子的新用法 实际重构示例:将用户列表组件从Options API转换为Composition API 重构重点在于保持功能不变的情况下,改善代码组织和可 阅读详情

相关推荐

JavaScript代码精简之道:重构插件开发之路

通过重构技巧和最佳实践,我们可以显著减少JavaScript代码的冗余,并提高代码的质量和可维护性。函数和模块化编程、使用ES6+特性、避免重复代码、选择合适的数据结构和算法以及注重代码可读性和命名规范是代码精简的关键。将代码分解成小的、可重用的函数和模块是重构的重要一步。通过函数和模块化编程,可以将代码逻辑分离,并提供更好的可读性和可测试性。函数,我们可以将循环逻辑简化为一行代码,提高了代码的可读性和简洁性。通过使用有意义的变量和函数命名,我们可以提高代码的可读性和可维护性。来代替重复的圆周率变量。

EuForth的博客 134

10种JavaScript代码复用模式

作者 |汤姆大叔前言任何编程都提出代码复用,否则话每次开发一个新程序或者写一个新功能都要全新编写的话,那就歇菜了。但是代码复用也是有好要坏,今天这篇文章我们将针对代码复用来进行讨论,里...

web前端开发 1111

0009 用VisualStudio设计Max工具

这次分享个独家专利^)^:在Visual Studio中设计3dsMax脚本工具界面。 某次做原型设计时,需求改来改去,实在懒得搞GUI;虽然也尝试在Axure RP里画原型,但还是Visual Studio更顺手,也更容易测试一些交互,就直接在VS里做了。后来突发奇想,想实验一把能否直接用到Max里去,结果没想到成功了,效果还挺好。发现了新大陆,记录一下。   开始: 在VS里新建W...

whwst的专栏 769

JS代码复用模式(继承,混合等)

10种JS代码复用模式

e26hcs的博客 1073

红外回充方案之红外接收和发射/附源码(1)

本文介绍了基于NEC协议的红外回充方案实现,重点讲解了红外收发原理和GD32F330单片机的接收端实现。文章首先说明采用38kHz载波和一体化红外接收管的设计优势,能有效抗环境光干扰。接着详细解析NEC协议格式,包括9ms起始信号、地址码、命令码及其反码校验机制,并给出逻辑1和0的调制方式。在接收端实现上,展示了GD32F330定时器输入捕获配置代码,通过双边沿触发测量脉冲宽度进行解码。文章还提供了状态机设计思路和数据结构,为低成本机器人红外回充方案提供了完整的技术实现方案。

m0_59406757的博客 1236

解题报告-美团点评2017秋招笔试编程题--常见动态规划问题

晚上就要美团笔试了,在牛客上刷套美团的题练练手,四道题目全都是典型题目,经典的连题面都懒得改那种,也都不难,很基础的动态规划问题。[编程题] 大富翁游戏时间限制:1秒空间限制:32768K大富翁游戏,玩家根据骰子的点数决定走的步数,即骰子点数为1时可以走一步,点数为2时可以走两步,点数为n时可以走n步。求玩家走到第n步(n<=骰子最大点数且是方法的唯一入参)时,总共有多少种投骰子的方法。 输...

聂小白的专栏 1718

11个JavaScript代码重构最佳实践

作者:曾探来源:《JavaScript设计模式与开发实践》模式和重构之间有着一种与生俱来的关系。从某种角度来看,设计模式的目的就是为许多重构行为提供目标。1.提炼函数在JavaScrip...

前端达人 748

【学习总结】飞跨电容三电平boost拓扑发波分析与matlab仿真

正常工作时,飞跨电容的电压大约控制在输出电压的一半,降低了开关器件的耐受电压。

晞子的技术札记 1万+

Vue中拆分视图层代码的5点建议

一.框架的定位 框架通常只是一种设计模式的实现,它并不意味着你可以在开发中避免所有分层设计工作。 SPA框架几乎都是基于MVC或MVVM设计模式而建立起来的,这些模式都只是宏观的分层设计,当代码量开始随着项目增大而增多时,问题就会越来越多。许多企业内部的项目仍然在使用angularjs1.X,你会发现许多controller的体积大到令人发指,稍有经验的团队会利用好angularjs1构建的c...

十年代码写十年 762

【常见开源库的二次开发】基于openssl的加密与解密——openssl认识与配置(一)

OpenSSL 是一个开源的软件库,它提供了一系列加密工具和协议,主要用于实现安全通信,如在网络上的数据传输。它支持多种加密算法,包括对称加密、非对称加密、散列函数、伪随机数生成器、数字签名、密钥交换以及证书管理等。

嵌入式技术开发 4160

用 SAP HANA SDA 访问 PostgreSQL:从可行性到落地实践的完整指引

摘要:SAP HANA可通过SDA/SDI技术访问PostgreSQL数据库,支持数据虚拟化和实时复制。主要实现路径包括:1)使用Camel JDBC适配器创建虚拟表进行联邦查询;2)利用PostgreSQL Log Reader适配器实现变更数据捕获(CDC)。实施时需配置Data Provisioning Agent,注意权限和网络要求。官方文档指出,通过SDI+DP Agent的方式比直接SDA连接更稳定可靠。虚拟化查询时,HANA会自动将SQL下推到PostgreSQL执行,优化性能。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 253

JavaScript重构(汇总帖)

前一阵集中一段时间做了JavaScript的重构,留下了一点点脚印,在这里汇总一下。如果您对这一专题感兴趣,或者希望补充一些内容,欢迎留言,我会在后续更新进去。谢谢。   JavaScript重构(一):模块划分和命名空间 模块划分是JavaScript重构的原则之一,也是

四火专栏 2631

深信服全产品线新版图标库 Visio版+PPT版【2023年最新整理】

深信服全产品线新版图标库Visio版(含网络位置符号以及其他网络设备和外设图标)有朋友想要我整理一下深信服的相关图标,那么今天,瑞哥给老铁们整理了。运维漫谈是瑞哥针对运维领域的一个公众号,欢迎大家的关注哦!篇幅原因,就只展示那么多,有需要的朋友自行下载。SANGFOR 各产品图标-Visio版。你好,这里是网络技术联盟站。SANGFOR全产品线图标。深信服设备前置面板-AC。

网络技术联盟站 3692

Clean Code | 编写高质量的 JavaScript 代码(JavaScript 的代码规范)

原文地址:https://github.com/beginor/clean-code-javascript 代码整洁的 JavaScript 目录 简介 变量 函数 对象和数据结构 类 SOLID 测试 并发 错误处理 格式化 注释 Translation 简介 将源自 Robert C. Martin 的 Clean Code 的软件工程原则适配到 JavaScript 。 这不是一个代码风...

MayanDev 1450

Matlab 轴承信号仿真+分析

文章目录项目说明1、信号仿真1.1 仿真公式1.2 信号参数设置1.3 代码实现2、仿真信号分析2.1 小波变换2.2 快速谱峭度 项目说明 本文主要解决两个问题: 1、仿真包含周期性冲击信号、随机干扰冲击信号、调制干扰信号以及随机噪声四个成分的故障轴承信号; 2、使用小波变换以及快速谱峭度对该仿真信号进行分析。 1、信号仿真 1.1 仿真公式 这里的仿真信号公式主要参考了包文杰学者的硕士论文《加权谱峭度故障诊断方法研究与应用》,列举公式如下: 周期性冲击信号仿真 随机干扰冲击信号仿真 调制

cocofisher的博客 9267

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

代码质量第2层-可重用的代码!

导语|腾讯云加社区精品内容栏目《云荐大咖》,特邀行业佼者,聚焦前沿技术的落地与理论实践,持续为您解读云时代热点技术,探秘行业发展新机。可重用的代码指:在相似业务场景下,用的是同一份代码...

QcloudCommunity的博客 598

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

Vue中两个组件相似,代码重构

在Vue项目开发中,一种不良的开发习惯是,除了将某些工具方法抽取出来之外,所有的业务逻辑都堆积在.vue文件中,即使某两个.vue文件中有重复出现的代码。 可以考虑将这些重复的代码抽取到某个模块,即某个.js文件中。 // sett.js /** * 某两个Vue组件中,有大约60%的代码是重复的,为了消除重复,特将重复出现的方法抽取到该模块。 * 注意:那两个Vue中的data()里的变量,...

火柴头的专栏 1761

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

第19步:重用对话框

第19步:重用对话框

Pianpianluoye 251

clean-code-javascript:代码整洁之道

clean-code-javascript:代码整洁之道 在软件开发的世界中,代码的整洁性对于项目的长期维护和团队协作至关重要。clean-code-javascript 是一个开源项目,旨在帮助开发者编写更清晰、更易于维护的 JavaScript 代码。该项目基于 Robert C. Martin 的经典著作《Clean Code》以及 Martin Fowler 的《Refactoring》中...

gitblog_00745的博客 677

重构javascript_JavaScript重构技术:特定于通用代码

重构javascript 本文由Dan Prince进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态! 在最近的线程上SitePoint的论坛上,得到了一些代码,让一个下拉框控件时,另一个下拉框是可见的。 即使代码工作得很好,我也意识到仍然有很多不足之处。 它非常脆弱,无法承受对随附HTML的细微更改。 这是原始CSS代码: #second {...

132

清洁代码JavaScript:编写更高质量的JavaScript代码

清洁代码JavaScript:编写更高质量的JavaScript代码 1. 项目基础介绍 清洁代码JavaScript项目(Clean Code JavaScript)是一个开源项目,旨在将罗伯特·马丁(Robert Martin)在其著作《清洁代码》中提出的软件编程原则和概念,适配并应用到JavaScript语言中。该项目由maksugr维护,主要使用JavaScript编程语言。 2. 项目核...

gitblog_01149的博客 275

Vue3 Composition API中的提取和重用逻辑

Vue3 Composition API可以在大型项目中更好地组织代码。然儿,随着使用几种不同的选项属性切换到单一的setup 方法,许多开发人员面临的问题是…… 这会不会更混乱,因为一切都在一个方法中 乍一看可能很容易,但是实际上只需要花一点点时间来编写可重用的模块化代码。 让我们来看看如何做到这一点。 问题 Vue.js 2.x 的 Options API 是一种非常直观的分隔代码的方法...

前端全栈开发者 5190

Javascript:重用之道

近期写了大量的js,愈发觉得自己的代码过于冗余,所以,利用周末的时间研习代码重用之道,有了这篇博文所得: 重用代码: 1、尽量保证 HTML 代码结构一致,可以通过父级选取子元素 2、把核心主程序实现,用函数包起来 3、把每组里不同的值找出来,通过传参实现 示例:一个简单的计算器 通过效果图,我们可以看出,核心代码所实现的功能被多次重复使用,并且,html结...

weixin_34301307的博客 100
上一篇: JavaScript重构(六):利用继承来做事
下一篇: JavaScript重构(七):重用老代码
RayChase
博客等级 码龄20年 71粉丝 87原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值