簡體   English   中英

為什么這段 JS 代碼不能在舊設備上運行?

[英]Why doesn't this JS code run on older devices?

我正在嘗試基於 openweathermap API 構建一個簡單的 MagicMirror 瀏覽器內天氣應用程序。

對編碼知之甚少,事實證明這有點困難。 我有這個代碼,有人為我糾正了,但它不會在舊設備上運行。 這是沙盒鏈接


class Weather {
    constructor(data) {
      this.data = data;
      this.temp = Math.round(data.main.temp);
      this.feels_like = Math.round(data.main.feels_like);
      this.description = data.weather[0].description;
      this.city = data.name;
      this.country = data.sys.country;
      this.wind = Math.round(data.wind.speed);
      this.humidity = data.main.humidity;
    }
  
    geticonClass() {
      let prefix = this.data.weather[0].icon.endsWith("d")
        ? 'wi-owm-day-'
        : 'wi-owm-night-';
      return `${prefix}${this.data.weather[0].id}`;
    }
  }
  
  function fetchWeather() {
    navigator.geolocation.getCurrentPosition(
      async (position) => {
        let url = new URL("https://api.openweathermap.org/data/2.5/weather");
        url.searchParams.set("lat", position.coords.latitude);
        url.searchParams.set("lon", position.coords.longitude);
        url.searchParams.set("lang", "pl");
        url.searchParams.set("appid", "fb7164d50e0faf1f058561b7903f03b9");
        url.searchParams.set("units", "metric");
  
        const response = await fetch(url);
        const weatherJSON = await response.json();
        updateDOM(new Weather(weatherJSON));
      },
      (error) => {
        console.error("Unable to get geolocation, Unsuported maybe?");
      }
    );
  }
  
  function updateDOM(weather) {
    const iconElement = document.querySelector(".today-weather-icon i");
    const tempElement = document.querySelector(".temperature-value p");
    const tempFeelElement = document.querySelector(".temperature-feel p");
    const descElement = document.querySelector(".temperature-description p");
    const locationElement = document.querySelector(".location p");
    const windElement = document.querySelector(".wind p");
    const humidElement = document.querySelector(".humid p");

    iconElement.classList.add(weather.geticonClass());
    tempElement.innerHTML = `${weather.temp}°<span>C</span>`;
    tempFeelElement.innerHTML = `Odczuwalna: ${weather.feels_like}°<span>C</span>`;
    descElement.innerHTML = weather.description;
    locationElement.innerHTML = `${weather.city}, ${weather.country}`;
    windElement.innerHTML = ` ${weather.wind} km/h`;
    humidElement.innerHTML = ` ${weather.humidity}`;
  }
  
  fetchWeather();
  setInterval(fetchWeather, 1800000);
  updateDOM();
  setInterval(updateDOM, 1820000);

這是具有 navigator.geolocation 的以前版本的代碼,它可以工作。

您正在使用現代 ES6 語法,例如class Weather這就是原因。 如果您想了解更多關於如何將其轉換為 ES6 之前的語法以便它也適用於舊設備的信息,請查看這篇文章ES6 Class 與 Object.prototyoe `

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM