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 可拖动列表实现代码
Dec 13 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
vue实现单选和多选功能
Aug 11 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
Vue render深入开发讲解
Apr 13 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
js验证密码强度解析
Mar 18 Javascript
vue cli4下环境变量和模式示例详解
Apr 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
配置支持SSI
2006/11/25 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
python队列queue模块详解
2018/04/27 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
安装python及pycharm的教程图解
2019/10/10 Python
python实现的Iou与Giou代码
2020/01/18 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
计算机系毕业生推荐信
2013/11/06 职场文书
考博专家推荐信模板
2013/12/02 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
车辆转让协议书
2014/09/24 职场文书
保研专家推荐信范文
2015/03/25 职场文书
借条如何写
2015/05/26 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL