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面向对象编程
Mar 04 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
AngularJS指令用法详解
Nov 02 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 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/12/28 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
django使用graphql的实例
2020/09/02 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
python regex库实例用法总结
2021/01/03 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
工程类专业自荐信范文
2014/03/09 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
住宅质量保证书
2014/04/29 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
行政文员岗位职责
2015/02/04 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python