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 相关文章推荐
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 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
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
脚本收藏iframe
2006/07/21 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
Python中for循环详解
2014/01/17 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
Python中实现switch功能实例解析
2018/01/11 Python
python openpyxl使用方法详解
2019/07/18 Python
Pandas分组与排序的实现
2019/07/23 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
电子信息毕业生自荐信
2013/11/16 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS