写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代码的小小重构的更多相关文章

  1. js基石之---易读、易复用、易重构的 JavaScript 代码规范

    易读.易复用.易重构的 JavaScript 代码规范 1.变量命名规范有意义 Bad: const yyyymmdstr = moment().format("YYYY/MM/DD&quo ...

  2. 编写更加稳定/可读的javascript代码

    每个人都有自己的编程风格,也无可避免的要去感受别人的编程风格--修改别人的代码."修改别人的代码"对于我们来说的一件很痛苦的事情.因为有些代码并不是那么容易阅读.可维护的,让另一个 ...

  3. 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点

    深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...

  4. 高质量JavaScript代码书写基本要点

    翻译-高质量JavaScript代码书写基本要点 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/ ...

  5. [转] 翻译-高质量JavaScript代码书写基本要点 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:St ...

  6. 编写高质量JavaScript代码绳之以法(The Essentials of Writing High Quality JavaScript)翻译

    原文:The Essentials of Writing High Quality JavaScript 才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<Java ...

  7. 如何编写高质量JavaScript代码

    书写可维护的代码(Writing Maintainable Code ) 软件bug的修复是昂贵的,并且随着时间的推移,这些bug的成本也会增加,尤其当这些bug潜伏并慢慢出现在已经发布的软件中时.当 ...

  8. JavaScript 代码简洁之道

    摘要: 可以说是<Clean Code>的JS代码示例了,值得参考. 原文:JavaScript 代码简洁之道 作者:缪宇 Fundebug经授权转载,版权归原作者所有. 测试代码质量的唯 ...

  9. 高质量JavaScript代码

    才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会 ...

随机推荐

  1. Java多线程学习笔记(一)——Thread类中方法介绍

    currentThread():返回代码正在被哪个线程调用. public class CurrentThreadWay { public static void main(String[] args ...

  2. java复习(7)---集合类、泛型

    本节主要结合用例讲述Java中Map类.Set类.List类如何使用. Java中有封装好的集合类,常用的有Map类.Set类.List类,简单说明一下他们的用法. List类,常用有ArrayLis ...

  3. ZJOI2008树的统计Count

    知识点-树链剖分 "在一棵树上进行路径的修改.求极值.求和":乍一看只要线段树就能轻松解决,实际上,仅凭线段树是不能搞定它的.我们需要用到一种貌似高级的复杂算法--树链剖分.   ...

  4. ue4竖排文本显示

    最近发现中国风游戏中,经常会遇到旁白文字竖着显示的需求. 于是我首先找了找控件蓝图中的text有没有相关类似横竖文本框的选项,然而并无所获. 突然间灵机一动! 竖着显示不就是每个字一换行嘛! 说干就干 ...

  5. git的使用及常用命令(二)

    一,把文件放在版本库中 执行  git add XXX文件名 在执行 git commit -m ‘提交注释' 查看状态 git status 如果没有改变文件,nothing to comment ...

  6. Java中的WebService服务

    一.在本地发布一个webservice服务 1.使用jdk中的 javax.xml.ws.Endpoint 类的 static Endpointpublish(Stringaddress,Object ...

  7. FrameBuffer系列 之 简单编程

    一.Linux的帧缓冲设备 帧缓冲(framebuffer)是 Linux为显示设备提供的一个接口,把显存抽象后的一种设备,他允许上层应用程序在图形模式下直接对显示缓冲区进行读写操作.这种操作是抽象的 ...

  8. mysql查询今天、昨天、7天、近30天、本月、上一月 数据

    今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ...

  9. JavaScript中var变量引用function与直接声明function

    今天在h5开发app的过程中遇到了一个js问题,function的执行问题 在js中声明函数function有这两种方法 var A=function(){...} 或者 function A(){. ...

  10. [C#学习]1.Hello World

    在很多时候我们都是被helloworld带入编程的世界的,所以这句话应该算是我们程序员最熟悉的一句话了把.所以在这里,那我也照样以helloworld为例子来引入我们的C#学习. 在往常的hellow ...