调用webpack打包后的js中的函数报错问题

JavaScript023

调用webpack打包后的js中的函数报错问题,第1张

今天用原生js和jquery动态生成一个表单弹窗,因为想在使用的时候只引入一个js文件,所以想到用webpack将js和css打包到一起,这样就不用单独引入css文件了,结果使用过程中还是踩了一些坑。

文件里面js函数较多有生成dom的有校验的有提交表单获取值的,在这我只说一下出现问题的js函数,表单所有dom结构都是动态生成的,有两个点击事件是用原生js直接写到html标签上面的,一个方法是用来关闭表单一个方法是用来提交表单。

还有一个方法是给外部调用触发生成表单弹窗的方法

通过webpack打包后在页面中引入打包后的js文件,直接调用questionnaire方法打开控制台发现报未定义

webpack打包后的js文件中的方法和变量都变成了局部的,外部无法直接访问。解决办法:修改上面三个方法的定义方式

将上面三个方法都改为显式添加到全局,打包后引入js调用方法即可正常显示。

前面的两个方法因为是在html中直接调用的所以还有另一种处理方法:添加事件监听

打包引入后发现同样是可以的。

PHP是后台服务器语言,只会被动的等待客户端连接。

如果你想要获取执行JS后的代码,可以用ajax来实现。

写一个JS函数,获取所有的HTML代码,然后向服务器端发出异步请求,把代码发出去就是了。

一个是利用

document.write( yourVariable);

来输出。

一个是直接操作 dom 节点:

documem.querySelector('#yourDom').textContent = yourVariable