VUE中如何动态编译js

JavaScript013

VUE中如何动态编译js,第1张

需求:动态获取一段字符串类型的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/

其实 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.引用脚本