javascript - 如何用 jQuery 中的函数替换重复的代码块

Question

我的页面上有多个选项卡，在每个选项卡上我使用 WebDataRocks 声明一个数据透视表插件并向其添加事件。代码是重复的，因为唯一的区别是数据透视表中的过滤器。

我想创建一个带有参数的函数并在每个选项卡上调用它。我替换了当前代码:

var pivotAsia = new WebDataRocks({
    container: "wdr-component-1",
    toolbar: true,
    report: {
        dataSource: { data: getJSONData() },
        slice: {
            rows: [{ uniqueName: "continent" }],
            columns: [{ uniqueName: "Measures" }],
            measures: [{ uniqueName: "country", aggregation: "count" }],
            reportFilters: [{
                uniqueName: "continent",
                "filter": { "members": [ "continent.Asia" ] }  }]
        }
    }
});

$('#tab1').on( 'shown.bs.tab', function (e) { pivotAsia.refresh(); });

与:

function pivot (pivotName, component_id, continentFilter) {
var pivotName = new WebDataRocks({
    container: component_id,
    toolbar: true,
    report: {
        dataSource: { data: getJSONData() },
        slice: {
            rows: [{ uniqueName: "continent" }],
            columns: [{ uniqueName: "Measures" }],
            measures: [{ uniqueName: "country", aggregation: "count" }],
            reportFilters: [{
                uniqueName: "continent",
                "filter": { "members": [ "continent." + continentFilter ] }  }]
        }
    }
});
}

然后我为亚洲和欧洲调用函数两次

pivot ('pivotAsia', $('#wdr-component-1'), 'Asia');
pivot ('pivotEurope', $('#wdr-component-2'), 'Europe');

当我调用我的函数时，我仍然得到 Uncaught ReferenceError: Asia or Europe is not defined。

请给我任何建议我做错了什么？非常感谢。

var pivotAsia = new WebDataRocks({
    container: "wdr-component-1",
    toolbar: true,
    report: {
        dataSource: {
            data: getJSONData()
        },
        slice: {
            rows: [{
                uniqueName: "continent"
            }],
            columns: [{
                uniqueName: "Measures"
            }],
            measures: [{
                uniqueName: "country",
                aggregation: "count"
            }],
            reportFilters: [{
                uniqueName: "continent",
                "filter": {
                    "members": [
                        "continent.Asia"
                    ]
                }
            }]
        }
    }
});

$('#tab1').on( 'shown.bs.tab', function (e) { 
pivotAsia.refresh();
});

var pivotEurope = new WebDataRocks({
    container: "wdr-component-2",
    toolbar: true,
    report: {
        dataSource: {
            data: getJSONData()
        },
        slice: {
            rows: [{
                uniqueName: "continent"
            }],
            columns: [{
                uniqueName: "Measures"
            }],
            measures: [{
                uniqueName: "country",
                aggregation: "count"
            }],
            reportFilters: [{
                uniqueName: "continent",
                "filter": {
                    "members": [
                        "continent.Europe"
                    ]
                }
            }]
        }
    }
});

$('#tab2').on( 'shown.bs.tab', function (e) { 
pivotEurope.refresh();
});

/* here I want to replace the repetitive code with a function
function pivot (pivotName, component_id, continentFilter) {
 var pivotName = new WebDataRocks({
  container: component_id,
  toolbar: true,
  report: {
   dataSource: { data: getJSONData() },
   slice: {
   rows: [{ uniqueName: "continent" }],
   columns: [{ uniqueName: "Measures" }],
   measures: [{ uniqueName: "country", 
    aggregation: "count" }],
   reportFilters: [{ uniqueName: "continent",
    "filter": { "members": [ "continent." + continentFilter ] }  
   }]
   }
  }
 });
}

pivot ('pivotAsia', $('#wdr-component-1'), 'Asia'); */

function getJSONData() {
    return [
    {
        "country": "Afghanistan",
        "continent": "Asia"
    },
    {
        "country": "Albania",
        "continent": "Europe"
    },
    {
        "country": "Algeria",
        "continent": "Africa"
    },
    {
        "country": "American Samoa",
        "continent": "Oceania"
    },
    {
        "country": "Andorra",
        "continent": "Europe"
    },
    {
        "country": "Angola",
        "continent": "Africa"
    },
    {
        "country": "Anguilla",
        "continent": "North America"
    },
    {
        "country": "Antarctica",
        "continent": "Antarctica"
    },
    {
        "country": "Antigua and Barbuda",
        "continent": "North America"
    },
    {
        "country": "Argentina",
        "continent": "South America"
    },
    {
        "country": "Armenia",
        "continent": "Asia"
    },
    {
        "country": "Aruba",
        "continent": "North America"
    },
    {
        "country": "Australia",
        "continent": "Oceania"
    },
    {
        "country": "Austria",
        "continent": "Europe"
    },
    {
        "country": "Azerbaijan",
        "continent": "Asia"
    },
    {
        "country": "Bahamas",
        "continent": "North America"
    },
    {
        "country": "Bahrain",
        "continent": "Asia"
    },
    {
        "country": "Bangladesh",
        "continent": "Asia"
    },
    {
        "country": "Barbados",
        "continent": "North America"
    },
    {
        "country": "Belarus",
        "continent": "Europe"
    },
    {
        "country": "Belgium",
        "continent": "Europe"
    },
    {
        "country": "Belize",
        "continent": "North America"
    },
    {
        "country": "Benin",
        "continent": "Africa"
    },
    {
        "country": "Bermuda",
        "continent": "North America"
    },
    {
        "country": "Bhutan",
        "continent": "Asia"
    },
    {
        "country": "Bolivia",
        "continent": "South America"
    },
    {
        "country": "Bosnia and Herzegovina",
        "continent": "Europe"
    },
    {
        "country": "Botswana",
        "continent": "Africa"
    },
    {
        "country": "Bouvet Island",
        "continent": "Antarctica"
    },
    {
        "country": "Brazil",
        "continent": "South America"
    },
    {
        "country": "British Indian Ocean Territory",
        "continent": "Africa"
    },
    {
        "country": "Brunei",
        "continent": "Asia"
    },
    {
        "country": "Bulgaria",
        "continent": "Europe"
    },
    {
        "country": "Burkina Faso",
        "continent": "Africa"
    },
    {
        "country": "Burundi",
        "continent": "Africa"
    },
    {
        "country": "Cambodia",
        "continent": "Asia"
    },
    {
        "country": "Cameroon",
        "continent": "Africa"
    },
    {
        "country": "Canada",
        "continent": "North America"
    },
    {
        "country": "Cape Verde",
        "continent": "Africa"
    },
    {
        "country": "Cayman Islands",
        "continent": "North America"
    },
    {
        "country": "Central African Republic",
        "continent": "Africa"
    },
    {
        "country": "Chad",
        "continent": "Africa"
    },
    {
        "country": "Chile",
        "continent": "South America"
    },
    {
        "country": "China",
        "continent": "Asia"
    },
    {
        "country": "Christmas Island",
        "continent": "Oceania"
    },
    {
        "country": "Cocos (Keeling) Islands",
        "continent": "Oceania"
    },
    {
        "country": "Colombia",
        "continent": "South America"
    },
    {
        "country": "Comoros",
        "continent": "Africa"
    },
    {
        "country": "Congo",
        "continent": "Africa"
    },
    {
        "country": "Cook Islands",
        "continent": "Oceania"
    },
    {
        "country": "Costa Rica",
        "continent": "North America"
    },
    {
        "country": "Croatia",
        "continent": "Europe"
    },
    {
        "country": "Cuba",
        "continent": "North America"
    },
    {
        "country": "Cyprus",
        "continent": "Asia"
    },
    {
        "country": "Czech Republic",
        "continent": "Europe"
    },
    {
        "country": "Denmark",
        "continent": "Europe"
    },
    {
        "country": "Djibouti",
        "continent": "Africa"
    },
    {
        "country": "Dominica",
        "continent": "North America"
    },
    {
        "country": "Dominican Republic",
        "continent": "North America"
    },
    {
        "country": "East Timor",
        "continent": "Asia"
    },
    {
        "country": "Ecuador",
        "continent": "South America"
    },
    {
        "country": "Egypt",
        "continent": "Africa"
    },
    {
        "country": "El Salvador",
        "continent": "North America"
    },
    {
        "country": "England",
        "continent": "Europe"
    },
    {
        "country": "Equatorial Guinea",
        "continent": "Africa"
    },
    {
        "country": "Eritrea",
        "continent": "Africa"
    },
    {
        "country": "Estonia",
        "continent": "Europe"
    },
    {
        "country": "Ethiopia",
        "continent": "Africa"
    },
    {
        "country": "Falkland Islands",
        "continent": "South America"
    },
    {
        "country": "Faroe Islands",
        "continent": "Europe"
    },
    {
        "country": "Fiji Islands",
        "continent": "Oceania"
    },
    {
        "country": "Finland",
        "continent": "Europe"
    },
    {
        "country": "France",
        "continent": "Europe"
    },
    {
        "country": "French Guiana",
        "continent": "South America"
    },
    {
        "country": "French Polynesia",
        "continent": "Oceania"
    },
    {
        "country": "French Southern territories",
        "continent": "Antarctica"
    },
    {
        "country": "Gabon",
        "continent": "Africa"
    },
    {
        "country": "Gambia",
        "continent": "Africa"
    },
    {
        "country": "Georgia",
        "continent": "Asia"
    },
    {
        "country": "Germany",
        "continent": "Europe"
    },
    {
        "country": "Ghana",
        "continent": "Africa"
    },
    {
        "country": "Gibraltar",
        "continent": "Europe"
    },
    {
        "country": "Greece",
        "continent": "Europe"
    },
    {
        "country": "Greenland",
        "continent": "North America"
    },
    {
        "country": "Grenada",
        "continent": "North America"
    },
    {
        "country": "Guadeloupe",
        "continent": "North America"
    },
    {
        "country": "Guam",
        "continent": "Oceania"
    },
    {
        "country": "Guatemala",
        "continent": "North America"
    },
    {
        "country": "Guinea",
        "continent": "Africa"
    },
    {
        "country": "Guinea-Bissau",
        "continent": "Africa"
    },
    {
        "country": "Guyana",
        "continent": "South America"
    },
    {
        "country": "Haiti",
        "continent": "North America"
    },
    {
        "country": "Heard Island and McDonald Islands",
        "continent": "Antarctica"
    },
    {
        "country": "Holy See (Vatican City State)",
        "continent": "Europe"
    },
    {
        "country": "Honduras",
        "continent": "North America"
    },
    {
        "country": "Hong Kong",
        "continent": "Asia"
    },
    {
        "country": "Hungary",
        "continent": "Europe"
    },
    {
        "country": "Iceland",
        "continent": "Europe"
    },
    {
        "country": "India",
        "continent": "Asia"
    },
    {
        "country": "Indonesia",
        "continent": "Asia"
    },
    {
        "country": "Iran",
        "continent": "Asia"
    },
    {
        "country": "Iraq",
        "continent": "Asia"
    },
    {
        "country": "Ireland",
        "continent": "Europe"
    },
    {
        "country": "Israel",
        "continent": "Asia"
    },
    {
        "country": "Italy",
        "continent": "Europe"
    },
    {
        "country": "Ivory Coast",
        "continent": "Africa"
    },
    {
        "country": "Jamaica",
        "continent": "North America"
    },
    {
        "country": "Japan",
        "continent": "Asia"
    },
    {
        "country": "Jordan",
        "continent": "Asia"
    },
    {
        "country": "Kazakhstan",
        "continent": "Asia"
    },
    {
        "country": "Kenya",
        "continent": "Africa"
    },
    {
        "country": "Kiribati",
        "continent": "Oceania"
    },
    {
        "country": "Kuwait",
        "continent": "Asia"
    },
    {
        "country": "Kyrgyzstan",
        "continent": "Asia"
    },
    {
        "country": "Laos",
        "continent": "Asia"
    },
    {
        "country": "Latvia",
        "continent": "Europe"
    },
    {
        "country": "Lebanon",
        "continent": "Asia"
    },
    {
        "country": "Lesotho",
        "continent": "Africa"
    },
    {
        "country": "Liberia",
        "continent": "Africa"
    },
    {
        "country": "Libyan Arab Jamahiriya",
        "continent": "Africa"
    },
    {
        "country": "Liechtenstein",
        "continent": "Europe"
    },
    {
        "country": "Lithuania",
        "continent": "Europe"
    },
    {
        "country": "Luxembourg",
        "continent": "Europe"
    },
    {
        "country": "Macao",
        "continent": "Asia"
    },
    {
        "country": "North Macedonia",
        "continent": "Europe"
    },
    {
        "country": "Madagascar",
        "continent": "Africa"
    },
    {
        "country": "Malawi",
        "continent": "Africa"
    },
    {
        "country": "Malaysia",
        "continent": "Asia"
    },
    {
        "country": "Maldives",
        "continent": "Asia"
    },
    {
        "country": "Mali",
        "continent": "Africa"
    },
    {
        "country": "Malta",
        "continent": "Europe"
    },
    {
        "country": "Marshall Islands",
        "continent": "Oceania"
    },
    {
        "country": "Martinique",
        "continent": "North America"
    },
    {
        "country": "Mauritania",
        "continent": "Africa"
    },
    {
        "country": "Mauritius",
        "continent": "Africa"
    },
    {
        "country": "Mayotte",
        "continent": "Africa"
    },
    {
        "country": "Mexico",
        "continent": "North America"
    },
    {
        "country": "Micronesia, Federated States of",
        "continent": "Oceania"
    },
    {
        "country": "Moldova",
        "continent": "Europe"
    },
    {
        "country": "Monaco",
        "continent": "Europe"
    },
    {
        "country": "Mongolia",
        "continent": "Asia"
    },
    {
        "country": "Montenegro",
        "continent": "Europe"
    },
    {
        "country": "Montserrat",
        "continent": "North America"
    },
    {
        "country": "Morocco",
        "continent": "Africa"
    },
    {
        "country": "Mozambique",
        "continent": "Africa"
    },
    {
        "country": "Myanmar",
        "continent": "Asia"
    },
    {
        "country": "Namibia",
        "continent": "Africa"
    },
    {
        "country": "Nauru",
        "continent": "Oceania"
    },
    {
        "country": "Nepal",
        "continent": "Asia"
    },
    {
        "country": "Netherlands",
        "continent": "Europe"
    },
    {
        "country": "Netherlands Antilles",
        "continent": "North America"
    },
    {
        "country": "New Caledonia",
        "continent": "Oceania"
    },
    {
        "country": "New Zealand",
        "continent": "Oceania"
    },
    {
        "country": "Nicaragua",
        "continent": "North America"
    },
    {
        "country": "Niger",
        "continent": "Africa"
    },
    {
        "country": "Nigeria",
        "continent": "Africa"
    },
    {
        "country": "Niue",
        "continent": "Oceania"
    },
    {
        "country": "Norfolk Island",
        "continent": "Oceania"
    },
    {
        "country": "North Korea",
        "continent": "Asia"
    },
    {
        "country": "Northern Ireland",
        "continent": "Europe"
    },
    {
        "country": "Northern Mariana Islands",
        "continent": "Oceania"
    },
    {
        "country": "Norway",
        "continent": "Europe"
    },
    {
        "country": "Oman",
        "continent": "Asia"
    },
    {
        "country": "Pakistan",
        "continent": "Asia"
    },
    {
        "country": "Palau",
        "continent": "Oceania"
    },
    {
        "country": "Palestine",
        "continent": "Asia"
    },
    {
        "country": "Panama",
        "continent": "North America"
    },
    {
        "country": "Papua New Guinea",
        "continent": "Oceania"
    },
    {
        "country": "Paraguay",
        "continent": "South America"
    },
    {
        "country": "Peru",
        "continent": "South America"
    },
    {
        "country": "Philippines",
        "continent": "Asia"
    },
    {
        "country": "Pitcairn",
        "continent": "Oceania"
    },
    {
        "country": "Poland",
        "continent": "Europe"
    },
    {
        "country": "Portugal",
        "continent": "Europe"
    },
    {
        "country": "Puerto Rico",
        "continent": "North America"
    },
    {
        "country": "Qatar",
        "continent": "Asia"
    },
    {
        "country": "Reunion",
        "continent": "Africa"
    },
    {
        "country": "Romania",
        "continent": "Europe"
    },
    {
        "country": "Russian Federation",
        "continent": "Europe"
    },
    {
        "country": "Rwanda",
        "continent": "Africa"
    },
    {
        "country": "Saint Helena",
        "continent": "Africa"
    },
    {
        "country": "Saint Kitts and Nevis",
        "continent": "North America"
    },
    {
        "country": "Saint Lucia",
        "continent": "North America"
    },
    {
        "country": "Saint Pierre and Miquelon",
        "continent": "North America"
    },
    {
        "country": "Saint Vincent and the Grenadines",
        "continent": "North America"
    },
    {
        "country": "Samoa",
        "continent": "Oceania"
    },
    {
        "country": "San Marino",
        "continent": "Europe"
    },
    {
        "country": "Sao Tome and Principe",
        "continent": "Africa"
    },
    {
        "country": "Saudi Arabia",
        "continent": "Asia"
    },
    {
        "country": "Scotland",
        "continent": "Europe"
    },
    {
        "country": "Senegal",
        "continent": "Africa"
    },
    {
        "country": "Seychelles",
        "continent": "Africa"
    },
    {
        "country": "Sierra Leone",
        "continent": "Africa"
    },
    {
        "country": "Singapore",
        "continent": "Asia"
    },
    {
        "country": "Slovakia",
        "continent": "Europe"
    },
    {
        "country": "Slovenia",
        "continent": "Europe"
    },
    {
        "country": "Solomon Islands",
        "continent": "Oceania"
    },
    {
        "country": "Somalia",
        "continent": "Africa"
    },
    {
        "country": "South Africa",
        "continent": "Africa"
    },
    {
        "country": "South Georgia and the South Sandwich Islands",
        "continent": "Antarctica"
    },
    {
        "country": "South Korea",
        "continent": "Asia"
    },
    {
        "country": "South Sudan",
        "continent": "Africa"
    },
    {
        "country": "Spain",
        "continent": "Europe"
    },
    {
        "country": "Sri Lanka",
        "continent": "Asia"
    },
    {
        "country": "Sudan",
        "continent": "Africa"
    },
    {
        "country": "Suriname",
        "continent": "South America"
    },
    {
        "country": "Svalbard and Jan Mayen",
        "continent": "Europe"
    },
    {
        "country": "Swaziland",
        "continent": "Africa"
    },
    {
        "country": "Sweden",
        "continent": "Europe"
    },
    {
        "country": "Switzerland",
        "continent": "Europe"
    },
    {
        "country": "Syria",
        "continent": "Asia"
    },
    {
        "country": "Tajikistan",
        "continent": "Asia"
    },
    {
        "country": "Tanzania",
        "continent": "Africa"
    },
    {
        "country": "Thailand",
        "continent": "Asia"
    },
    {
        "country": "The Democratic Republic of Congo",
        "continent": "Africa"
    },
    {
        "country": "Togo",
        "continent": "Africa"
    },
    {
        "country": "Tokelau",
        "continent": "Oceania"
    },
    {
        "country": "Tonga",
        "continent": "Oceania"
    },
    {
        "country": "Trinidad and Tobago",
        "continent": "North America"
    },
    {
        "country": "Tunisia",
        "continent": "Africa"
    },
    {
        "country": "Turkey",
        "continent": "Asia"
    },
    {
        "country": "Turkmenistan",
        "continent": "Asia"
    },
    {
        "country": "Turks and Caicos Islands",
        "continent": "North America"
    },
    {
        "country": "Tuvalu",
        "continent": "Oceania"
    },
    {
        "country": "Uganda",
        "continent": "Africa"
    },
    {
        "country": "Ukraine",
        "continent": "Europe"
    },
    {
        "country": "United Arab Emirates",
        "continent": "Asia"
    },
    {
        "country": "United Kingdom",
        "continent": "Europe"
    },
    {
        "country": "United States",
        "continent": "North America"
    },
    {
        "country": "United States Minor Outlying Islands",
        "continent": "Oceania"
    },
    {
        "country": "Uruguay",
        "continent": "South America"
    },
    {
        "country": "Uzbekistan",
        "continent": "Asia"
    },
    {
        "country": "Vanuatu",
        "continent": "Oceania"
    },
    {
        "country": "Venezuela",
        "continent": "South America"
    },
    {
        "country": "Vietnam",
        "continent": "Asia"
    },
    {
        "country": "Virgin Islands, British",
        "continent": "North America"
    },
    {
        "country": "Virgin Islands, U.S.",
        "continent": "North America"
    },
    {
        "country": "Wales",
        "continent": "Europe"
    },
    {
        "country": "Wallis and Futuna",
        "continent": "Oceania"
    },
    {
        "country": "Western Sahara",
        "continent": "Africa"
    },
    {
        "country": "Yemen",
        "continent": "Asia"
    },
    {
        "country": "Yugoslavia",
        "continent": "Europe"
    },
    {
        "country": "Zambia",
        "continent": "Africa"
    },
    {
        "country": "Zimbabwe",
        "continent": "Africa"
    }
];
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

<div class="container">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" id="tab1">
      <a class="nav-link" data-toggle="tab" href="#pivot1">pivot Asia</a>
    </li>
    <li class="nav-item" id="tab2">
      <a class="nav-link" data-toggle="tab" href="#pivot2">pivot Europe</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="pivot1" class="container tab-pane active"><br>
    <div id="wdr-component-1"></div>
    </div>
    <div id="pivot2" class="container tab-pane fade"><br>
    <div id="wdr-component-2"></div>
    </div>
  </div>
</div>

Answer 1

您需要从函数中返回 值。如果您只是将它分配给一个局部变量，即 var pivotName(永远不会返回它或将它分配给一个全局变量)，那么它会在函数退出后立即被删除。

如果您返回函数的值(这是我推荐的)，那么您需要将它分配给调用函数的变量，如下所示:

var pivotAsia = pivot ($('#wdr-component-1'), 'Asia');
var pivotEurope = pivot ($('#wdr-component-2'), 'Europe');

综合起来:

function pivot (component_id, continentFilter) {
    return new WebDataRocks({
        container: component_id,
        toolbar: true,
        report: {
            dataSource: { data: getJSONData() },
            slice: {
                rows: [{ uniqueName: "continent" }],
                columns: [{ uniqueName: "Measures" }],
                measures: [{ uniqueName: "country", aggregation: "count" }],
                reportFilters: [{
                    uniqueName: "continent",
                    "filter": { "members": [ "continent." + continentFilter ] }  }]
            }
        }
    });
}

var pivotAsia = pivot ($('#wdr-component-1'), 'Asia');
var pivotEurope = pivot ($('#wdr-component-2'), 'Europe');