对于我所假设的道歉是一个基本问题，但粗略的谷歌搜索javascript函数会返回各种关于'this'的内容，以及为什么不在全局声明事物，以及创建对象 - 所有这些都已经结束了我的脑袋。
我正在尝试使用google-visualization制作互动地理标志。我有一个工作版本（有点）：
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geochart']});
var width, height, selectedRegion, resolution;
window.onload = function(){
width = 556;
height = 400;
selectedRegion = 'world';
resolution = 'subcontinents';
};
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Region');
data.addColumn('number', 'Value');
data.addRows([
[{v:"005", f:"South America"}, 978.7],
[{v:"011", f:"Western Africa"}, 46],
[{v:"013", f:"Central America"}, 299],
[{v:"014", f:"Eastern Africa"}, 63.9],
[{v:"015", f:"Northern Africa"}, 255.7],
[{v:"017", f:"Middle Africa"}, 21.4],
[{v:"018", f:"Southern Africa"}, 244.5],
[{v:"029", f:"Caribbean"}, 76.5],
[{v:"030", f:"Eastern Asia"}, 5712.9],
[{v:"034", f:"Southern Asia"}, 1275.1],
[{v:"035", f:"South-Eastern Asia"}, 639.2],
[{v:"039", f:"Southern Europe"}, 777.8],
[{v:"053", f:"Australia and New Zealand"}, 272],
[{v:"054", f:"Melanesia"}, 6.3],
[{v:"057", f:"Micronesia"}, 1.8],
[{v:"061", f:"Polynesia"}, 1],
[{v:"143", f:"Central Asia"}, 170.3],
[{v:"145", f:"Western Asia"}, 834.1],
[{v:"151", f:"Eastern Europe"}, 1587.6],
[{v:"154", f:"Northern Europe"}, 801.5],
[{v:"155", f:"Western Europe"}, 1456.2],
[{v:"021", f:"Northern America"}, 4704.1]
]);
var options = {
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: resolution,
region: selectedRegion,
height: height,
width: width
};
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
google.visualization.events.addListener(geochart, 'select', function() {
var selection = geochart.getSelection();
if (selection.length == 1) {
var selectedRow = selection[0].row;
selectedRegion = data.getValue(selectedRow, 0);
resolution = "countries";
options.region = selectedRegion;
options.resolution = resolution;
//alert(resolution);
geochart.draw(data, options);
}
});
geochart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization"></div>
</body>
</html>
代码正确执行的操作（以及我想要在更大的项目中进行优化的内容）是，当您单击地图上的某个区域时，它将更改地图的选项并重新绘制，以进一步放大该地区。
这很精彩，但上面是一个庞大的函数，在函数内部有一个处理函数。这将变得非常笨重，因为我必须添加缩小，重置地图以查看整个世界，还必须根据选择的区域调整更大的数据集（上面的示例将放大一个区域，然后当前没有数据显示。）
所以我想把我的代码分解成更易于管理的块，可以单独调试的块，让我更好地了解哪里出了问题，并且通常使我的整个项目更容易管理，因为我远离专家程序员（说实话，可能远非新手程序员）。
以下是我要打破它的块：
我遇到问题的地方是最基本的东西。我可以全局声明我的所有变量（不用var作为前缀）但我认为这通常是不鼓励的，并且可能会让我长期受伤（特别是如果我有一个巨大的数据表，声明有10,000个元素可变） 。 如果这是错的，请纠正我 - 从我有限的理解中使用全局变量是一件坏事，但是javascript可能很特别吗？
让我们专注于其中一个函数，然后如果我理解了这个函数是如何工作和交互的，那么我可能会弄清楚其他函数。
要绘制图表，我需要提供两条信息：
现在，如果我将数据和选项都声明为全局变量，我可以高兴地从其他函数中操作它们（非常感谢），但它们是全局的。我无法弄清楚如何将内容传递给函数，并根据需要返回调整后的数据。
例如，我可以轻松创建一个工作地图，如下所示：
function drawVisualization() {
var rawData = new google.visualization.DataTable();
rawData.addColumn('string','Continent');
rawData.addColumn('string','Subontinent');
rawData.addColumn('string','Country');
rawData.addColumn('number','Data');
rawData.addRows([
[{v:"142",f:"Asia"},{v:"145",f:"Western Asia"},{v:"AE",f:"United Arab Emirates"},91.9],
// more data in between
[{v:"002",f:"Africa"},{v:"014",f:"Eastern Africa"},{v:"ZW",f:"Zimbabwe"},7.8],
]);
resetMap();
var data = new google.visualization.DataView(rawData);
data.setColumns([resolutionIndex, 3]);
var options = {
displayMode: displayMode,
enableRegionInteractivity: 'true',
resolution: resolution,
region: region,
height: height,
width: width
};
drawMap(data, options);
}
function drawMap(data, options) {
var geochart = new google.visualization.GeoChart(document.getElementById('visualization'));
geochart.draw(data, options);
}
function resetMap() {
resolutionArray = ['continents', 'subcontinents', 'countries'];
resolutionIndex = 0;
previousIndex = 0;
previousRegion = 'world';
displayMode = 'regions';
resolution = resolutionArray[resolutionIndex];
region = 'world';
height = '600';
width = '800';
}
现在这个代码的问题是我必须将“options”变量中的所有这些变量设置为全局变量，我不太确定在{{1}中更新像resolution这样的变量函数实际上会影响选项内的值（我是否需要创建另一个函数来更新resetMap()变量？）。一切似乎都是全局的，我不知道如何来回传递变量，并确保它们共同完成工作。
我知道这是一个非常长的帖子，可能是一个非常简单的概念，可以解决它，但我无法绕过它。如果有人有任何一般指针，或描述函数如何在为真正的初学者编写的javascript中工作（函数如何工作，如何定义它们，如何从它们返回值等），我将非常感激。
答案 0 :(得分：2)
你担心有全局变量（这很好！）而不知道为什么（那很糟糕！）。它们的主要问题是，现在在网页中组合来自各种来源的脚本是很常见的。如果它们都使用全局变量，那么由于命名冲突而干扰（和破坏）另一个变量的可能性很高。所以最好的做法是避免使用全局变量。
要做到这一点，首先要了解的是how scope works in JavaScript。每个函数都创建一个新的范围，因此在函数内声明的var只能在那里可见。它在嵌套函数中也是可见的（通过closure）。如果你想避免全局变量，理解这两个概念是必不可少的。
还有一个简单的语言功能可以帮助您：“立即调用的函数表达式”（IIFE）可用于在自己的范围内包装代码块。可以使用该范围代替全局范围来与内部函数共享变量，这些函数可以通过闭包来访问它们：
(function(){
// declare common variables here
var a = 1, b = 2, c = 3;
// any function declare here can access a, b, c
function foo() {
console.log(a);
}
// works with anynymous function expressions too
document.addEventListener('click', function(e) {
alert(b);
});
}());
这使得代码与您已有的代码非常相似，但不会泄漏任何全局变量。
使用object-oriented js也可以帮助您构建代码，但这是一个广泛的主题，除非您询问有关它的更具体问题，否则我无法在此处了解任何详细信息。
答案 1 :(得分：-1)
您可能会发现有关jQuery Learning的Code Organization页面很有趣。即使您不使用jQuery，大多数概念仍然适用。