javascript代码的小小重构
写js也有那么段时间了,也看过几本关于js的书,从最初的《锋利的jquery》《高性能javasrcipt》到《javascript设计模式》等,虽然看了些书,看到了书中的各种理论与技巧,然而在实际的使用中,真正用到的却是不多。
js的面向对象与我所熟悉的c#等语言的面向对象稍有不同,但基本都会有封装,继承,多态等。弱语言天生就具备多态性,没有类型检测的js相对而言可以做出许多强类型语言所做不到的灵活,虽然这不能说完全没有坏处,但这个优势让js代码变得丰富多彩。
程序的编写基本遵守一些原则,比如单一原则,开闭原则,迪米特原则等,js的也不例外。然而因为js的特殊性,很多时候随着需求的改变及代码量的增加很有可能会变成面条式的代码,变的难以阅读,不易扩展,重复并且分散。这时候就不禁的想要改变,想要重构。
亡羊补牢,犹未为晚。
重构的目的是让程序更加健壮,即健壮性。符合基本原则,可扩展,可复用,易维护等。
那么怎样重构才能让程序更加健壮呢?隔离变化,抽象不变。让程序更符合基本原则。
var outConding=function(result){
var outCond=;
var outConded=;
kinds={
kindItem:outCond,
KindChildren:outConded
};
cols=[{
value:outCond
}];
};
var inConding=function(result){
var inCond=;
var inConded=;
kinds={
kind:inCond,
Children:inConded
};
cols=[{
price:inConded,
value:inCond
},{
price:inConded,
value:inCond
}];
}
outConding(res);
inConding(res);
上面代码是否健壮呢?很明显至少没有考虑到复用性及扩张性,如果之后需要添加onCoding,offCoding难道还需要将重复的代码在一次次写一遍吗?
那么这就需要完善了,对其重构。两段代码有明显的相似的地方,比如结构,拥有kinds,cols等。但也有不同的地方,比如临时参数。如何将其抽离出来以符合健壮性呢?
var conding=function(result){
kinds={},
cols=[];
}
首先将不变的抽象出来,只留下基本结构。然后分析变化。问题来了,里面需要依赖临时变量,临时变量的变量名是未知的,数量是未知的,这该如何抽象出来呢?
用重载可以吗?不行,变量在不变的程序里是未知的。那让不变的程序继承变化的父类呢?。。。好像可以,那来实现试试吧。
js有原型链可以模拟继承,让父类变的可变化,子类继承父类,子类中使用的变量在父类中声明,这就可以解决变量的未知性了。
写着写着,忽然有个想法,不是有个更简单的方法吗?既然是弱语言为何一定要用强语言的优势放弃自己的?
var conding=function(tempParams, kindsParam,colsParam, result){
var CondingParams=new tempParams();
kinds=kindsParam(CondingParams),
cols=colsParam(CondingParams);
};
js没有类型检测,那么我传个参数表示临时变量集合可以吗?当然可以。接下来就是可扩展,遵循单一职责原则,开闭原则,迪米特原则,完成以下代码。
var conding=function(tempParams, kindsParam,colsParam, result){
var CondingParams=new tempParams();
kinds=kindsParam(CondingParams),
cols=colsParam(CondingParams);
};
var outCondingInfo = {
tempParams: function () {
this.outCond = ;
this.outConded = ;
},
kindsParam: function (param) {
return {
kindItem: param.outCond,
KindChildren: param.outConded
}
},
colsParam: function (param) {
return [{
value: param.outCond
}]
}
} var inCondingInfo = {
tempParams: function () {
this.inCond = ;
this.inConded = ;
},
kindsParam:function(param){
return {
kind:param.inCond,
Children:param.inConded
}
} ,
colsParam: function (param) {
return [{
price: param.inConded,
value: param.inCond
}, {
price: param.inConded,
value: param.inCond
}];
}
}
var res=;
conding(outCondingInfo.tempParams,outCondingInfo.kindsParam,outCondingInfo.colsParam,res)
conding(inCondingInfo.tempParams,inCondingInfo.kindsParam,inCondingInfo.colsParam,res)
这个对于最初的代码,如果需要新增一个onCoding,只需要新增一个onCondingInfo的对象就可以了,是不是可扩展了?是不是相对而已面向对象了一点?
不过一味追求健壮性,面向对象,虽然不会成为面条式代码,但有可能在你不讲解的情况下,他人很难看懂你写的是什么,于是这就造成了阅读性,关联上下文内容等问题。这便是取舍的问题了。
还有一些重构的小技巧,比如只在一个方法内使用,其他地方使用不到的方法,尽量不要单独写为一个全局函数,最好是直接在使用的方法内用一个临时变量存储他,尽量不去污染全局。使用闭包让待执行的方法顺序执行,或限定执行完几个方法后在执行特定方法等。
如果有好的意见或好的技巧,欢迎分享,欢迎指点。
javascript代码的小小重构的更多相关文章
- js基石之---易读、易复用、易重构的 JavaScript 代码规范
易读.易复用.易重构的 JavaScript 代码规范 1.变量命名规范有意义 Bad: const yyyymmdstr = moment().format("YYYY/MM/DD&quo ...
- 编写更加稳定/可读的javascript代码
每个人都有自己的编程风格,也无可避免的要去感受别人的编程风格--修改别人的代码."修改别人的代码"对于我们来说的一件很痛苦的事情.因为有些代码并不是那么容易阅读.可维护的,让另一个 ...
- 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点
深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...
- 高质量JavaScript代码书写基本要点
翻译-高质量JavaScript代码书写基本要点 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/ ...
- [转] 翻译-高质量JavaScript代码书写基本要点 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:St ...
- 编写高质量JavaScript代码绳之以法(The Essentials of Writing High Quality JavaScript)翻译
原文:The Essentials of Writing High Quality JavaScript 才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<Java ...
- 如何编写高质量JavaScript代码
书写可维护的代码(Writing Maintainable Code ) 软件bug的修复是昂贵的,并且随着时间的推移,这些bug的成本也会增加,尤其当这些bug潜伏并慢慢出现在已经发布的软件中时.当 ...
- JavaScript 代码简洁之道
摘要: 可以说是<Clean Code>的JS代码示例了,值得参考. 原文:JavaScript 代码简洁之道 作者:缪宇 Fundebug经授权转载,版权归原作者所有. 测试代码质量的唯 ...
- 高质量JavaScript代码
才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会 ...
随机推荐
- Cocos2d-x性能分析-Android版本之Gprof
在 iOS 平台下我们可以用 Xcode 自带的 Profile 工具来测试我们程序的性能,Android 平台使用的 gprof 这里整理了一下具体的cocos2dx 使用gprof进行性能分析的具 ...
- std::thread使用
本文将从以下三个部分介绍C++11标准中的thread类,本文主要内容为: 启动新线程 等待线程与分离线程 线程唯一标识符 1.启动线程 线程再std::threada对象创建时启动.最简单的情况下, ...
- PHP 手册
http://www.php.net/manual/zh/index.php 感谢中文翻译工作者. PHP 手册¶ by:Mehdi Achour Friedhelm Betz Antony Dovg ...
- 原生js实现数据双向绑定
最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...
- windows下安装Redis并部署成服务
windows下安装Redis并部署成服务 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 一:下载 下载地址: windows版本: http ...
- [Linux] Linux 中的基本命令与目录结构
Linux 中的基本命令与目录结构 目录 一.Linux 基本目录结构 二.基本命令 三.浏览目录 四.中间命令 五.更改密码 六.环境变量和 shell 变量 七.命令路径 八.文本编辑器 九.获取 ...
- openlayers应用“三”:百度地图纠偏
前两篇文章介绍了openlayers3加载百度在线和离线瓦片地图,页面上能够正常显示.地图加载后在地图上显示一条GPS轨迹,发现离实际位置相差太远,如下图所示: 轨迹形状和实际形状相同,但是位移太远, ...
- WebSocket学习总结
一 .websocket 已解决 但是websocket延伸出来的网络编程还有好多知识点没有清理.主要的流程和实现方式已经大概了解清楚,下面从学习的进度思路来一点点复习. 网络 ...
- python循环
#!/usr/bin/python #coding:utf-8 lcf_age = "19" count = 0 while count < 3: c_lcf_age = i ...
- ZooKeeper 入门
0 介绍 官网:http://zookeeper.apache.org/ ZooKeeper是Hadoop的正式子项目,它是一个针对大型分布式系统的可靠协调系统,提供的功能包括:配置维护.名字服务.分 ...