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模式)中,我想要是为我们的读者贡献其摘要,那会 ...
随机推荐
- MVC实现SSO
近来工作无事,想做个SSO, 之前做过一个项目用到SSO,自己也没有看明白是个什么东西.现在正好有时间,所以想研究下. 先是从网上看到了SSO的思路: 三个站点:SiteA,SiteB,SiteMai ...
- Vuex(二)——关于store
一.总览 Vuex 应用的核心就是 store(仓库). "store" 包含着应用中大部分的状态(state). 二.Vuex 和单纯全局对象的不同 Vuex 的状态存储是响应式 ...
- javaWeb项目(SSH框架+AJAX+百度地图API+Oracle数据库+MyEclipse+Tomcat)之二 基础Hibernate框架搭建篇
我们在搭建完Struts框架之后,从前台想后端传送数据就显得非常简单了.Struts的功能不仅仅是一个拦截器,这只是它的核心功能,此外我们也可以自定义拦截器,和通过注解的方式来更加的简化代码. 接下来 ...
- linux基础 作业篇
1.自动部署反向代理 web nfs #!/usr/bin/python #-*- coding:utf-8 -*- #开发脚本自动部署及监控 #1.编写脚本自动部署反向代理.web.nfs: #!/ ...
- Websphere(was)与Weblogic部署EJB的注意项
复杂的故事简单说,复杂的问题简单做. EJB容器 简介 本节讲解EJB项目在Weblogic和Was上的部署需要注意设置的一些内容.不同的中间件对EJB支持方式不一样,所以配置的原理也略有差异. 关键 ...
- hdu5145 NPY and girls
人生中第一道莫队,本来以为是一道水题的.. 首先这题只有区间查询,没有修改操作,使用莫队比较明显,但统计答案有点麻烦.. 根据题意,在n个人里选m个不相同种类的人,设第i种人数量为ai,总方案为c(n ...
- day01课程回顾,数据类型
Day01 Python的分类 Cpython:代码àc字节码->机器码 一行一行的编译执行 Pypy: 代码àc字节码->机器码 全部转换完再执行 其他python 代码- ...
- iOS开发 - Swift实现清除缓存功能
前言: 开发移动应用时,请求网络资源是再常见不过的功能.如果每次都去请求,不但浪费时间,用户体验也会变差,所以移动应用都会做离线缓存处理,其中已图片缓存最为常见. 但是时间长了,离线缓存会占用大量的手 ...
- 深入浅出Node.js(一):什么是Node.js(转贴)
以下内容转自:http://www.infoq.com/cn/articles/what-is-nodejs/ 作者:崔康 [编者按]:Node.js从2009年诞生至今,已经发展了两年有余,其成长的 ...
- Windows10 图标重建
Windows10 图标重建 有没有遇到电脑上某个图标成了黑块,白块或者没有图呢. 那这样的话就可以使用图标重建啦. 删掉Windows10的图标文件如下图 路径: %userprofile%\App ...