js设计模式 --- 模版设计模式

wfc_666 发布于2019-08-26 17:15 / 1343人阅读

摘要：代码复用的基本技术，在数据库设计中尤为重要。存在一种反向的控制结构，通过一个父类调用其子类的操作，通过子类对父类进行扩展增加新的行为，符合开闭原则。

模版设计模式

设计模式处处透漏者前辈们的指挥, 在众多设计模式中模版设计模式是软件设计中最常用, 最正统的模式, 也是本人最喜欢的模式, 其就像一颗颗螺丝钉处处体现在软件设计和其他模式中

父类定义一个模板结构，将部分具体内容延迟到子类去实现

在软件系统设计中最常用的就是 接口--抽象类--类 三级设计模式, 如下图

模版设计模式结构

再此模式中接口定义了方法, 抽象类定义了算法的框架实现了一部分算法, 对象类则实现了剩余的其他方法(当然如有需要可以灵活配置, 比如抽象类实现了一个默认的方法, 如有需要对象类可以重写这个方法)

实现

接口

let IEat = new Interface("IEat", ["eatDinner","buy","cook", "eat"])

抽象类

let Eatdinner = function () {
};
Eatdinner.prototype.buy = function () {
  throw new Error();
};
Eatdinner.prototype.cook = function () {
  throw new Error();
};
Eatdinner.prototype.eat = function () {
  console.log("吃");
};
Eatdinner.prototype.eatDinner = function () {
  this.buy();
  this.cook();
  this.eat();
};

对象类

let EatA = function () {
  Eatdinner.call(this);   
}
extend(EatA, Eatdinner);
EatA.prototype.buy = function () {
  console.log("萝卜");
}
EatA.prototype.cook = function () {
  console.log("炒");
}

let EatB = function () {
  Eatdinner.call(this);   
}
extend(EatB, Eatdinner);
EatB.prototype.buy = function () {
  console.log("萝卜");
}
EatB.prototype.cook = function () {
  console.log("炸");
}

let EatC = function () {
  Eatdinner.call(this);   
}
extend(EatC, Eatdinner);
EatC.prototype.buy = function () {
  console.log("青菜");
}
EatC.prototype.cook = function () {
  console.log("烤");
}

模板模式的优点

具体细节步骤实现定义在子类中，子类定义详细处理算法是不会改变算法整体结构。

代码复用的基本技术，在数据库设计中尤为重要。

存在一种反向的控制结构，通过一个父类调用其子类的操作，通过子类对父类进行扩展增加新的行为，符合“开闭原则”。

云服务器 GPU云服务器 JS设计模式 js继承模式 js设计素材 js模式化窗口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110126.html

JS 设计模式 九（模板模式）

摘要：模版方法由抽象类声明并加以实现。抽象类中的模版方法正是通过实现类扩展的方法来完成业务逻辑。一般来说，抽象类中的模版方法是不易反生改变的部分，而抽象方法是容易反生变化的部分，因此通过增加实现类一般可以很容易实现功能的扩展，符合开闭原则。模板方法模式定义一个操作中算法的框架，而将一些步骤延迟到子类中，使得子类可以不改变算法的结构即可重定义该算法中的某些特定步骤。模板方法模式是编程中经...

张迁 2019-08-19 18:21 评论0 收藏0
HTML 代码复用实践

摘要：安装好之后，来简单的组织一下文件的目录生产环境的存放文件夹公共部分的存放文件夹编辑后的文件在新建的，配置好接着新建两个文件，分别是头部和底部这是的内容这是的内容最后在新建一个，把要用到的和给进来。前言通常我们所做的一些页面，我们可以从设计图里面看出有一些地方是相同的。例如：头部，底部，侧边栏等等。如果是制作静态页面的同学，对于这些重复的部分只能够通过复制粘贴到新的页面来，如果页面...

Profeel 2019-08-01 14:48 评论0 收藏0
Express 实战（七）：视图与模板：Pug 和 EJS

摘要：而框架中最常用的两个视图引擎是和。实际上这些上下文对象就是会在视图中使用到的变量。其实视图缓存并不是缓存视图实际上它缓存的视图路径。根据默认视图引擎将缺少拓展名的视图文件补充完整。实际上存在由不同组织维护的两个不同版本的。 showImg(https://segmentfault.com/img/remote/1460000010821004);前面的内容大都是关于 Express 框...

wmui 2019-08-20 18:54 评论0 收藏0
ArcGIS 栅格函数在线调用详解

摘要：使用栅格函数支持直接在前端使用栅格函数来重新渲染影像服务。针对数据在栅格函数模版编辑器中使用渲染地貌函数，并且设计好结果的渲染方式。配置栅格函数模版可以在两种情况下进行。 ArcGIS 栅格函数在线调用详解导读：ArcGIS从10.0版本开始引用镶嵌数据集，并且第一次在影像中加入栅格函数（raster functions），使得影像的呈现和信息提取与GIS紧密的结合起来，简单的影像功...

894974231 2019-08-20 18:35 评论0 收藏0