JavaScript越来越简单啦啦啦

我正在对需要从远程API提取并对页面的各个部分进行更改的页面进行更改。听起来像是抽出jQuery和Ajax的时候了，不是吗？相反，我只是使用了老式的JavaScript。实际上，我使用了新的JavaScript。

浏览器在图书馆和框架的出现中并没有停滞不前。因此，当我们需要额外烘烤时，我们可以利用这些功能。

一些JSONP

第一步是执行JSONP调用。这通常很简单：在页面中嵌入脚本标记。该脚本将运行您在页面上定义的功能。

var scr = document.createElement('script');
scr.src = 'http://openexchangerates.org/latest.json?callback=formatCurrency';
document.body.appendChild(scr);

当脚本运行时，它会将数据传递给formatCurrency函数。优秀。

一旦数据在函数中，我需要获取特定类型的所有元素并根据这些元素进行更改。

querySelectorAll

该querySelectorAll方法将获取与特定选择器匹配的所有元素 - 类似于jQuery。它仅限于浏览器理解的选择器，这肯定比jQuery可以做的要少。有时用凿子代替大锤。

该querySelectorAll方法也适用于IE8及以及所有其他流行的浏览器。我还包装了我的整个代码块，以便在执行任何操作之前检查浏览器是否支持此方法。

if (document.querySelectorAll) {
    function formatCurrency (data) {

        var els = document.querySelectorAll('.price');
        /* do stuff with the elements */
    }

    var scr = document.createElement('script');
    scr.src = 'http://openexchangerates.org/latest.json?callback=formatCurrency'; 
    document.body.appendChild(scr);
}

正如您在示例中所看到的，我正在寻找的是具有一类价格的每个元素。我可以使用，getElementsByClassName但在IE8中不支持，而是querySelectorAll。到现在为止还挺好。

在那之后，只需要获取属性，进行一些更改，然后使用innerHTML将其重新插入到DOM中。十分简单。

渐进式增强

但是那些不支持这种新功能的用户呢？它与那些不支持JavaScript的人一样。就我而言，这意味着用户只会看到加拿大的定价而不是将其转换为本地货币。

这是完整的最终脚本。

if (document.querySelectorAll) {
    var currencyLookup = {
        EUR:'€', USD:'US$', CAD:'CDN$'
    }
    function formatCurrency (data) {
        // format germany price
        var els = document.querySelectorAll('.price');
        for (var i=0; i<els.length; i++) {
            var price = parseInt(els[i].innerHTML.replace(/[^0-9]*/,''));    
            var curr = els[i].getAttribute('data-currency');
            var newPrice = price / data.rates.CAD * data.rates[curr];
            els[i].innerHTML = '<small>' + currencyLookup[curr] + '</small>' + Math.round(newPrice); 
        }
    }

    var scr = document.createElement('script');
    scr.src = 'http://openexchangerates.org/latest.json?callback=formatCurrency';
    document.body.appendChild(scr);
}

这总共是628个字节。不需要JavaScript库或框架。这可以缩小到469个字节。与只需要在页面上获取jQuery所需的91,000字节相差甚远。

Takes it Easy

“只使用jQuery”可能是首选词，但幸运的是，你并不总是需要那么多代码来解决一个简单的问题。页面越来越大。很高兴知道我们并不总是需要使用大量资源来实现一个小目标。