缩放 JavaScript 函数

Question

我有一个目前由开关组成的功能，它的可扩展性不是很好。这是一个排序函数，它按原样工作得很好，但在试图简化它时，它无法 return 所需的数据。我只是想做到这一点，这样如果我想添加最喜欢的电影或其他类别，工作量就会减少。有效的函数是：

 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);
        },

但这不能正确排序。由于此函数与其他几个函数一起使用，我将 post 下面的所有代码。

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

Answer 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]

Answer 2

您可以使用方括号表示法访问对象的动态属性。

 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

缩放 JavaScript 函数

scaling JavaScript function

javascript

scalability