Ich kann browserify zum Laufen bringen, bin aber etwas verwirrt darüber, wie ich über das DOM auf die Funktionen in bundle.js zugreifen kann.
Ich habe drei Dateien-
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>
Im Browser, wenn das Skript alert(getMessage());in main.js geladen wird, wird die Warnung angezeigt, aber der Debugger. FnClick ist undefiniert und ich kann den Bereich bearbeiten.
Vielen Dank
Jeder Code in der Eingabedatei wird im Abschluss ausgeführt. Wenn Sie sich die erstellte Datei bundle.js ansehen, sehen Sie dort so etwas.
function(require, module, exports) {
function fnClick() {
alert(getMessage());
}
}
Alles, was Sie hier erstellen, wird nur im globalen Raum versteckt, es sei denn, Sie verwenden explizit ein windowObjekt ( tun dies aber nicht ), um es verfügbar zu machen.
Wie @elclanrs in den obigen Kommentaren sagte, hängen Sie einfach den Ereignis-Listener in Ihren main.js-Code anstelle von HTML an. Wenn Sie keine externen Bibliotheken verwenden möchten, können Sie dies auf harte Weise tun.
var button = document.getElementById('my-button'); // add id="my-button" into html
button.addEventListener('click', fnClick);
Oder mit einer Bibliothek wie der beliebten jQuery würden Sie einfach anrufen.
$('#my-button').click(fnClick)
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen