Question

我对javascript很新，但设法编写了一个有效的xml函数：）

我希望有人能给我一个如何优化功能的简要介绍。目前每个州的天气都有不同的功能，但我希望我能以某种方式简化这一过程。

代码粘贴在此处：http://pastie.org/private/ffuvwgbeenhyo07vqkkcsw

非常感谢任何帮助。谢谢！

编辑：添加两个XML Feed的代码示例：

功能1（紫外线）：http://pastie.org/private/jc9oxkexypn0cw5yaskiq

功能2（天气）：http://pastie.org/private/pnckz4k4yabgvtdbsjvvrq

Answer 1

$(d).find('location#sydney')

值得怀疑。 #sydney表示属性值为sydney的元素，其模式类型为ID。在HTML中，由于DOCTYPE，id="..."属性的架构类型为ID。但是此XML文件没有DOCTYPE，因此其id="..."属性没有架构类型ID。因此，getElementById('sydney')将无效，#sydney作为选择器不起作用。

它在实践中有效，因为当你使用find()时，jQuery会回退到它自己的'Sizzle'JavaScript选择器匹配器，它只是查找id="..."属性，就好像它是HTML一样。但是Sizzle很慢，你不应该依赖这个实现细节。对于XML文档，使用显式属性选择器location[id=sydney]会更好。

var sydneyuv = sydneyuv += '<span>' + uvindex + '</span>' ;

你在这里有一个多余的任务。您可以使用扩充作业+=向sydneyuv添加内容，然后再将结果分配给sydneyuv。

此外，通常最好不要从输入值拼接HTML字符串。如果uvindex包含HTML特殊字符怎么办？（它可能不会，但是没有什么可以阻止你从中包含它们的网站。）如果没有HTML转义，你就会有HTML注入和潜在的XSS安全漏洞。始终在jQuery中使用DOM样式的方法，如text()和attr()，或创建快捷方式：var $sydneyuv= $('<span/>', {text: uvindex});，而不是字符串吊索。

我希望我能以某种方式简化这一点。

不确定。让它以数据为导向：

var towns= ['sydney', 'melbourne', 'brisbane', 'perth', 'adelaide', 'darwin'];
var uvlevels= [
    {uvlevel: 2,    risk: 'Low',         curcon: 'You can safely stay outdoors and use an SPF 15 moisturiser.'},
    {uvlevel: 5,    risk: 'Moderate',    curcon: 'Wear protective clothing outdoors and use an SPF 15 or SPF 30 moisturiser.'},
    {uvlevel: 7,    risk: 'High',        curcon: 'Wear protective clothing, limit your time outdoors and use an SPF 30 moisturiser.'},
    {uvlevel: 10,   risk: 'Very high',   curcon: 'Use caution, limit exposure to the sun and use an SPF 30 moisturiser.'},
    {uvlevel: 20,   risk: 'Extreme',     curcon: 'Use extreme caution, avoid exposure to the sun and use an SPF 30 moisturiser.'},
    {uvlevel: null, risk: 'Unavailable', curcon: 'Information is currently unavailable.'}
];

现在您可以用一个循环替换所有这些单独的语句：

$.each(towns, function() {
    var $location= $(d).find('location[id='+this+']');
    var uv= $location.find('index').text();
    var shorttown= this.slice(0, 3);
    $('#uv-'+shortttown).empty().append($('<span/>', {text: uv}));
    $.each(uvlevels, function() {
        if (this.uvlevel===null || uv<=this.uvlevel) {
            $('#risk-'+shorttown).text(this.risk);
            $('#curcon-'+shorttown).text(this.curcon);
            return false;
        }
    });
});

无论天气如何，大概都相似。

（我在HTML文档ID中使用完整城镇ID，因此您不需要shorttown黑客。）

Answer 2

简化版本看起来像这样：

var cities = ['sydney', 'melbourne', 'brisbane', 'perth', 'adelaide', 'darwin'], 
    risks = {
        2: {
            risk: 'Low', 
            curcon: 'You can safely stay outdoors and use an SPF 15 moisturiser.'
        }
        5: {
            risk: 'Moderate', 
            curcon: 'Wear protective clothing outdoors and use an SPF 15 or SPF 30 moisturiser.'
        }
        7: {
            risk: 'High', 
            curcon: 'Use caution, limit exposure to the sun and use an SPF 30 moisturiser.'
        }
        10: {
            risk: 'Very High', 
            curcon: 'Use caution, limit exposure to the sun and use an SPF 30 moisturiser.'
        }
        20: {
            risk: 'Extreme', 
            curcon: 'Use extreme caution, avoid exposure to the sun and use an SPF 30 moisturiser.'
        }
    };

for(var i = 0; i < cities.length; i++){
    var shortCityName = cities[i].substring(0, 3);

    $(d).find('location#sydney').each(function(){
        var $location = $(this); 
        var uvindex = parseInt($location.find('index').text(), 10);

        $('#uv-' + shortCityName).html('<span>' + uvindex + '</span>');

        for(var i in risks){
            if(uvindex < risks[i]){
                $('#risk-' + shortCityName).html(risks[i].risk);
                $('#curcon-' + shortCityName).html(risks[i].curcon);
            }
        }
    });
}

使用对象存储消息，然后使用数组存储城市的名称。而且，而不是使用它：

var wicon = wicon += '<img src="' + icon + '" alt="Weather Unavailable" />' ;

您可以改用：

var wicon = $('<img /').attr({
    src: icon, 
    alt: 'Weather Unavailable'
});

最后，跨域请求XML信息会导致问题。查看API是否以JSONP格式提供信息。使用JavaScript时，JSON也（稍微）更容易使用。

Answer 3

这应该足以让你删除一大堆重复。

var lte2 = { risk: "Low", curcon: "You can safely stay outdoors and use an SPF 15 moisturiser." },
    lte5 = { risk: "Moderate", curcon: "Wear protective clothing outdoors and use an SPF 15 or SPF 30 moisturiser." },
    lte7 = { risk: "High", curcon: "Wear protective clothing, limit your time outdoors and use an SPF 30 moisturiser." },
    uvWarningMap = {
        0: lte2,
        1: lte2,
        2: lte2,
        3: lte5,
        4: lte5,
        5: lte5,
        6: lte7,
        7: lte7
    };

Answer 4

我建议您创建一个包含UV元素ID，后缀和气象站ID的数组（ stationid ）

var areas = [
     {id:'sydney',suffix:'syd',stationid:'YSSY'},
     {id:'melbourne',suffix:'mel',stationid:'YMML'},
     {id:'brisbane',suffix:'bri',stationid:'YBBN'},
     {id:'perth',suffix:'per',stationid:'YPPH'},
     ...
 ]

然后是 UV

// FUNCTION 1 - UV
function getUV() {

    // BEGIN AUSTRALIAN UV FUNCTION

    $.get('http://www.arpansa.gov.au/uvindex/realtime/xml/uvvalues.xml', function(d) {

        //SYDNEY UV
             $(areas).each(function(){
            var area = this;
        $(d).find('location#'+area.name).each(function(){

            var $location = $(this); 
            var uvindex = $location.find('index').text();

            var areauv = areauv += '<span>' + uvindex + '</span>' ;
            $('#uv-'+area.suffix).empty().append($(areauv)); // empty div first

            if (uvindex <= 2.0) {
                $('#risk-'+area.suffix).empty().append('Low');
                $('#curcon-'+area.suffix).empty().append('You can safely stay outdoors and use an SPF 15 moisturiser.');
            } else if (uvindex <= 5.0) {
                $('#risk-'+area.suffix).empty().append('Moderate');
                $('#curcon-'+area.suffix).empty().append('Wear protective clothing outdoors and use an SPF 15 or SPF 30 moisturiser.');
            } else if (uvindex <= 7.0) {
                $('#risk-'+area.suffix).empty().append('High');
                $('#curcon-'+area.suffix).empty().append('Wear protective clothing, limit your time outdoors and use an SPF 30 moisturiser.');
            } else if (uvindex <= 10.0) {
                $('#risk-'+area.suffix).empty().append('Very High');
                $('#curcon-'+area.suffix).empty().append('Use caution, limit exposure to the sun and use an SPF 30 moisturiser.');
            } else if (uvindex <= 20.0) {
                $('#risk-'+area.suffix).empty().append('Extreme');
                $('#curcon-'+area.suffix).empty().append('Use extreme caution, avoid exposure to the sun and use an SPF 30 moisturiser.');
            } else {
                $('#risk-'+area.suffix).empty().append('Unavailable');
                $('#curcon-'+area.suffix).empty().append('Information is currently unavailable.');
            }

        });
            });

        // END OF AUSTRALIAN UV FUNCTION

    });
}

以及天气

function getWeather() {

        // BEGIN AUSTRALIA and NEW ZEALAND WEATHER FUNCTION
            $(areas).each(function(){
                var area = this;
        $.get('http://api.wxbug.net/getLiveCompactWeatherRSS.aspx?ACode=XXXPRIVATEXXX&stationid='+area.stationid+'&unittype=1&outputtype=1', function(d){
        $(d).find('weather').each(function(){

            var $weatherinfo = $(this); 
            var degrees = $weatherinfo.find('temp').text().replace(/\.0$/i, "");
            var conditions = $weatherinfo.find('current-condition').text();
            var icon = $weatherinfo.find('current-condition').attr('icon').replace(/\.gif$/i, ".png").split('http://deskwx.weatherbug.com/')[1];

            var temperature = temperature += '<span>' + degrees + '</span>' ;   
            $('#temp-'+area.suffix).empty().append($(temperature));

            var winformation = winformation += '<span>' + conditions + '</span>' ;
            $('#info-'+area.suffix).empty().append($(winformation));

            var wicon = wicon += '<img src="' + icon + '" alt="Weather Unavailable" />' ;
            $('#icon-'+area.suffix).empty().append($(wicon));

        });
        });
            });
}

Answer 5

您需要概括该功能，以便每个方法都可以支持任何城市。现在，我看不出你在布里斯班和墨尔本所做的事情有什么不同。警告是一样的。

在Javascript中优化函数

5 个答案: