我可以让 browserify 正常工作,但对如何从 DOM 访问 bundle.js 中的函数有点困惑。
我有三个文件-
message.js
module.exports = function (){
return "Hello";
};
main.js
var getMessage = require('./message');
//This shows the alert when script loads
alert(getMessage());
//cannot find this function from index.html
function fnClick(){
alert(getMessage());
}
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/bundle.js"></script>
</head>
<body>
<button onclick="fnClick();">Click</button>
</body>
</html>
在浏览器中,当脚本加载 main.js 中的 alert(getMessage());
时显示警报,但调试器、fnClick 未定义,我可以使用范围。
谢谢
最佳答案
入口文件中的任何代码都在闭包中执行。如果您查看创建的 bundle.js,您会在其中看到类似的内容。
function(require, module, exports) {
function fnClick() {
alert(getMessage());
}
}
除非您明确使用 window
对象(但不要那样做)来公开它,否则您在此处创建的任何内容都将隐藏到全局空间中。
正如@elclanrs 在上面的评论中所说,只需在您的 main.js 代码中附加事件监听器而不是 HTML。如果你不想使用外部库,你可以用困难的方式来做。
var button = document.getElementById('my-button'); // add id="my-button" into html
button.addEventListener('click', fnClick);
或者使用诸如流行的 jQuery 之类的库,您只需调用即可。
$('#my-button').click(fnClick)
关于javascript - Browserify,如何访问 main.js 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25517201/