看看用TypeScript怎样实现常见的设计模式,顺便复习一下。

学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想记住就好。

这里尽量用原创的,实际中能碰到的例子来说明模式的特点和用处。

解释器模式 Interpreter

特点:使用给定语法来解释一段内容。

用处:管理类系统经常会定义一些搜索语句格式来使用户方便搜索库里的内容,这时就可以考虑用解释器来翻译执行这些语句。

注意:适合相对简单的语法。

解释器模式通过把一段表达式拆开成很多个,分为不同的解析类,一个一个的去解析并执行,这过程中经常会用Context来保存解析过程的信息。

这种解释器的优点在于各种表达式的解析相对独立,要加入新的规则也不会影响现有的解析。缺点也很明显,一个表达式一个类,复杂语法或复合语法的话表达式数量就非常多,并且表达式之间也很难真正独立。

下面用TypeScript写一个简单正则表达式的解释器:

要解释的表达式有:{}, [], \d, ^, $这几种。

先建立一个Expression接口,所有解释器都实现这个接口:

interface Expression{
interpret(context: Context);
}

可以看到接口里用到了一个Context,这个用来保存解析时的一些数据和进度,包含:

pattern: 整个表达式

currentPatternIndex: 当前正在验证的表达式的位置

lastExpression: 上一个表达式,用于{}解析

text: 需要验证的文本

currentTextIndex: 当前验证到text里的哪个字符的位置

isMatch: 是否匹配成功

class Context{
constructor(public pattern: string, public text: string){ } currentTextIndex: number = 0;
get currentText(): string{
return this.text[this.currentTextIndex];
} currentPatternIndex: number = 0;
lastExpression: string;
get currentPatternExpression(): string{
return this.pattern[this.currentPatternIndex];
} isMatch: boolean;
}

现在分别给那些符号写解析类:

// 开始符号:^
class BeginExpression implements Expression{
interpret(context: Context){
context.isMatch = context.currentPatternIndex === 0;
context.currentPatternIndex++;
}
} // 结束符号:$
class EndExpression implements Expression{
interpret(context: Context){
context.isMatch = context.currentTextIndex === context.text.length;
context.currentPatternIndex++;
}
} // 反斜杠:\d,只支持\d
class BslashExpression implements Expression{
interpret(context: Context){
if(context.pattern[context.currentPatternIndex + 1] !== 'd'){
throw new Error('only support \\d');
} let target = context.currentText;
context.lastExpression = '\\d';
context.isMatch = Number.isInteger(Number.parseInt(target));
context.currentPatternIndex+=2;
context.currentTextIndex++;
}
} // 中括号:[]
class BracketExpression implements Expression{
interpret(context: Context){
let prevIndex = context.currentPatternIndex;
while(context.pattern[++context.currentPatternIndex] !== ']'){
if(context.currentPatternIndex+1 === context.pattern.length){
throw new Error(`miss symbol ]`);
}
}
let expression = context.pattern.substr(prevIndex+1, context.currentPatternIndex - prevIndex - 1);
let target = context.currentText; context.lastExpression = `[${expression}]`;
context.isMatch = [...expression].indexOf(target) > -1;
context.currentPatternIndex++;
context.currentTextIndex++;
}
} // 大括号:{}
class BraceExpression implements Expression{
interpret(context: Context){
let endIndex = context.currentPatternIndex;
while(context.pattern[++endIndex] !== '}'){
if(i+1 === context.pattern.length){
throw new Error(`miss symbol }`);
}
}
let expression = context.pattern.substr(context.currentPatternIndex + 1, endIndex - context.currentPatternIndex - 1);
let num = Number.parseInt(expression);
if(!Number.isInteger(num)){
throw new Error('{} only support number');
}
let newExpression = '';
for(let i=1;i<num;i++){
newExpression += context.lastExpression;
}
context.pattern = context.pattern.substr(0, context.currentPatternIndex) +
newExpression +
context.pattern.substr(endIndex+1);
}
} // 普通字符
class StringExpression implements Expression{
interpret(context: Context){
context.lastExpression = context.currentPatternExpression;
context.isMatch = context.currentPatternExpression === context.currentText;
context.currentPatternIndex++;
context.currentTextIndex++;
}
}

有了这些解释器,现在解析表达式就很轻松了:

class Regex{
mapping: {[key:string]: Expression} = {
'^': new BeginExpression(),
'$': new EndExpression(),
'{': new BraceExpression(),
'[': new BracketExpression(),
'\\':new BslashExpression(),
}; // 这是一个表达式-解释器的映射表
stringExp: Expression = new StringExpression(); constructor(private pattern: string){ } IsMatch(text: string): boolean{
let context = new Context(this.pattern, text); for(context.currentPatternIndex=0;context.currentPatternIndex<context.pattern.length;){
let symbol = this.mapping[context.currentPatternExpression];
symbol ? symbol.interpret(context) : this.stringExp.interpret(context); //通过找到对应的解释器来解释匹配文本
if(!context.isMatch){
break;
}
}
return context.isMatch;
}
}

写个手机号码验证的正则表达式测试一下:

let pattern = '/^1[34578]\d{9}$/';
let regex = new Regex(pattern); let text = '13712345678';
console.log(`match ${text}: ${regex.IsMatch(text)}`); // 正常手机号:成功 text = '1371234567p';
console.log(`match ${text}: ${regex.IsMatch(text)}`); // 手机号里有字母:失败 text = '137123456789';
console.log(`match ${text}: ${regex.IsMatch(text)}`); // 多了一位:失败 text = '1371234567';
console.log(`match ${text}: ${regex.IsMatch(text)}`); // 少了一位:失败

结果符合预期,可以看到用解释器把表达分开解释的好处很明显,各个解释器互不干扰,主体部分调用这些解释器分别进行解释就可以了,非常方便。

当然这也只是处理简单的语法,如果语法很复杂就需要考虑引入分析引擎或编译器了。

TypeScript设计模式之解释器的更多相关文章

  1. 乐在其中设计模式(C#) - 解释器模式(Interpreter Pattern)

    原文:乐在其中设计模式(C#) - 解释器模式(Interpreter Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 解释器模式(Interpreter Pattern) 作 ...

  2. 设计模式:解释器(Interpreter)模式

    设计模式:解释器(Interpreter)模式 一.前言 这是我们23个设计模式中最后一个设计模式了,大家或许也没想到吧,竟然是编译原理上的编译器,这样说可能不对,因为编译器分为几个部分组成呢,比如词 ...

  3. C#设计模式:解释器模式(Interpreter Pattern)

    一,C#设计模式:解释器模式(Interpreter Pattern) 1,解释器模式的应用场合是Interpreter模式应用中的难点,只有满足“业务规则频繁变化,且类似的模式不断重复出现,并且容易 ...

  4. 北风设计模式课程---解释器模式(Interpreter Pattern)

    北风设计模式课程---解释器模式(Interpreter Pattern) 一.总结 一句话总结: 不仅要通过视频学,还要看别的博客里面的介绍,搜讲解,搜作用,搜实例 设计模式都是对生活的抽象,比如用 ...

  5. python设计模式之解释器模式

    python设计模式之解释器模式 对每个应用来说,至少有以下两种不同的用户分类. [ ] 基本用户:这类用户只希望能够凭直觉使用应用.他们不喜欢花太多时间配置或学习应用的内部.对他们来说,基本的用法就 ...

  6. 【GOF23设计模式】解释器模式 & 访问者模式

    来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_解释器模式.访问者模式.数学表达式动态解析库式 1.解释器模式Interpreter  2.访问者模式Visitor 

  7. [设计模式] 15 解释器模式 Interpreter

    在GOF的<设计模式:可复用面向对象软件的基础>一书中对解释器模式是这样说的:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子.如果一种特定类 ...

  8. TypeScript设计模式之单例、建造者、原型

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 单例模式 Singleton 特点:在程序的生命周期内只有一个全局的实例,并且不能再new出新的实例. 用处:在一些只需要一个对象存在 ...

  9. TypeScript设计模式之工厂

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...

随机推荐

  1. Treeview显示磁盘下的文件,并且可操作

    #region TreeView树形显示磁盘下文件夹 /// <summary> /// IconIndexs类 对应ImageList中5张图片的序列 /// </summary& ...

  2. Prim和Kruskal最小生成树

    标题: Prim和Kruskal最小生成树时 限: 2000 ms内存限制: 15000 K总时限: 3000 ms描述: 给出一个矩阵,要求以矩阵方式单步输出生成过程.要求先输出Prim生成过程,再 ...

  3. [html5]学习笔记一 新增的主题结构元素

    html5 新增的主体结构元素有:article,section,nav,aside,time,pubdate元素. 1. article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引 ...

  4. 语句 if else

    语句 语句是指程序命令,都是按照顺序执行的.语句在程序中的执行顺序称为“控制流”或“执行流”. 根据程序对运行时所收到的输入的响应,在程序每次运行时控制流可能有所不同. 语句间的标点符号必须是英文标点 ...

  5. Windows 7下解决: java.net.SocketException: No buffer space available (maximum connections reached?)

    查了一大堆网上的资料全都没用,Google得知,是Windows 7 的socket泄漏 : https://supportkb.riverbed.com/support/index?page=con ...

  6. request和response对象的具体介绍

    Request 对象 - request 对象表示 HTTP 请求,包含了请求查询字符串,参数,内容,HTTP 头部等属性.常见属性有:    req.app:当callback为外部文件时,用req ...

  7. 【原创】python中文编码问题深入分析(二):print打印中文异常及显示乱码问题分析与解决

    在学习python以及在使用python进行项目开发的过程中,经常会使用print语句打印一些调试信息,这些调试信息中往往会包含中文,如果你使用python版本是python2.7,或许你也会遇到和我 ...

  8. 社交媒体(朋友圈、微博、QQ空间)开发一网打尽,PC端移动端都有!——源码来袭!

    一.应用场景 曾几何时,社交媒体已经驻扎到了几乎每个人的生活中.看看你身边的朋友,有几个不玩朋友圈的?就算他不玩朋友圈,那也得玩微博吧.再没有底线,也得玩QQ空间. 不过,作为程序员的我们,没事还是少 ...

  9. Htmlunit使用

    //模拟一个浏览器 WebClient webClient = new WebClient(); //设置webClient的相关参数 webClient.setJavaScriptEnabled(t ...

  10. NodeJS 框架一览

    Express 当你使用Node.js构建web应用程序时, Express通常被视为事实上的Web服务器.它的哲学(一个可以使用中间件包扩展的简约核心)是大多数Node.js开发者所熟悉的. Koa ...