VUE中如何动态编译js

需求：动态获取一段字符串类型的js脚本，动态编译它并且可以敏丛完美在vue中运行与之交互。

实现：动态编译js的方式有饥橘eval和new function

简单例子：

eval：

new function:

显然后者更利于扩展，详细了解区别可以参考链接内容：烂拿团

https://www.zhihu.com/question/29743491

https://imys.net/20151222/eval-with-new-function.html

要注意使用new Function，在vue环境中直接赋值的方式函数作用域与赋值vue结构对象不同： https://jsfiddle.net/5neLzn1x/

vue压缩后的js可以反编译出来，反编译方法为：

1、在桌面找到自己下载的浏览器软件，点击浏览器图标。

2、在浏览器中随便找个网址登入。

3、在网页上右键鼠标，d出右键菜单中选择“审查元素”选项（或按F12），d出开发工具d框，在d框中选择“Sources”选项。如下图所示。

4、在左侧网络文件列表中随便找个js文件（如：mt_show_1.8.js文件），点击该文件并查看文仿孙件内容。发现文件一行展示证明被压缩过了。

5、找到该文件内容左下角的“{}”标签，找到后并点击该标签。

6、随后左侧会生成一个格式化改大亏后的文件（如：mt_show_1.8.js:formatted文件），查看js文核神件内容，内容展示成正常的格式了。现在就可以读懂里面的代码了。

其实 js本来就是前台脚本，把js文件编译成dll供页面调用也可以实行

方法：

1.在解决方案中添加一个新项目（类库：JSControl）

2.在新项目中闷孝添加要用的JS脚本（蚂档稿JScript1.js）

脚本的内容：

function testAlert() {

alert("Hello!")

}

3. 改变JScript1.js的属性，Build Action为Embedded Resource（嵌入的资源）

4.在JSControl项目的AssemblyInfo.cs文件添加一行：（注意

JSControl.JScript1.js，JSControl是js所在项目的命名空间）

//定义组件内的内嵌资源的蠢孙元数据属性

[assembly: System.Web.UI.WebResource("JSControl.JScript1.js", "application/x-javascript")]

注意:这边要增加个引用:System.Web.dll

5. 项目中增加一个注册客户端脚本的类：

6.在网站项目中引用JSControl项目，编译后生成

JSControl.dll

7.在要调用脚本的页面注册JSControl.dll

<%@ Register Assembly="JSControl" Namespace="JSControl"

TagPrefix="zhi" %>

8.引用脚本

---