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 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
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个人网站架设连环讲(一)
2006/10/09 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
js实现随机点名
2021/01/19 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
python聊天程序实例代码分享
2013/11/18 Python
详解Python中的__init__和__new__
2014/03/12 Python
3分钟学会一个Python小技巧
2018/11/23 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
基于python监控程序是否关闭
2020/01/14 Python
django ORM之values和annotate使用详解
2020/05/19 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
副总经理工作职责
2013/11/28 职场文书
手机业务员岗位职责
2013/12/13 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
企业人事任命书
2014/06/05 职场文书
小学清明节活动总结
2014/07/04 职场文书
大学生暑期实践报告
2015/07/13 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL