设计模式(4)[JS版]-JavaScript如何实现建造者模式？AlbertYang的博客- | ImapBox

设计模式(4)[JS版]-JavaScript如何实现建造者模式？AlbertYang的博客-

23 七月
星期四, 23 七月 2020 18:40 Last Updated on 星期四, 23 七月 2020 18:40 0 Comments

目录

1 什么是建造者模式

2 建造者模式的作用和注意事项

3.代码实现

4 总结

1 什么是建造者模式

 

建造者模式（Builder）可以将一个复杂对象的构建与其表示相分离，使得同样的构建过程可以创建不同的表示。也就是说如果我们用了建造者模式，那么用户只需要指定需要建造的类型就可以得到所需要的东西，而具体建造的过程和细节不需要知道。建造者模式实际，就是一个指挥者，一个建造者和一个用户。用户调用指挥者，指挥者调用具体建造者工作，建造者建造出具体的东西给用户。

建造者模式我们在代码中经常用到，比如Jquery中的ajax请求：

 //1 用户发送一个请求 //2 $.ajax建造者模式（指挥者）  //3 具体实现 （建造者） $.ajax({    url:'www.albertyy.com',    success:function(argument){            } });

2 建造者模式的作用和注意事项

Builder模式允许客户端仅通过指定类型和内容来构造一个复杂的对象。构造细节完全对客户端隐藏。使用Builder的最常见的作用是简化创建复杂对象的客户端代码。客户端可以指导建造者创建，而不需要知道实际工作是如何完成的。

模式作用：

1 分步创建一个复杂的对象。

2 解耦封装过程和具体创建的组件。

3 无需关心组件如何组装。

注意事项：

1 要有一个稳定的算法进行支持。

2 加工工艺是暴露的。

3.代码实现

 

设计模式(4)[JS版]-JavaScript如何实现建造者模式？AlbertYang的博客-

建造者模式的参与者主要有：product产品类、Builder建造者类、Director指挥者类。由于JavaScript不支持抽象类，因此未使用AbstractBuilder。在下面的代码中，有一个Shop（Director ）和两个Builder建造者类：CarBuilder和TruckBuilder。Shop的构造方法接受一个Builder实例，然后执行一系列组装步骤：step1和step2。Builder的get方法返回新组装的产品（Car对象和Truck对象）。客户通过向商店提供不同的构建器，可以控制实际对象的构建过程。

主要的流程是：

  1. 客户提出需求。

  2. 指挥者根据用户需求，指挥建造者去完成需求的各个部分。

  3. 建造者完成相应的部分。

 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title></title>     </head>     <body>     </body>     <script>         //商店：Director指挥者类         function Shop() {             this.construct = function(builder) {                 builder.step1();                 builder.step2();                 return builder.get();             }         }         //汽车制造商：建造者类         function CarBuilder() {             this.car = null;               this.step1 = function() {                 this.car = new Car();             };               this.step2 = function() {                 this.car.addParts();             };               this.get = function() {                 return this.car;             };         }         //卡车制造商：建造者类         function TruckBuilder() {             this.truck = null;               this.step1 = function() {                 this.truck = new Truck();             };               this.step2 = function() {                 this.truck.addParts();             };               this.get = function() {                 return this.truck;             };         }         //产品类：car         function Car() {             this.doors = 0;               this.addParts = function() {                 this.doors = 4;             };               this.say = function() {                 log.add("我是一辆" + this.doors + "门汽车");             };         }         //产品类：Truck         function Truck() {             this.doors = 0;               this.addParts = function() {                 this.doors = 2;             };               this.say = function() {                 log.add("我是一辆" + this.doors + "门卡车");             };         }           // 日志打印         var log = (function() {             var log = "";             return {                 add: function(msg) {                     log += msg + "n";                 },                 show: function() {                     alert(log);                     log = "";                 }             }         })();                  //运行程序         function run() {             var shop = new Shop();             var carBuilder = new CarBuilder();             var truckBuilder = new TruckBuilder();             //客户通过向商店提供不同的汽车构建器，得到不同的汽车             var car = shop.construct(carBuilder);             var truck = shop.construct(truckBuilder);              car.say();             truck.say();              log.show();         }                  run();     </script> </html>

4 总结

建造者模式主要用于“分布构建一个复杂的对象”，它很容易进行扩展。如果有新的需求，通过实现一个新的建造者类就可以完成，并且建造者模式解耦了对象本身与构建过程，使得我们不用关心具体的建造过程。

通过以上对建造者模式的学习，你应该掌握了以下知识：

1 知道什么是建造者模式。

2 掌握建造者模式的作用和使用注意事项。

3 掌握建造者设计模式代码编写。

你可以使用这些技巧来改善一下你曾经的代码。如果想继续提高，欢迎关注我写的其他JavaScript设计模式的系列文章。



 
 
 
 


本页所有内容来自官方网站 http://www.imapbox.com 新闻来源：互联网搜索引擎和新闻站

本网页所有图片由 ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片，下载并得到。

ImageBox 图片批量下载器 工具地址: 网页图片批量下载工具-最新版本下载

非凡下载站地址：http://www.crsky.com/soft/35838.html

本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。

ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载

本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.




文章目录

  • 全球报导 (16311)
  • 全球云计算 (29506)
  • 程序员专区 (1974)
  • Imap 全球通用标准协议 (7)
  • 全球邮局列表 (17)
  • Imapbox 系列软件 (3)
  • 产品一览 (6)
  • 事业方向 (7)
  • 联系我们 (2)

官方链接

imapbox邮箱网盘 imapbox 海外官网 iMapBox百度百科

登录