我有一个当前由开关组成的功能，它不具备可扩展性。它是一个排序功能，它可以正常工作，但在尝试简化它时，它无法返回所需的数据。我只是想做到这一点，如果我想添加喜欢的电影或其他类别，那将是更少的工作。有效的功能是：
sortData: function(cats, element, direction){
switch(element) {
case 'breed':
var sortedData = cats.sort(function(a,b){return (a.breed < b.breed) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
break;
case 'country':
var sortedData = cats.sort(function(a,b){return (a.country < b.country) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
break;
case 'coffeePreference':
var sortedData = cats.sort(function(a,b){return (a.coffeePreference < b.coffeePreference) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
default:
MYCATSPACE.SUBCAT.renderData(cats);
}
},
似乎你可以做这样的事情，因为要传递元素。
sortData: function(cats, element, direction){
var sortedData = cats.sort(function(a,b){return (a.element < b.element) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
},
但这并不合适。由于此函数适用于其他几个函数，因此我将发布以下所有代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>For the love of cats and JavaScript</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" class="" name="filter" type="text" value="coffeePreference" onfocus="if (this.value == 'MYCATSPACE.SUBCAT.coffeePreference') {this.value = '';}" onblur="if (this.value == '') " /></br></br>
<input id="filter2" class="" name="filter2" type="text" value="breed" onfocus="if (this.value == 'breed') {this.value = '';}" onblur="if (this.value == '') " /></br></br>
<div id="catTable"></div>
<script>
var MYCATSPACE = MYCATSPACE || {};
var sortCountry;
var sortBreed;
var sortCoffee;
$('input').keyup(function(e) {
var timeout;
clearTimeout(timeout);
timeout = setTimeout(function() {
criteria = this.value;
$.getJSON('cats.json', function(cats){MYCATSPACE.SUBCAT.filterCats(cats, criteria);});
}.bind(this), 185);
});
$("#filter2").keyup(function(e) {
var timeout;
clearTimeout(timeout);
timeout = setTimeout(function() {
criteria = this.value;
$.getJSON('cats.json', function(cats){MYCATSPACE.SUBCAT.filterCats2(cats, criteria);});
}.bind(this), 185);
});
MYCATSPACE.SUBCAT = {
renderData: function(cats){
var output='<table id="indextable" border="1" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">';
output+="<thead>"
output+="<tr>";
output+="<th> HeadShot </th>";
output+="<th><button onclick='MYCATSPACE.SUBCAT.getSortedBreedData()'>Breed</button></th>";
output+="<th><button onclick='MYCATSPACE.SUBCAT.getSortedCountryData()'>Country</button></th>";
output+="<th><button onclick='MYCATSPACE.SUBCAT.getSortedCoffeeData()'>CoffeePreference</button></th>";
output+="</tr>";
output+="</thead>"
for (var i in cats) {
output+="<tbody>"
output+="<tr>";
output+="<td><img src='" + cats[i].picture+"' alt='missing cat picture'></td>"
output+="<td>" + cats[i].breed + "</td>"
output+="<td>" + cats[i].country + "</td>"
output+="<td>" + cats[i].coffeePreference + "</td>"
output+="</tr>";
output+="</tbody>"
}
output+="</table>";
document.getElementById("catTable").innerHTML=output;
},
getData: function(){
$.getJSON('cats.json', function(cats) {
var cats = cats;
MYCATSPACE.SUBCAT.renderData(cats);
});
},
getSortedCountryData: function(){
$.getJSON('cats.json', function(cats) {
var cats = cats;
if (sortCountry!=true)
MYCATSPACE.SUBCAT.sortData(cats,'country',1);
else
MYCATSPACE.SUBCAT.sortData(cats,'country',-1);
sortCountry ^= true;
});
},
getSortedBreedData: function(){
$.getJSON('cats.json', function(cats) {
var cats = cats;
if (sortCountry!=true)
MYCATSPACE.SUBCAT.sortData(cats,'breed',1);
else
MYCATSPACE.SUBCAT.sortData(cats,'breed',-1);
sortCountry ^= true;
});
},
getSortedCoffeeData: function(){
$.getJSON('cats.json', function(cats) {
var cats = cats;
if (sortCountry!=true)
MYCATSPACE.SUBCAT.sortData(cats,'coffeePreference',1);
else
MYCATSPACE.SUBCAT.sortData(cats,'coffeePreference',-1);
sortCountry ^= true;
});
},
sortData: function(cats, element, direction){
switch(element) {
case 'breed':
var sortedData = cats.sort(function(a,b){return (a.breed < b.breed) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
break;
case 'country':
var sortedData = cats.sort(function(a,b){return (a.country < b.country) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
break;
case 'coffeePreference':
var sortedData = cats.sort(function(a,b){return (a.coffeePreference < b.coffeePreference) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
default:
MYCATSPACE.SUBCAT.renderData(cats);
}
},
filterCats: function(cats, criteria){
//var filteredData = cats.filter(function(c){return c.breed.toUpperCase().indexOf(criteria.toUpperCase()) !== -1;});
var filteredData = cats.filter(function(c){return c.coffeePreference.toUpperCase().indexOf(criteria.toUpperCase()) === 0 ;});
MYCATSPACE.SUBCAT.renderData(filteredData);
},
filterCats2: function(cats, criteria){
//var filteredData = cats.filter(function(c){return c.breed.toUpperCase().indexOf(criteria.toUpperCase()) !== -1;});
var filteredData = cats.filter(function(d){return d.breed.toUpperCase().indexOf(criteria.toUpperCase()) === 0 ;});
MYCATSPACE.SUBCAT.renderData(filteredData);
}
}
MYCATSPACE.SUBCAT.getData();
</script>
</body>
</html>
答案 0 :(得分：3)
您可以使用方括号表示法访问对象的动态属性。
sortData: function(cats, element, direction){
var sortedData = cats.sort(function(a,b){
return (a[element] < b[element]) ? -1*direction : 1*direction;
});
MYCATSPACE.SUBCAT.renderData(cats);
},
这是一个更好理解的例子
var obj = { age: 25, name: "Alex" };
var prop = "age";
console.log(obj[prop]); // 25, in this case it's like saying obj.age
答案 1 :(得分：1)
怎么样
sortData: function(cats, element, direction){
var sortedData = cats.sort(function(a,b){return (a[element] < b[element]) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
},
在JavaScript中，所有对象都是关联数组，obj.propertyNAME始终可以obj[propertyNAME]