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

标签：element   最好   demo   编程语言   log   eval   如何   append   函数   

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

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

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

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

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

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

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

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

代码如下：

 1 /**
 2      * 将传入的可执行字符串，通过script标签执行 
 3      * @param  {[string]} str 可执行字符串
 4      */
 5     function strToFun(str) {
 6         // 创建script标签
 7         var script = document.createElement(‘script‘);
 8         script.id = ‘executableString‘;
 9 
10         // 处理传入的字符串，当相应的语句执行完毕后，将script标签移除
11         var handleStr = ‘(function() { ‘ + str + ‘;var script = document.getElementById("executableString"); document.body.removeChild(script); })();‘; 
12 
13         // 将待执行的代码添加到刚创建的script标签中
14         script.innerHTML = handleStr;
15 
16            // 将创建的脚本追加到DOM树中
17         document.body.appendChild(script);
18     }

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

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

标签：element   最好   demo   编程语言   log   eval   如何   append   函数   

原文地址：http://www.cnblogs.com/diligentYe/p/javascript.html