Browserify,如何访问main.js函数

Dav*_*ile 6 javascript browserify

我可以使browserify工作但是对于如何从DOM访问bundle.js中的函数感到有些困惑.

我有三个档案 -

message.js

module.exports = function (){
   return "Hello";
};
Run Code Online (Sandbox Code Playgroud)

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());
} 
Run Code Online (Sandbox Code Playgroud)

的index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="js/bundle.js"></script>
</head>
<body>
    <button onclick="fnClick();">Click</button>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

在浏览器中,当alert(getMessage());main.js中的脚本加载显示警报但调试器时,fnClick未定义,我可以使用范围.

谢谢

Fre*_*dyC 20

条目文件中的任何代码都在闭包中执行.如果你看一下创建的bundle.js,你会在那里看到类似的东西.

function(require, module, exports) {
    function fnClick() {
        alert(getMessage());
    }
}
Run Code Online (Sandbox Code Playgroud)

您在此处创建的任何内容都将仅隐藏到全局空间,除非您明确使用window对象(但不要这样做)来公开它.


正如@elclanrs在上面的评论中所说的那样,只需在代码中添加侦听器而不是HTML.如果您不想使用外部库,则可以采用这种方式.

var button = document.getElementById('my-button'); // add id="my-button" into html
button.addEventListener('click', fnClick);
Run Code Online (Sandbox Code Playgroud)

或者像流行的jQuery这样的库你只需要调用.

$('#my-button').click(fnClick)
Run Code Online (Sandbox Code Playgroud)

  • 这不应该是一个反对票,它比@idbehold 的评论更相关地解释了细节 (2认同)