Javascript Browserify，如何访问main.js函数_Javascript_Browserify

Javascript Browserify，如何访问main.js函数

javascript

Javascript Browserify，如何访问main.js函数,javascript,browserify,Javascript,Browserify,我可以使用browserify，但是对于如何从DOM访问bundle.js中的函数，我有点困惑我有三份档案- message.js module.exports = function (){ return "Hello"; }; var getMessage = require('./message'); //This shows the alert when script loads alert(getMessage()); //cannot find this function

我可以使用browserify，但是对于如何从DOM访问bundle.js中的函数，我有点困惑

我有三份档案-

message.js

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

var getMessage = require('./message');

//This shows the alert when script loads
alert(getMessage());

//cannot find this function from index.html
function fnClick(){
    alert(getMessage());
}

main.js

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

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>


点击

在浏览器中，当脚本加载

警报（getMessage（））时显示了警报，但调试器fnClick未定义，我可以处理范围
谢谢
条目文件中的任何代码都将在闭包中执行。如果您查看创建的bundle.js，您将在其中看到类似的内容
function(require, module, exports) {
    function fnClick() {
        alert(getMessage());
    }
}

除非明确使用窗口对象（但不要这样做），否则在此处创建的任何内容都将隐藏到全局空间中

正如@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)

也许你想考虑一下DMOWED软件包？请参阅，以获取一个很好的示例
如果您使用domready，您的示例将如下所示：
message.js（保持不变）
main.js（注意更改）
index.html（保持不变）

点击
1）将dom事件侦听器安装为：

2） 在main.js中添加如下内容：
var domEventListener = require('dom-event-listener');
var element = document.getElementById('my-button');
domEventListener.add(element, 'click', function(event) {
    console.log(event);
});

不要编写内联JavaScript。在外部文件中需要模块，然后浏览整个内容，只包括bundle.js
文件。我理解您的意思，但在上面的示例中，这意味着我必须以编程方式将事件处理程序添加到按钮上。你的建议是唯一的方法吗？是的，查询按钮并添加和事件侦听器。任何对此投了反对票的人都应该为没有给出理由而感到羞愧。这不应该是反对票，它解释的细节比@idbehold的评论更相关谢谢。旁注：为了让它正常工作，我必须在使用document.getElementById
时删除“我的按钮”id前面的哈希符号（#）document.getElementById（'theButton'）
返回null
而document.getElementById（'theButton'）
返回单击
.啊，我错过了。谢谢，答案中已经修正了。你真的试过这个吗？在我看来，这个问题与等待加载DOM无关。Browserify将在全局名称空间中隐藏fnClick，无论您何时实际定义它。我尝试了这种方法来重构现有的JS函数以Browserify:-）是否有理由在建议将事件侦听器添加到main.JS文件的（当前）顶部答案之上使用此选项？
var domEventListener = require('dom-event-listener');
var element = document.getElementById('my-button');
domEventListener.add(element, 'click', function(event) {
    console.log(event);
});