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对id中含有特殊字符的转义处理示例
Sep 06 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
jquery实现全屏滚动
Dec 28 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
微信jssdk用法汇总
Jul 16 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
angular分页指令操作
Jan 09 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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
PHP 采集心得技巧
2009/05/15 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
PHP7.0版本备注
2015/07/23 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
python中的变量如何开辟内存
2018/06/26 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
python编写猜数字小游戏
2019/10/06 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
linux面试题参考答案(10)
2016/10/26 面试题
医药工作者的求职信范文
2013/09/21 职场文书
岗位职责定义及内容
2013/11/08 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
帝企鹅日记观后感
2015/06/10 职场文书