前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用。于是根据自己对模版引擎的理解,定义自己的模版格式,然后,根据自己定义的格式,编写处理函数,将模版标签中的字符串,解析成可执行的字符串,然后再用eval函数执行该可执行的字符串。

  然后问题就出现了!eval等价于evil!

  为什么呢?各大js权威书籍上都不提倡使用eval。下面我详细的解释一下为什么不提倡。

  首先,大家需要知道,js并不是一门解释型语言。它和其他大家熟知的编程语言(c,java,c++)一样,是编译型语言。但是,它和其他的编译型语言又不完全一样。众所周知,C语言等是预编译的语言,它们可以编译成目标代码,移植到其他机器中运行。而js呢,它并不是一门预编译的语言,它的编译过程可能只在执行前一秒。但是,它确实在执行前进行了编译过程。

  然后,大家要了解一下,词法作用域。所谓的词法作用域,是指当前作用域,可以访问的变量。

  js编译过程,其实就是在将申明的变量添加当前词法作用域,并将其他代码编译成可执行代码。然而,在浏览器中,做了一些列的优化,可以通过静态代码分析,定位申明的变量和函数的位置,方便后续访问。然而,我们却可以通过eval函数,改变当前词法作用域。这样一样,浏览器所做的优化都将付诸一炬。当出现eval,浏览器做的最好的处理方式,就是不做任何处理。

  以上为为什么不提倡使用eval,下面我是如何规避eval函数!

  主要的思路是:我们经常使用script标签动态添加脚本文件,同样我们也可以通过script标签中添加可执行语句字符串,也就可以动态添加可执行语句。

代码如下:

 /**
      * 将传入的可执行字符串,通过script标签执行
      * @param  {[string]} str 可执行字符串
      */
     function strToFun(str) {
         // 创建script标签
         var script = document.createElement('script');
         script.id = 'executableString';

         // 处理传入的字符串,当相应的语句执行完毕后,将script标签移除
         var handleStr = '(function() { ' + str + ';var script = document.getElementById("executableString"); document.body.removeChild(script); })();'; 

         // 将待执行的代码添加到刚创建的script标签中
         script.innerHTML = handleStr;

            // 将创建的脚本追加到DOM树中
         document.body.appendChild(script);
     }

  以上,只是我一时的想法,希望大家积极提供不同的想法!!!

  

  

如何在前端模版引擎开发中避免使用eval函数的更多相关文章

  1. js模版引擎开发实战以及对eval函数的改进

    简介 前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用,同时也算是之前学习的知识的一种总结吧! 首先我们先了解一下模版引擎的工作原理吧! 1. 模版引擎其实就是将指定标签的内容根 ...

  2. iOS开发中常用的数学函数

    iOS开发中常用的数学函数 /*---- 常用数学公式 ----*/ //指数运算 3^2 3^3 NSLog(,)); //result 9 NSLog(,)); //result 27 //开平方 ...

  3. web前端之html5开发中常用的开发工具

    正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果.正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发 ...

  4. 使用localstorage及js模版引擎 开发 m站设想

    目前 m站开发的方式,依然请求完整的html,这样造成的问题就是每次请求的数据量过大过多,在没有wifi的情况下,导致页面打开的速度很慢,耗费的流量也较多:访问m站的多是移动端设备,其浏览器的版本都较 ...

  5. 关于js开发中保留小数位计算函数(以向上取整或向下取整的方式保留小数)

    前端工作中经常遇到数字计算保留小数问题,由于不是四舍五入的方式不能使用toFixed函数,本文采用正则表达式匹配字符串的方式,解决对数字的向上或向下保留小数问题: 1.向上保留小数(只要目标小数位后有 ...

  6. onvif 开发中的一些重要函数介绍

    ➤soap结构中count(soap->count)成员 soap结构中count(soap->count)成员记录的是http协议中Content-Length的数值. ➤keep_al ...

  7. android开发中怎么通过Log函数输出当前行号和当前函数名

    public class Debug { public static int line(Exception e) { StackTraceElement[] trace = e.getStackTra ...

  8. 【转载】Asp.Net中使用基于jQuery的javascript前台模版引擎JTemplate

    JTemplate是基于jQuery的开源的前端模版引擎,在Jtemplate模板中可以使用if判断.foreach循环.for循环等操作,使用Jtemplate模板优点在于ajax局部刷新界面时候不 ...

  9. Spring Boot (二):模版引擎 Thymeleaf 渲染 Web 页面

    Spring Boot (二):模版引擎 Thymeleaf 渲染 Web 页面 在<Spring Boot(一):快速开始>中介绍了如何使用 Spring Boot 构建一个工程,并且提 ...

随机推荐

  1. Docker 打包 部署

    Docker 打包 部署 一贯的开场白,大家好: 开始学习Spring Boot ,同时也再学习 Maven 自动化构建.  项目的部署环境是 Linux 服务器,Docker容器. 之所以写这篇博客 ...

  2. haproxy安装配置for mysql负载均衡(ubantu)

    1.安装pcre apt-get update (apt-get install openssl libssl-dev  ==>可能需要安装的依赖包) apt-get install libpc ...

  3. [刷题]算法竞赛入门经典 3-7/UVa1368 3-8/UVa202 3-9/UVa10340

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 都是<算法竞赛入门经典(第二版)>的题目,标题上没写(第二版) 题目:算法竞赛入门经典 3-7/UVa13 ...

  4. 网际报文控制协议ICMP

    为了更有效地转发IP数据报和提高交付成功的机会,在网际层使用了网际控制报文协议ICMP.ICMP允许主机或路由器报告差错情况和提供有关异常情况的报告.ICMP是因特网的标准协议.但ICMP不是高层协议 ...

  5. PHP电商订单自动确认收货redis队列

    一.场景 之前做的电商平台,用户在收到货之后,大部分都不会主动的点击确认收货,导致给商家结款的时候,商家各种投诉,于是就根据需求,要做一个订单在发货之后的x天自动确认收货.所谓的订单自动确认收货,就是 ...

  6. smarty中的修饰函数

    smarty中的修饰函数: 对在模板文件中显示的数据变量进行二次修饰. 格式: {ts:变量|函数名:参数1:参数2:参数3...|函数名:参数1:参数2...} 常见的修饰函数: capitaliz ...

  7. 响应式web-媒体查询

    响应式web-媒体查询 媒体查询是一个将很多响应式概念和工具连接在一起的粘合剂.这些查询语句都是简单但是功能很强大的,它们允许我们检测设备属性,定义规则,并根据规则等的不同加载不同的 CSS 属性.例 ...

  8. 点击Input框弹出日期选项

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. MyBatis源码解读(1)——SqlSessionFactory

    在前面对MyBatis稍微有点了解过后,现在来对MyBatis的源码试着解读一下,并不是解析,暂时定为解读.所有对MyBatis解读均是基于MyBatis-3.4.1,官网中文文档:http://ww ...

  10. nmon指标

    表字段分析 关键指标类型 关键指标名称 关键指标含义 SYS_SUMM CPU% cpu占有率变化情况: IO/sec IO的变化情况: AAA AIX AIX版本号: cpus CPU数量: har ...