JavaScript设计模式之建造者模式介绍

 更新时间:2014年12月28日 10:15:47   投稿:junjie   我要评论
这篇文章主要介绍了JavaScript设计模式之建造者模式介绍,将一个复杂对象的构造与它的表示相分离,使同样的创建过程可有不同的表示,这就叫做建造者模式,需要的朋友可以参考下

建造者模式说明

1. 将一个复杂对象的 构造 与它的表示相分离,使同样的创建过程可有不同的表示,这就叫做建造者模式。
2. 面向对象语言中的说明,主要角色:

1>. Builder 这个接口类,定义这个建造者[工人],统一的可操作的行为方式,它表示一个复杂的结构对象;
2>. ConcreteBuilder 用于创建[实现] Builder 各种形态的实例对象,来表示 Builder 不同的表示;
3>. Director 这个指挥者 用于指导 Builder 实例的执行过程跟形式,用于与 Builder 的实例 表现 相分离,用于指导 这个 Builder 实例 按某规则顺序来创建生成 产品结果;
4>. ResultObject 创建的结果都会生成一个结果对象;这是具体创建者根据 Director 指导创建的结果;

3. 建造者模式实际,就是一个指挥者,一个建造者,一个使用指挥者调用具体建造者工作、并得从具体建造者得出结果的客户;

4. 建造者模式,模拟场景:[看到一个说明建造者模式描述的例子很好]

说一户家人要建房子,但房子主人或家里其他人是不懂得如何去建房子的,所以他得去请几个工人,这个建房子的队伍还得有个工头,来按房主人的想法来建一套房子,工头按房主人的要求设计要求工人如何如何做;

工头说,第一步先把房整体骨架搭起来,第二步睡房建造好,第三步把厨房装饰好,第四步把客厅建造装饰完毕,第五步...

工头是不做事的,但具体建造者必须按照工头的要求来做,第一步,第二步的这样步骤来建造,直至整个房子完成;

创建者必须要有创建这个房屋的所有技能,即建骨架,装饰睡房等...,即建造者所做的事,或所具有的能力,必须大于或等于指挥者要求要做的事,或具有的能力;

即指挥者是个组织者,而建造者提供技能;

5. JavaScript 这种弱语言里,没有接口这样的东西,就忽略接口定义这一层,直接创建具体建造者,再建一个 指导类来回调这个建造者;

实例源码

1. 工人建造者X:

复制代码 代码如下:

function workerBuilder() {
    this.workOne = function() {
         //建房子骨架
    }
    this.workTwo=function() {
         //建睡房
    }
    this.workThree=function() {
         //建厨房
    }
    this.workFour=function() {
         //建客厅
    }
    //....
   
    this.getResult = function() {
         //建成房子
     var house = new House();
     //house.HouseFrame ...
     return house; 
    }
}


workBuilder 是具体建造者类,workOne, Two是要做的事情,建骨架等;

当然 workBuilder 可以多建几个,用于表示 工人 对于每个工作执行的方法不一样;但工作内容是一样的;

2. 指挥者类

复制代码 代码如下:

function Director() {
     this.construct = function(builder) {
          builder.workOne();
          builder.workTwo();
          builder.workThree();
          builder.workFour();
          //...
          //上面的内容,顺序可设置,并且工作项也可以设定
     }
}

指挥者类下的 指导 方法,有对 建造者 的回调引用,内容包括建者工作内容几项或全部; 指挥者对建造者工人要做的事情进行组织跟安排;

3. 产品房子

复制代码 代码如下:

function House() {
    this.HouseFrame = '';
    this.Room = '';
    this.Kitchen = '';
    this.LivingRoom = '';
    //...
}

4. 使用方法


复制代码 代码如下:

var builder = new workBuilder();
var director = new Director();
director.construct(builder);

var house = builder.getResult();

第四步,整个使用相当于客户:房主人,房主人请 Director 工头来建房子,但是工头是不做事的,所以他指挥 builder 工个来建子,最后房主人从工人那里取得建好的房子;

其他说明

建造者模式比较适于那种,内容[抽象]复杂,实际场景表现又多个不一样,比如工作内容或顺序不一致的情况;比如每个人每天的生活过程啊,还有像上面的实例类似的场景;通过指导者层,可以减少对很多相似工作场合,但工作规则顺序不一致的环境;可以大减少对实际对象的建造抽象;

相关文章

  • js date 格式化

    js date 格式化

    本文将以yyyy-MM-dd HH:mm:ss为例介绍js date 格式化的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • AngularJs+Bootstrap实现漂亮的计算器

    AngularJs+Bootstrap实现漂亮的计算器

    这篇文章主要为大家详细介绍了angularJs+Bootstrap实现漂亮的计算器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • react同构实践之实现自己的同构模板

    react同构实践之实现自己的同构模板

    这篇文章主要介绍了react同构实践之实现自己的同构模板,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • JavaScript+html5 canvas实现本地截图教程

    JavaScript+html5 canvas实现本地截图教程

    这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 一个效果写的HashTable代码

    一个效果写的HashTable代码

    一个效果写的HashTable代码...
    2007-03-03
  • ES6新特性五:Set与Map的数据结构实例分析

    ES6新特性五:Set与Map的数据结构实例分析

    这篇文章主要介绍了ES6新特性五之Set与Map的数据结构,结合实例形式分析了ES6中Set与Map的功能、定义、属性、结构与相关使用技巧,需要的朋友可以参考下
    2017-04-04
  • 利用three.js画一个3D立体的正方体示例代码

    利用three.js画一个3D立体的正方体示例代码

    Three.js是一个3DJavaScript库,基于右手坐标系,可以创建简单或是比较复杂的三维图形并应用丰富多彩的纹理和材质,可以添加五光十色的光源,可以在3D场景中移动物体或是添加脚本动画等等。本文介绍了利用three.js如何画一个3D立体的正方体的方法,需要的可以参考下。
    2017-11-11
  • layui异步加载table表中某一列数据的例子

    layui异步加载table表中某一列数据的例子

    今天小编就为大家分享一篇layui异步加载table表中某一列数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript中的后退和刷新实现方法

    javascript中的后退和刷新实现方法

    下面小编就为大家带来一篇javascript中的后退和刷新实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 获取JavaScript异步函数的返回值

    获取JavaScript异步函数的返回值

    本文给大家分享的是如何解决获取JavaScript异步函数返回值的经历及最后的解决方法,有需要的小伙伴可以参考下
    2016-12-12

最新评论