javascript - kako mogu riješiti ESLint grešku 'no-unused-var' s Google kartom

MISLIM DA JE TO JEDNOSTAVAN PROBLEM, ALI GA NE MOGU RIJEŠITI
Unio sam /* export myMap */ ili /* global myMap */ na vrh skripte, ali se pogreške nastavljaju

Kod

HTML

<h1>My First Google Map</h1>
<div id="googleMap" style="width:60%;height:600px;margin: auto;"></div>
<script src="https://maps.googleapis.com/maps/api/js? key=YOUR_KEY&callback=myMap"></script>

JavaScript

function myMap() {
    var mapProp= {
        center:new google.maps.LatLng(37.540881, 127.079689),
        zoom:17,
    };
    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

Kada sam napisao kod kao što je prikazano gore, vidio sam sljedeću grešku

Greška ESLint 'myMap' je definirana, ali nikada nije korištena. (no-unused-vars)
Greška ESLint 'google' nije definiran. (no-undef)
Greška ESLint 'map' je dodijeljena vrijednost, ali nikada nije korištena. (no-unused-vars)
Greška ESLint 'google' nije definiran. (no-undef)

ali Google API koristi 'google', 'map', a ja koristim 'myMap'. nema sumnje
molim pomoć za početnika. hvala

p.s. Ne želim rješavati s /* eslint-disable no-unused-vars */

Odgovor #1

Da biste se riješili poruka o pogreškama, morate reći svom linteru da je google vanjska varijabla, i morate reći linteru da planirate koristiti myMap izvana. A budući da kasnije ne koristite map, jednostavno možete ukloniti var map =.

Linter je stvarno glup i može provjeriti samo konzistentnost unutar datoteke koju trenutno analizira, ne može provjeriti upotrebu funkcije u drugoj datoteci/skripti i ne može provjeriti da li varijabla potječe od negdje drugdje.

Najjednostavniji pristup bio bi koristiti opciju global kako biste linteru rekli da je google definiran negdje drugdje, te napisati window.myMap=myMap, na taj način eksplicitno dodjeljujete myMap globalnom objektu window (što za dati kod zapravo ne mijenja ništa jer je myMap već definiran globalno) i linteru govori da se očekuje da se koristi negdje drugdje izvan tog skripta.

Linter ne može provjeriti da li se myMap zaista koristi negdje drugdje i mora vam vjerovati u tome.

/* global google */

function myMap() {
  var mapProp = {
    center: new google.maps.LatLng(37.540881, 127.079689),
    zoom: 17,
  };
  new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

window.myMap = myMap;

Ali ako ne koristite modul bundler poput webpacka ili rollupa i ništa poput commonjs, amd ili nativenih es6 modula, tada biste uvijek trebali omotati svoj kod u IIFE kako biste osigurali da što je moguće manje onečišćavate globalni opseg:

(function() {
  /* global google */

  function myMap() {
    var mapProp = {
      center: new google.maps.LatLng(37.540881, 127.079689),
      zoom: 17,
    };
    new google.maps.Map(document.getElementById("googleMap"), mapProp);
  }

  window.myMap = myMap;
}())

I ovdje window.myMap=myMap zapravo ima svrhu učiniti funkciju dostupnom za druge skripte.

Umjesto pisanja /* global google */ možete napraviti suprotno od window.myMap=myMap, ali ovo će raditi samo ako su skripte učitane u ispravnom redoslijedu tako da skripte Google Maps postave google prije nego što se vaša skripta izvrši:

(function() {
  var google = window.google;

  function myMap() {
    var mapProp = {
      center: new google.maps.LatLng(37.540881, 127.079689),
      zoom: 17,
    };
    new google.maps.Map(document.getElementById("googleMap"), mapProp);
  }

  window.myMap = myMap;
}())

Sada imate sintaksu koja je stvarno bliska izgledu AMD modula (kao što se koristi u nodejs-u ili webpack-u), i to bi olakšalo ako planirate preći na bundler u budućnosti:

var google = require('google');

function myMap() {
  var mapProp = {
    center: new google.maps.LatLng(37.540881, 127.079689),
    zoom: 17,
  };
  new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

exports.myMap = myMap;