1

为我假设的一个基本问题道歉，但是粗略的谷歌搜索 javascript 函数会返回各种关于“this”的内容，以及为什么不全局声明事物和创建对象——所有这些都超出了我的想象。

我正在尝试使用制作交互式地理图表。我在这里有一个工作版本（有点）：

<!--
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>

代码的正确作用（以及我想作为更大项目的一部分进行改进）是，当您单击地图上的一个区域时，它将更改地图的选项并重新绘制它，以进一步放大该区域。

这很棒，但上面是一个庞大的函数，函数内部有一个处理函数。这将变得非常笨拙，因为我必须添加诸如缩小和重置地图以查看整个世界之类的内容，并且还必须根据选择的区域调整更大的数据集（上面的示例将放大一个区域，然后当前不显示任何数据）。

所以我想把我的代码分成更易于管理的块，可以单独调试的块，让我更好地了解哪里出了问题，并且通常使整个项目更易于管理，因为我远非专业程序员（说实话，可能远非新手程序员）。

以下是我想将其分解为的块：

  1. 定义数据（每次更改选项）
  2. 定义选项（每次更改选项时）
  3. 绘制地图（每次执行函数 5-7）
  4. 添加监听器（一次）
  5. 放大地图的功能（点击时）
  6. 缩小地图的功能（点击时）
  7. 重置地图的功能（点击时）
  8. 操作数据的函数（每次执行函数 5-7）

我遇到问题的地方是非常基本的东西。我可以全局声明所有变量（不使用前缀var），但我认为这通常不鼓励，并且可能会长期伤害我（特别是如果我有一个用 10,000 个元素可变声明的巨大数据表）。如果这是错误的，请纠正我——从我有限的理解中使用全局变量是一件坏事，但也许 javascript 是特殊的？

让我们专注于其中一个功能，然后如果我了解该功能如何工作和交互，那么我可能会弄清楚其他功能。

要绘制图表，我需要有两条信息：

  1. 使用什么数据
  2. 使用哪些选项

现在，如果我将数据和选项都声明为全局变量，我可以很高兴地从其他函数中操作它们（非常感谢），但它们是全局的。我不知道如何将这些东西传递给函数，并根据需要返回调整后的数据。

例如，我可以轻松地创建一个工作地图，如下所示：

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';
}

现在这段代码的问题是我必须将“选项”变量中的所有这些变量设置为全局变量，而且我不太确定更新函数resolution内部的变量resetMap()实际上会影响选项内部的值（我需要之后创建另一个函数来更新options变量？）。而且一切似乎都是全局的，我不确定如何来回传递变量并确保它们一起工作以完成工作。

我知道这是一篇非常长的帖子，其中可能包含一个非常简单的概念，可以为我解决它，但我就是无法理解它。如果有人有任何一般性的指针，或者为真正的初学者编写的 javascript 函数如何工作的描述（函数如何工作，如何定义，如何从它们返回值等），我将非常感激。

4

2 回答 2

2

您担心拥有全局变量（这很好！）而不知道确切原因（这很糟糕！）。它们的主要问题是，如今在网页中组合来自各种来源的脚本非常普遍。如果它们都使用全局变量，那么由于命名冲突而干扰（和破坏）另一个变量的可能性很高。所以最好的做法是避免使用全局变量。

为此，您首先必须了解范围在 JavaScript 中是如何工作的。每个函数都会创建一个新的作用域，因此var在函数内部声明的 a 只在那里可见。它在嵌套函数中也是可见的（通过闭包）。如果您想避免使用全局变量，理解这两个概念是必不可少的。

还有一个简单的语言特性可以帮助您：“立即调用函数表达式”（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);
    });
}());

这允许您拥有与您已经拥有的非常相似的代码，但不会泄漏任何全局变量。

使用面向对象的 js也可以帮助您构建代码，但这是一个广泛的话题，除非您询问您遇到的更具体的问题，否则我无法在此详细介绍。

于 2013-02-19T14:43:45.030 回答
-1

您可能会发现 jQuery Learning 上的代码组织页面很有趣。即使您不使用 jQuery，大多数概念仍然适用。

于 2013-02-19T05:38:24.720 回答