TypeScript设计模式之解释器

看看用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)}`); // 少了一位:失败

结果符合预期,可以看到用解释器把表达分开解释的好处很明显,各个解释器互不干扰,主体部分调用这些解释器分别进行解释就可以了,非常方便。 当然这也只是处理简单的语法,如果语法很复杂就需要考虑引入分析引擎或编译器了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏NetCore

流畅地HtmlHelper-Asp.Net MVC

今天抛开 Fluent NHibernate 不谈,我们来谈谈 Asp.Net MVC ,在MVC的View中,我们经常会使用HtmlHelper来生成各种ht...

1838
来自专栏阮一峰的网络日志

ES6 的功能侦测库 ES-Checker

两周前,《ECMAScript国际标准(第6版)》正式通过,下一代 JavaScript 语言定案。 ? ECMAScript 6(以下简称 ES6)总共新增了...

3377
来自专栏更流畅、简洁的软件开发方式

【自然框架】之通用权限(五):项目描述表组

      继续,这是第五章了。我发现了,写文章比写程序还要有难度。 通用权限想要写的文章目录:(这是第五章) 1、 简介、数据库的总体结构 2、 介绍人...

1919
来自专栏老九学堂

十七个C语言新手编程时常犯的错误及解决方式

C编译的程序对语法检查并不像其它高级语言那么严格,这就给编程人员留下“灵活的余地”,但还是由于这个灵活给程序的调试带来了许多不便,尤其对初学C语言的人来说,经常...

2767
来自专栏前端儿

教你如何在React及Redux项目中进行服务端渲染

使用 redux-saga 处理异步action,使用 express 处理页面渲染

991
来自专栏函数式编程语言及工具

Akka(6): become/unbecome:运算行为切换

   通过一段时间的学习了解,加深了一些对Akka的认识,特别是对于Akka在实际编程中的用途方面。我的想法,或者我希望利用Akka来达到的目的是这样的:作为传...

2289
来自专栏更流畅、简洁的软件开发方式

【自然框架】QuickPager asp.net 分页控件的Ajax分页方式。

  上次比较匆忙,Ajax的分页方式仅实现了基本功能,或者说只是验证了我的想法。现在对Ajax分页有做了一些调整,现在可以正式用了。   使用方法还是非常简单,...

2277
来自专栏双十二技术哥

深入Weex系列(六)Weex渲染流程分析

在前两篇文章中我们结合源码学习了Module、Component的注册、调用、回调等流程,相信大家一定收获颇多,对Weex的理解也一定愈加深入。

865
来自专栏Java成长之路

Solr查询处理简介

所有与solr核心服务有关的交互,如查询处理,都是通过HTTP请求执行的。填写查询表单之后,创建一个HTTP Get请求并发送给Solr。

622
来自专栏木宛城主

ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers

序言 ASP.NET MVC允许开发者创建自定义的HTML Helpers,不管是使用静态方法还是扩展方法。一个HTML Helper本质上其实是输出一段HT...

1898

扫码关注云+社区