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

问题描述

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

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

null

与：

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,"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",report: {
        dataSource: {
            data: getJSONData()
        },slice: {
            rows: [{
                uniqueName: "continent"
            }],columns: [{
                uniqueName: "Measures"
            }],measures: [{
                uniqueName: "country",aggregation: "count"
            }],"filter": {
                    "members": [
                        "continent.Asia"
                    ]
                }
            }]
        }
    }
});

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

var piVoteurope = new WebDaTarocks({
    container: "wdr-component-2","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,continentFilter) {
 var pivotName = new WebDaTarocks({
  container: component_id,report: {
   dataSource: { data: getJSONData() },slice: {
   rows: [{ uniqueName: "continent" }],reportFilters: [{ uniqueName: "continent","filter": { "members": [ "continent." + continentFilter ] }  
   }]
   }
  }
 });
}

pivot ('pivotAsia','Asia'); */

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

解决方法

您将需要return来自函数的值。如果仅将其分配给局部变量，即var pivotName（并且从不返回或将其分配给全局变量），则在函数退出后立即将其删除。

如果您return来自函数的值（这是我推荐的值），则需要将其分配给调用函数的变量，如下所示：

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'),'Europe');

,

我会尝试使用面向对象的方法

class Pivot {
    constructor(container,continentFilter) {
        this.pivot = new WebDataRocks({
            container,report: {
                dataSource: { data: getJSONData() },reportFilters: [{ uniqueName: "continent","filter": { "members": [ "continent." + continentFilter ] }  
                }]
                }
            }
        });
    } 

    refresh(evt){
        this.pivot.refresh();
    }
}

var pivotAsia = new Pivot ($('#wdr-component-1'),'Asia')
var pivotEurope = new Pivot ($('#wdr-component-1'),'Europe')

$('#tab2').on( 'shown.bs.tab',pivotAsia.refresh.bind(pivotAsia));
$('#tab2').on( 'shown.bs.tab',pivotEurope.refresh.bind(pivotEurope));