Question

我可以使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未定义，我可以使用范围。

由于

Answer 1

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

function(require, module, exports) {
    function fnClick() {
        alert(getMessage());
    }
}

您在此处创建的任何内容都将仅隐藏到全局空间，除非您明确使用window对象（但不要那样做）来公开它。

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

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

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

$('#my-button').click(fnClick)

Answer 2

也许，你想考虑domready包吗？请参阅browserify and document ready?以获取一个很好的例子。

如果你是domready，那么你的例子将会是这样的：

message.js （保持不变）

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

main.js （请注意更改）

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

domready(function () {

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

   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>

Answer 3

1）安装dom-event-listener： https://www.npmjs.com/package/dom-event-listener

2）在main.js中添加如下内容：

var domEventListener = require('dom-event-listener');
var element = document.getElementById('my-button');
domEventListener.add(element, 'click', function(event) {
    console.log(event);
});

Browserify，如何访问main.js函数

3 个答案: