写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. JS绑定种类汇总

    这里是<你不知道的JS>中常见的this绑定种类分享: 1)默认绑定: function foo(){ console.log(this.a); } var a = 2; foo(); 解 ...

  2. Java中Json解析

    首先准备一个JSON格式的字符串 * String JsonStr = "{object:{persons:" + "[{name:'呵呵',image:'http:// ...

  3. xml语法规则

    所有 XML 元素都须有关闭标签 在 HTML,经常会看到没有关闭标签的元素: <p>This is a paragraph <p>This is another paragr ...

  4. DirectFB 之 简介

    1. DirectFB概述        首先 DirectFB 类似于桌面中的 XFree86 .桌面中的 XFree86 不需要 Frame Buffer 设备,而 DirectFB 需要.   ...

  5. 蓝桥杯-核桃的数量-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  6. hust1010 kmp

    There is a string A. The length of A is less than 1,000,000. I rewrite it again and again. Then I go ...

  7. Bootstrap之折叠(Collapse)插件

    学习资料:Bootstrap折叠(Collapse)插件 大家可能常见的都是类似: 这种的效果,小颖今天要给大家分享一个不一样的效果嘻嘻.铛铛铛铛........................... ...

  8. 利用PHPExcel读取Excel的数据和导出数据到Excel

    PHPExcel是一个PHP类库,用来帮助我们简单.高效实现从Excel读取Excel的数据和导出数据到Excel.也是我们日常开发中,经常会遇到的使用场景.比如有个客户信息表,要批量导出发给同事,我 ...

  9. 小米红米1 android 4.4.4上操作数据库异常问题

    产生的问题: 小米红米1 android 4.4.4上,按HOME键,应用进入后台,再启动,应用进程直接挂掉 解决的方法: 这个是操作数据库,数据库关闭之后导致的异常,解决的方法: //4.0以上的版 ...

  10. [刷题]算法竞赛入门经典(第2版) 4-3/UVa220 - Othello

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,0 ms) //UVa 220 - Othello #include<iostream ...