Js 函数不适用于 node 和 browserify
Js functions do not work with node and browserify
我是 Node 和 browserify 的初学者,我遇到了一个问题,如果我使用 browserify,它无法使用来自 html 的功能,来自错误的输入或按钮
pickCSV 未定义
因为它是 html 中的一个 onchange 但调用时它不起作用,如果我不使用 browserify 它工作正常,但我需要 browserify 因为我将使用节点通信 mysql 对于银行的 select,我接受对此应用程序的建议和对 运行 客户端节点
的提示
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-
scalable=no" />
<title>SIM TELEGESTÃO</title>
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
<script src="node_modules/leaflet/dist/leaflet-src.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="map"></div>
<input type="file" id="inputCSV" onchange="pegarCSV(this)">
<script src="bundle.js"></script>
</body>
</html>
JS
// require modules
var L = require('leaflet');
var $ = require('jquery');
var mysql = require('mysql');
var tcsv = [];
var nMuc;
var arMuc= [];
var bounds = [];
var arMu = [];
var leitorDeCSV = new FileReader();
var tcsv1 = [];
var achMuc;
var lcz2;
var selMuc = [];
// Create the map
var map = L.map('map').setView([-90.59431,-70.82561], 18);
// Indicate leaflet the specific location of the images folder that it needs to render the page
L.Icon.Default.imagePath = 'node_modules/leaflet/dist/images/';
// Use OpenStreetMap tiles and attribution
var osmTiles = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var attribution = '© OpenStreetMap contributors';
// Create the basemap and add it to the map
L.tileLayer(osmTiles, {
maxZoom: 18,
attribution: attribution
}).addTo(map);
function pegarCSV (inputFile){
var file = inputFile.files[0];
leitorDeCSV.readAsText(file);
leitorDeCSV.onload = leCSV;
}
为了 require
工作,browserify 将您的整个代码包装到一个函数中,从那时起,您在文件中定义的所有函数将不会在全局范围内可用。这和其他事情是您不应该使用内联事件处理程序(属性)来注册事件的原因,这些事件只适用于在全局范围内可见的函数。
你要做的是把<input type="file" id="inputCSV" onchange="pegarCSV(this)">
改成<input type="file" id="inputCSV">
并将以下内容添加到文件末尾:
document.getElementById('inputCSV').addEventListener('change',
function(event) {
pegarCSV(event.currentTarget);
}, false)
我是 Node 和 browserify 的初学者,我遇到了一个问题,如果我使用 browserify,它无法使用来自 html 的功能,来自错误的输入或按钮 pickCSV 未定义
因为它是 html 中的一个 onchange 但调用时它不起作用,如果我不使用 browserify 它工作正常,但我需要 browserify 因为我将使用节点通信 mysql 对于银行的 select,我接受对此应用程序的建议和对 运行 客户端节点
的提示html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-
scalable=no" />
<title>SIM TELEGESTÃO</title>
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
<script src="node_modules/leaflet/dist/leaflet-src.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="map"></div>
<input type="file" id="inputCSV" onchange="pegarCSV(this)">
<script src="bundle.js"></script>
</body>
</html>
JS
// require modules
var L = require('leaflet');
var $ = require('jquery');
var mysql = require('mysql');
var tcsv = [];
var nMuc;
var arMuc= [];
var bounds = [];
var arMu = [];
var leitorDeCSV = new FileReader();
var tcsv1 = [];
var achMuc;
var lcz2;
var selMuc = [];
// Create the map
var map = L.map('map').setView([-90.59431,-70.82561], 18);
// Indicate leaflet the specific location of the images folder that it needs to render the page
L.Icon.Default.imagePath = 'node_modules/leaflet/dist/images/';
// Use OpenStreetMap tiles and attribution
var osmTiles = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var attribution = '© OpenStreetMap contributors';
// Create the basemap and add it to the map
L.tileLayer(osmTiles, {
maxZoom: 18,
attribution: attribution
}).addTo(map);
function pegarCSV (inputFile){
var file = inputFile.files[0];
leitorDeCSV.readAsText(file);
leitorDeCSV.onload = leCSV;
}
为了 require
工作,browserify 将您的整个代码包装到一个函数中,从那时起,您在文件中定义的所有函数将不会在全局范围内可用。这和其他事情是您不应该使用内联事件处理程序(属性)来注册事件的原因,这些事件只适用于在全局范围内可见的函数。
你要做的是把<input type="file" id="inputCSV" onchange="pegarCSV(this)">
改成<input type="file" id="inputCSV">
并将以下内容添加到文件末尾:
document.getElementById('inputCSV').addEventListener('change',
function(event) {
pegarCSV(event.currentTarget);
}, false)