`

JavaScript重构(七):重用老代码

阅读更多

在Java中,有这样一段老代码:

class Round{ 
  public void drawRound(); //画圆 
}

 

现在新代码希望能和它共存,使用一个Person的对象来控制,只不过,可能drawRound,也可能drawRect啊:

class Rect{ 
  public void drawRect(); //画方 
}

 

好,废话少说,我先想到了Adapter模式:

interface Drawable{ 
  public void draw(); 
} 

public class RoundAdapter implements Drawable{ 
  private Round round; 
  public void draw(){ 
    round.drawRound(); 
  } 
} 

public class RectAdapter implements Drawable{ 
  private Rect rect; 
  public void draw(){ 
    rect.drawRect(); 
  } 
}

 

然后,我再引入一个Person对象,就能搞定这一切了:

class Person{ 
  private Drawable adapter; 
  public Person(Drawable adapter){ 
    this.adapter = adapter; 
  } 
  public void draw(){ 
    this.adapter.draw(); 
  } 
} 

  Drawable rou = new RoundAdapter(); 
  Drawable rec = new RectAdapter(); 
  new Person(rou).draw(); //画圆
  new Person(rec).draw(); //画方

 

想必到此已经让你烦了,一个Adapter模式的最简单例子。再多看一看,这个模式的核心是什么?接口!对,正是例子中的Drawable接口——正是在接口的规约和领导下,我们才能让画圆和画方都变得那么听话。

 

现在JavaScript中,也有这样一段老代码:

function Round(){ 
  this.drawRound = function(){ 
    alert("round"); 
  } 
}

 

我也想依葫芦画瓢,但是JavaScript没有接口了,怎么办?

……

接口的作用是什么?是对类的行为的规约,可是JavaScript的行为是动态的,无法用简单纯粹的接口来实现、来约束,即便模拟出这样一个接口(参见《JavaScript Design Pattern》),在此又有必要使用它么?强行做出一个接口来,这不是和JavaScript的初衷相违背了吗?

再回到这个问题上面,我原本希望Person的对象可以调用一个统一的draw方法,只是在通过构造Person对象的时候,传入一个不同实现的Drawable对象,做出了不同约束下的实现。

那么,JavaScript中,不仅仅方法的调用者可以作为一个参数传入,方法本身也可以作为参数传入(即所谓方法闭包),这样,所有变化点都控制在这个参数之中,不也实现了我想要的接口规约的效果吗:

function Rect(){ 
  this.drawRect = function(){ 
    alert("rect"); 
  } 
} 

function Person(obj){ 
//obj参数的格式:{doWhat,who} 
  for(var i in obj){ 
    this.doWhat = i; 
    this.who = obj[i]; 
    break; 
  } 
  this.draw = function(){ 
    this.who[this.doWhat].call(this.who); 
  }; 
} 

var rou = { drawRound : new Round() }; 
var rec = { drawRect : new Rect() }; 
(new Person(rou)).draw(); 
(new Person(rec)).draw();

 

 

写到这里,我觉得很开心:

在Java中,通过接口的规约和适配器的帮助,我将变化点封装在Person构造器的参数之中;

JavaScript中,没有了接口、脱离了适配器的帮助,我依然能将变化点封装在Person的构造器参数之中。


文章系本人原创,转载请注明作者和出处

分享到:
评论

相关推荐

    JS代码重构:避免冗余,提取通用函数(1)

    【JavaScript 代码重构:避免冗余,提取通用函数(1)】 在JavaScript编程中,代码冗余是一个常见的问题,它不仅降低了代码的可读性和可维护性,还可能导致额外的bug。本文旨在介绍如何通过重构技术来消除重复的...

    CSS重构:样式表性能调优

    10. **优化动画性能**:避免使用JavaScript进行大量样式更改,而应利用CSS3的`transform`和`opacity`属性,它们通常在GPU上执行,提供更好的性能。 11. **减少重绘和回流**:理解浏览器渲染机制,尽量减少元素的重...

    clean-code-javascript.pdf 代码整洁的 JavaScript

    《代码整洁的JavaScript》一书将软件工程中的“Clean Code”原则应用于JavaScript编程,以帮助开发者编写可读性强、易于重用及重构的代码。本书并不是传统意义上的代码风格指南,而是围绕着一系列软件工程的最佳实践...

    JS完成代码前最好对其做5件事

    将样式与行为分离,使用局部变量而不是全局变量,优化循环,重用事件处理器,以及在代码提交前进行重构和优化,这些都是非常重要的实践。通过遵循这些原则,可以显著提高代码质量,减少后期维护的难度和工作量。

    编写可维护的JavaScript.((美)Nicholas C. Zakas).[PDF.pd

    7. **代码重用与重构**:重用现有的代码可以减少错误和开发时间,而重构是提高代码质量的一个持续过程。本书将讨论何时以及如何重构代码以保持其清晰和简洁。 8. **错误处理**:有效的错误处理策略是确保程序稳定...

    Javascript导航菜单13则(含部分代码)

    13. **模块化与重构**: 高级的JavaScript技术如模块化(如ES6的import/export,CommonJS的require等)和面向对象编程,可以帮助我们更好地组织和重用菜单代码,提高代码的可维护性。 这些实例涵盖了基础到进阶的...

    Dreamweaver基础教程—使用Dreamweaver开发JavaScript脚本.

    - **代码重构**:支持代码的重构操作,使得开发者能够更加高效地修改和优化现有代码。 - **项目管理**:提供项目级别的管理功能,方便开发者组织和管理多个JavaScript文件及依赖关系。 此外,Dreamweaver还集成了...

    Clean Code Javascript.zip

    10. **持续重构**:随着项目的发展,定期进行代码重构,去除冗余,优化结构,保持代码的整洁。 "clean-code-javascript-master" 这个文件夹很可能包含了按照Clean Code原则编写的示例代码、指南和实践案例,供...

    网站重构,公用模板重构

    网站重构和公用模板重构是提升Web应用质量和效率的重要方法,主要目标是提高代码的可维护性和用户体验。在本文中,我们将深入探讨这两个概念,并重点分析公用模板重构的关键要素。 首先,重构是软件开发中的一个...

    react-旨在重构一个react事例

    综上所述,"react-旨在重构一个react事例"的项目涵盖了React组件化开发、Flux架构的应用以及代码重构的实践。通过对这个项目的学习,你可以深入理解React和状态管理,并了解如何通过重构提升代码质量和应用程序的...

    网站重构.Web标准设计

    网站重构和Web标准设计是现代网页开发中的关键概念,它们对于提升用户体验、优化网页性能以及维护网站代码都有着深远的影响。在此,我们将深入探讨这两个主题,结合提供的资源——"网站重构&Web标准设计第一版.ppt...

    code-examples:扁平化代码示例

    8. **代码重构**:定期进行代码审查和重构,可以识别并消除冗余和不必要的复杂性,进一步优化代码结构,使其更扁平化。 "code-examples-master"这个文件可能包含了上述各个方面的实际代码示例,用于演示如何在...

    javascript-OOP:JavaScript OOP

    JavaScript OOP,即JavaScript面向对象编程,是JavaScript语言中一种重要的编程范式,它使得代码更加结构化、可维护和可重用。在JavaScript中,OOP主要通过类(Class)和对象(Object)来实现,同时利用了封装、继承...

    编写可维护面向对象的JavaScript代码[翻译]

    通过继承,子类可以重用父类中的代码,实现代码复用。 3. 多态是指同一个方法调用,因为对象的不同,可能会有不同的行为表现。在JavaScript中,多态主要通过函数重载(Function Overloading)或者使用回调函数和...

    JavaScript宝典第7版

    - **性能优化**:提供性能分析工具的使用方法,以及如何通过代码重构、缓存策略等手段提升执行效率。 ##### 2.3 实战案例分析 - **Web应用开发**:通过具体实例展示如何使用JavaScript构建动态网页,并集成第三方库...

    javascript-training:关于Javacript语言的培训,包括算法,课程或一小段代码

    4. 对比和重构已有代码,以提高效率或简化逻辑。 5. 完成练习题和挑战,巩固理解。 6. 参与讨论,与其他学习者交流,共同进步。 总的来说,"javascript-training"项目为JavaScript学习者提供了一个全面的学习路径,...

Global site tag (gtag.js) - Google Analytics