前段时间,想着自己写一个简单的模版引擎,便于自己平时开发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. 设计模式--MVC(C++版)

    MVC 模式代表 Model-View-Controller(模型-视图-控制器) 模式.这种模式用于应用程序的分层开发. Model(模型)-是应用程序中用于处理应用程序数据逻辑的部分.通常模型对象 ...

  2. Configuration problem: Unable to locate Spring NamespaceHandler for XML schema namespace 解决方法

    这个问题是在用到spring时,本地IDE里面跑的很正常,但是打包后在集群上运行时报错. 多方查找资料后确定了问题的根源,由于在依赖中调用了spring的许多包,会存在文件覆盖的情况. 具体是 这三个 ...

  3. hdu2159 FATE 经典二维背包

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2159 思路: 定义ans存当前满足条件的消耗的最小的忍耐值(满足条件的忍耐值为在当前消耗的忍耐值的情况 ...

  4. 学习笔记:javascript 表单对象(form)

    Form 对象属性 属性 描述 acceptCharset 服务器可接受的字符集. action 设置或返回表单的 action 属性. enctype 设置或返回表单用来编码内容的 MIME 类型. ...

  5. JAVA虚拟机系列文章

    本系列文章主要记录自己在学习<深入理解Java虚拟机-JVM高级特性与最佳实践>的知识点总结,文章内容都是基于周志明所著书籍的总结. 1.Java内存区域与溢出 2.垃圾收集器与内存分配策 ...

  6. 第一篇:使用Spark探索经典数据集MovieLens

    前言 MovieLens数据集包含多个用户对多部电影的评级数据,也包括电影元数据信息和用户属性信息. 这个数据集经常用来做推荐系统,机器学习算法的测试数据集.尤其在推荐系统领域,很多著名论文都是基于这 ...

  7. 使用windows桌面ftp上传文件到linux服务器

    首先在linux服务器上安装ftp [root@host2 test]#yum -y install ftp vsftpd [root@host2 test]#service vsftpd start ...

  8. 如何升级php版本---从php5.5.12 升级php7.1.5 wamp实践

    1.从官网下载一个php7.1.5 2.将刚下载的压缩包解压缩,修改命名为php7.1.5,即php+版本号. 3.将这个文件夹放在wamp/bin/php 目录下. 4.将原来版本的php5.5.1 ...

  9. 18、面向对象基本原则及UML类图简介

    18.1.面向对象基本原则 18.1.1.面向抽象原则 抽象类特点: a.抽象类中可以有abstract方法,也可以有非abstract方法. b.抽象类不能用new运算符创建对象. c.如果一个非抽 ...

  10. js 高级算法 - 动态规划

    主要是看了<数据结构与算法>有所感悟,虽然这本书被挺多人诟病的,说这有漏洞那有漏洞,但并不妨碍我们从中学习知识. 其实像在我们前端的开发中,用到的高级算法并不多,大部分情况if语句,for ...