如何在前端模版引擎开发中避免使用eval函数

  前段时间,想着自己写一个简单的模版引擎,便于自己平时开发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);
     }

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

  

  

上一篇:Android仿QQ窗口的抖动的动画效果


下一篇:laravel项目安装与重要目录文件说明(一)