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 相关文章推荐
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 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
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
JavaScript prototype 使用介绍
2013/08/29 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
浅谈js闭包理解
2019/03/28 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
Python聊天室实例程序分享
2016/01/05 Python
Python实例一个类背后发生了什么
2016/02/09 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
python生成并处理uuid的实现方式
2020/03/03 Python
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
简单的辞职信范文
2014/01/18 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
店铺转让协议书
2014/12/02 职场文书
学校教师培训工作总结
2015/10/14 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers