Browserify，如何訪問 main.js 函數

Question

我可以讓 browserify 工作，但對如何從 DOM 訪問 bundle.js 中的函數有點困惑。

我有三個文件-

消息.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());
}

索引.html

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

在瀏覽器中加載腳本時alert(getMessage()); 在 main.js 中顯示警報但調試器，fnClick 未定義，我可以工作范圍。

謝謝

Answer 1

入口文件中的任何代碼都在閉包中執行。 如果您查看創建的 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)

Answer 2

也許，您想考慮使用 domready 包？ 看到browserify 和文檔准備好了嗎？ 一個很好的例子。

如果你使用 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 個解決方案

解決方案1
24 已采納 2014-08-27 08:03:27

解決方案2
2 2014-09-07 04:51:09

解決方案3
1 2016-10-14 01:37:48

Browserify，如何訪問 main.js 函數

問題描述

3 個解決方案

解決方案1 24 已采納 2014-08-27 08:03:27

解決方案2 2 2014-09-07 04:51:09

解決方案3 1 2016-10-14 01:37:48

解決方案1
24 已采納 2014-08-27 08:03:27

解決方案2
2 2014-09-07 04:51:09

解決方案3
1 2016-10-14 01:37:48