javascript设计模式 ? 解释器模式原理与用法实例分析


Posted in Javascript onApril 17, 2020

本文实例讲述了javascript设计模式 ? 解释器模式原理与用法。分享给大家供大家参考,具体如下:

介绍:之前在做java开发时,数据库的增删改查特别频繁,并且场景不同需要用到的SQL语句页都不同,如何用调用方法的形式来使用sql语句,拼接sql?这就是这一节我们要讲的解释器模式。

定义:定义一个语言的文法,并且建立一个解释器来解释该语言中的句子,这里的语言是指使用规定格式和语法的代码。解释器模式是一种类行为型模式。

场景:我们实现一个解释器,用来判断传递的数字是奇数还是偶数,是正数还是负数,是正奇数还是负奇数。

示例:

var TerminalExpression = function(data){
  this.data = data;
 
  this.interpret = function(context){
    if(context === this.data){
      return true;
    }
    return false;
  }
}
 
var OrExpression = function(exprArr){
  this.exprArr = exprArr;
 
  this.interpret = function(context){
    var isMatch = false;
    this.exprArr.map(function(item){
      if(item.interpret(context)){
        isMatch = true;
      }
    })
    return isMatch;
  }
}
 
var AndExpression = function(exprArr){
  this.exprArr = exprArr;
 
  this.interpret = function(context){
    var isMatch = true;
    this.exprArr.map(function(item){
      if(!item.interpret(context)){
        isMatch = false;
   }
    })
    return isMatch;
  }
}
 
function getEvenExpression(){
  var ExpressionList = [];
  for(var i = -10; i<100; i++){
    if(i % 2 == 0){
      ExpressionList.push(new TerminalExpression(i));
    }
  }
  return new OrExpression(ExpressionList);
}
 
function getOddExpression(){
  var ExpressionList = [];
  for(var i = -10; i<100; i++){
    if(i % 2 != 0){
      ExpressionList.push(new TerminalExpression(i));
    }
  }
  return new OrExpression(ExpressionList);
}
 
function getNegativeOddExpression(){
  var ExpressionList = [];
  for(var i = -10; i<100; i++){
    if(i < 0){
      ExpressionList.push(new TerminalExpression(i));
    }
  }
  return new OrExpression(ExpressionList);
}
 
var isEven = getEvenExpression();
var isOdd = getOddExpression();
var isNegative = getNegativeOddExpression();
var isNegativeAndOdd = new AndExpression([isNegative,isOdd]);
 
console.log('2是偶数吗? ' + isEven.interpret(2));//2是偶数吗? true
console.log('3是偶数吗? ' + isEven.interpret(3));//3是偶数吗? false
console.log('3是奇数吗? ' + isOdd.interpret(3));//3是奇数吗? true
console.log('3是负数吗? ' + isNegative.interpret(3));//3是负数吗? false
console.log('-3是负数吗? ' + isNegative.interpret(-3));//-3是负数吗? true
console.log('-3是负奇数吗? ' + isNegativeAndOdd.interpret(-3));//-3是负奇数吗? true
console.log('-4是负奇数吗? ' + isNegativeAndOdd.interpret(-4));//-4是负奇数吗? false
console.log('3是负奇数吗? ' + isNegativeAndOdd.interpret(3));//3是负奇数吗? false

上面的例子中TerminalExpression被称为终结符表达式类,封装底层的判断条件,一般解释器模式中只会存在少数几个终结符表达式类。
OrExpression,AndExpression称为非终结符表达式类,是基于多个终结符表达式组合而成相对复杂的逻辑。
解释器模式最核心的就是这两个类,基于他们可以扩展组合出丰富多样的条件。
虽然解释器模式的使用频率不是特别高,但是它在正则表达式,xml文档解释等领域还是得到了广泛的应用。

解释器模式总结:

优点:
* 易于扩展和修改文法规则。增加时只需要增加新的终结符表达式,符合开关原则。

缺点:
* 对于复杂文法难以维护,会充满非终结表达式。
* 执行效率低,由于使用了大量循环和递归调用,在解释复杂句子时速度很慢。

适用场景:
* 可以将一个需要解释执行的语言中的句子表示为一个抽象语法树
* 一些重复出现的问题可以用一种简单的语言来进行表达
* 一个语言文法较为简单
* 执行效率不是关键问题

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
jQuery动画与特效详解
Feb 01 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
js实现常用排序算法
Aug 09 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 #Javascript
vue制作抓娃娃机的示例代码
Apr 17 #Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 #Javascript
tracking.js实现前端人脸识别功能
Apr 16 #Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 #Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 #Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 #Javascript
You might like
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
让python 3支持mysqldb的解决方法
2017/02/14 Python
分享6个隐藏的python功能
2017/12/07 Python
python编写分类决策树的代码
2017/12/21 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
python对XML文件的操作实现代码
2020/03/27 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
工商干部先进事迹
2014/05/14 职场文书
导师工作推荐信范文
2014/05/17 职场文书
考试后的感想
2015/08/07 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
利用JavaScript写一个简单计算器
2021/11/27 Javascript