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来实现动画导航效果的代码
Dec 16 Javascript
javascript 表单的友好用户体现
Jan 07 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 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下的权限算法的实现
2007/04/28 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
Promise扫盲贴
2019/06/24 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
python中join()方法介绍
2018/10/11 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
android面试问题与答案
2016/12/27 面试题
药品质量检测应届生求职信
2013/11/14 职场文书
物理教师自荐信范文
2013/12/28 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
小孩不笨观后感
2015/06/03 职场文书
给校长的建议书作文300字
2015/09/14 职场文书