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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
jquery之Document元素选择器篇
Aug 14 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
javascript控制台详解
Jun 25 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 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
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
5个javascript的数字格式化函数分享
2011/12/07 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
详解vuex的简单使用
2018/03/12 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
Python连接phoenix的方法示例
2017/09/29 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
python开发前景如何
2020/06/11 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
学习自我鉴定
2014/02/01 职场文书
销售经理竞聘书
2014/03/31 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
2014年教研工作总结
2014/12/06 职场文书
男人帮观后感
2015/06/18 职场文书
利用python做表格数据处理
2021/04/13 Python
Python机器学习之基础概述
2021/05/19 Python
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL