javascript - Browserify,如何访问 main.js 函数

标签 javascript browserify

我可以让 browserify 正常工作,但对如何从 DOM 访问 bundle.js 中的函数有点困惑。

我有三个文件-

message.js

module.exports = function (){
   return "Hello";
};

ma​​in.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/

相关文章:

Javascript - 获取两个日期之间的日期数组

javascript - 将范围传递给指令的奇怪行为

javascript - 如何在同一个 browserify 命令中缩小和分解文件?

javascript - Browserify、minifyify、条件编译

javascript - 如何为已经模块化的库构建独立的外部依赖js文件?

browserify - browserify 如何捆绑一个通用模块

javascript - 使用 JSON 中的属性之一查找子对象

javascript - Jquery - 一次向多个元素添加类?

javascript - 如何在浏览器中使用Dropbox-sdk-js?

javascript - 关闭正在运行 chrome 扩展程序的弹出窗口