我正在對需要從遠程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 pricevar 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”可能是首選詞，但幸運的是，你并不總是需要那么多代碼來解決一個簡單的問題。頁面越來越大。很高興知道我們并不總是需要使用大量資源來實現一個小目標。

轉載于:https://www.cnblogs.com/jinhengyu/p/10258018.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的JavaScript越来越简单啦啦啦的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。