js设计模式(解释器)

选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。

js设计模式(解释器)

上几节我们主要介绍了结构设计模式,今天我们开始学习行为设计模式,主要有以下几种类别

  1. Chain of Responsibility
  2. Command
  3. Interpreter
  4. Iterator
  5. Mediator
  6. Memento
  7. Observer
  8. State
  9. Strategy
  10. Template
  11. Visitor

今天我们先学习解释器模式

不是所有解决方案都是相同的。在许多应用程序中,您可能需要添加额外的代码行来操作输入或输出以显示给用户。在这里,输出取决于应用程序。

在我们的玩具工厂示例中,所有星球大战品牌的玩具都需要以标语为前缀:“愿原力与你同在”。而所有品牌为Bob the Builder的玩具都需要以“你准备好了吗!”作为前缀。这种额外的自定义级别可以使用解释器模式来实现。

var Prefix = function (brandTag) {
    this.brandTag = brandTag;
}
Prefix.prototype = {
    interpret: function () {
        if (this.brandTag  == “Star Wars”) {
            returnMay the Force be with You”;
        }
        else if (this.brandTag  == “Bob the Builder”) {
            returnAre you Ready?”;        
        }
    }
}

function run() {
    var toys = [];
    toys.push(new Prefix(“Star Wars”));
    toys.push(new Prefix(“Bob the Builder”));
    for (var i = 0, len = toys.length; i < len; i++) {
        console.log(toys[i].interpret());
    }
}

解释器的主要作用是为对象添加额外的功能,并且能够根据业务需要而添加不同的功能,在上面的例子中,就是为不同品牌的玩具添加了不同的逻辑,而不同修改原始的对象。

版权声明:著作权归作者所有。

相关推荐

Node.js交互式解释器(REPL)中下划线_的使用

Node.js的REPL(即node 控制台)默认会把最近表达式的结果赋值给下划线_代表的变量:> 1 + 2 3 > _ 3 在6.x后,可以通过对下划线_代表的变量赋值,就可以关闭node控制台的这种默认情况。> [ 'a', 'b', 'c' ] [ 'a',&nb

[译]Android UI设计与样式——dp和sp

朋友们,最近我一直在做一些Android UI设计和样式的培训课程。 我想和更多观众分享。 这是我的第一个android ui设计和样式教程。 我将在这个主题上写更多的内容。 那么现在开始吧...DP, SP & Pixels作为Android开发人员,我们始终希望我们的UI设计与设备无关。 

使用redux-actions重构redux实现的计数器

在很多Redux入门的文章里经常会用到计数器的示例,这里使用redux-action对redux实现的计数器做下重构,以便了解下redux-action的用法。Redux实现的计数器创建用于增减的两个Action// ACTION const COUNTER_INCREMENT = 'COUNTER_INCREMENT'; const COUNTE

CSS设置placeholder字体样式

CSS标准里是没有直接对placeholder设置样式的选择器,这里主要是通过各个浏览器的兼容前缀来给输入框的placeholder设置字体样式。/* WebKit browsers*/  input::-webkit-input-placeholder {    color:#999;     font-s

模式结构

模式的结构一般分为是三个部分:需求(Forces)结果上下文(Resulting Context)相关模式(Related Patterns)说明如下:需求是必须解决的问题,它描述了必须解决的问题和围绕这个特定问题的上下文环境。需求有时候会发生冲突,必须予以取舍,选择最重要的需求来解决。结果上下文是采用模式后可能带来的后果,它描述了采用这个模式后的结果,它包含三个部分: 好处,弊端和问题。相关模式

CKEditor 5设置编辑器高度

CKEditor 5提供的几种编辑器,它们的高度是随着内容变化的,官方没有提供设置编辑器高度的参数配置。如果要给编辑器固定高度有以下两种做法。对于经典版(classic editor build),可以通过CSS:.ck-editor__editable_inline {  height: 200px;}对于所有版本,可以通过js来设置:editor.editing.view.chang

CKEditor5——模型理解(一)

我们知道,CK5实现了一个MVC的架构,从今天开始,我们一步一步深入学习模型,视图,以及模型和视图之间的转换。今天我们开始模型的学习。首先,我们看模型的定义:The model is implemented by a DOM-like tree structure of elements and text nodes.模型由两类节点构成,分别是元素节点和文本节点,模型是一种类Dom树结构。我们知道

CKEditor5——模型理解(二:Node)

上一节我们理解了基本的CK5的模型基本信息,今天我们来学习一些模型的API。节点说明首先,需要理解的就是模型的节点。在这一点上,CK5的模型节点和dom的节点有点类似,也有一些不同。我会在文章中一一介绍。节点是模型树的基本结构。它是模型中不同节点类型的一种抽象。这里需要指出的一点是:如果一个节点从模型树中分离出来,你可以使用它的 API 来操作它。但是,非常重要的是,已经附加到模型树的节点只能通过

CKEditor5——模型理解(六:Range)

上一节我们主要介绍了模型中的Position这个关键的类,今天我们开始学习Range这个类。简单来说的话,如果Position表示一个点的话,那么Range是不是可以理解为一条线段呢?这个线段有一个startPostion,endPosition以及线段的长度等属性,我们暂且这么认为,那么我们可以看看Range官方的文档。从文档中看到,Range类有五个属性:Range属性start:Positi

CKEditor5——模型理解(七:Selection)

昨天我们学习了Range的一些API使用,今天我们看看另一个重要的类Selection的API:Selection的作用是记录鼠标在文档上的选择区域,如果是单个用户在编辑一份文档的时候,选择应该就是一个Range,如果是多个用户在编辑一份文档的时候,那么选择的区域就应该是多个range。因此,我大胆的猜测,Selection中应该有Range数组。我们来看看吧。Selection属性anchor