[自制模板引擎] 为模板引擎增加解析表达式功能

通过上一片已经能把占位符替换成对应的变量的值,实现了一个简单的迷你模板引擎,模板引擎一个不错的功能就是能够计算一些简单的表达式,计算表达式的核心其实就是执行字符串,执行字符串的方法多种多样eval,Function,setTimeout等等,都能执行,至于用哪种方法,就仁者见仁智者见智了。

下面整理一下在模板引擎中会遇到的表达式:

{ a + b }     //普通的计算表达式
{ a == false }   //普通的比较
{ a === false }  //全等比较
{ a !== false}
{ !a }  //非运算
……
普通表达式,非运算,比较

这三种表达式,无非就是替换其中的变量,然后判断一下是否为数字,最后执行一遍这个字符串便能直接解析出这段表达式,所以下面解析出这几种运算符。

//替换一个表达式内的运算符
var m = "  1 + 2 + 3 - 1 + test";
var obj = {
      test : 1
}
//处理运算符的值
//这里简单的处理了加减操作 m
= m.replace(/[^\+-\s]*/g,function(varMatch) { //如果是不是数字 //并且在对应的对象有这个属性 if (Number(varMatch) != Number(varMatch) && obj[varMatch]) { if (typeof obj[varMatch] === "number") { return obj[varMatch]; }else{ return "'" + obj[varMatch] + "'"; } }else{ return varMatch; } }); console.log(m);

 不管用什么方法,解析表达式必须要执行字符串表达式,所以方法千万种,目的只有一个,下面是一个完整的可执行的解析表达式的例子。

var originalData = {
    jquery : "hello jquery",
    angular : " two-way data binding",
    react : "The Fast and the Furious"
}
var text = "我喜欢{{jquery + angular}},但是最近几年{{angular == angular}}貌似是一个方向,但是又有了{{react == false}},让我犹豫了我是否应该报考蓝翔学习{{1+1}}"
activeExpresstion(text,originalData);
function activeExpresstion(text,obj){
    var operatorReg = /[\+-\/\*\=\!]*/g;
    var variableReg = /[^\+-\/\*=\!\s]+/g;
    var placeReg = /\{\{.*?\}\}/g;
    var expressValue;
  //取出每一组{{}}包含的占位符 text
= text.replace(placeReg,function(m){ m = m.substring(2,m.length-2); //判断是否有运算符 if (operatorReg.test(m)) { m = m.replace(variableReg,function(varMatch) { //如果是不是数字 //并且在对应的对象有这个属性 if (Number(varMatch) != Number(varMatch) && obj[varMatch]) { if (typeof obj[varMatch] === "number") { return obj[varMatch]; }else{ return "'" + obj[varMatch] + "'"; } }else{ return varMatch; } }) eval("expressValue = " + m); return expressValue; }else { if (obj[m]){ return obj[m] }else{ return m; } } }); return text; }

 

转载于:https://www.cnblogs.com/Amy-so/p/5571736.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值