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模式)中,我想要是为我们的读者贡献其摘要,那会 ...
随机推荐
- List<String> 和 ArrayList<String>的区别
最近对这两个问题比较懵逼,关于List和ArrayList.List<String> list = new ArrayList<String>(); 好了,先搞明白List 和 ...
- bootstrap快速入门笔记(九)-响应式工具
一,可用的类 超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 ...
- 最新的css3动画按钮效果
效果演示 插件下载
- UPYUN云服务体验计划,阅读神器Kindle、LaCie移动硬盘、索尼大法充电宝、高大上极路由、UPYUN代金券等你拿!
请看以下的“通关攻略”,分享你对云服务的“体验心得”,即可赢取绝佳的“通关宝藏”,阅读神器Kindle.LaCie移动硬盘.索尼大法充电宝.高大上极路由.UPYUN代金券等你拿!先来了解下UPYUN能 ...
- Excel基本操作1
Excel的基本操作之二,录入及快速填充.不足之处,欢迎补充
- 使用 Laravel 实现微型博客系统
参考链接:An Introduction to Laravel Authorization Gates 这个微型博客系统包含两个用户角色(作者 和 编辑),它们的权限如下: 作者能创建博客 作者能更新 ...
- Hibernate配置文件中配置各种数据库链接
hibernate.properties ###################### ### Query Language ### ###################### ## define ...
- 小谈ThinkPHP
ThinkPHP也是一个MVC框架,分视图.控制器和模型,和Yii框架相比相对较好理解,并且是轻量级的框架(相对于Yii来说),在使用Yii框架时候如果将框架放在项目文件中,用编辑器打开文件都比较慢, ...
- HttpClient和 HtmlParser实现爬虫
网络爬虫技术 1 什么叫网络爬虫 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不 ...
- routeProvider路由的使用
先创建一个主程序文件index.html,内容如下: <!DOCTYPE html> <html ng-app="myApp"> <head> ...