如何从另一个javascript文件'；s函数？_Javascript_Async Await_Scope_Global Variables

如何从另一个javascript文件'；s函数？

javascript

如何从另一个javascript文件'；s函数？,javascript,async-await,scope,global-variables,Javascript,Async Await,Scope,Global Variables,我在堆栈上看到过类似的问题，但我无法为我的用例实现解决方案在某些上下文中，我尝试将纬度/经度变量存储在一个名为cords（Script.js）的数组中：我正在尝试访问此变量并将其保存到本地文本文件（Script2.js）：这是我用来在本地保存文件的方法，但我希望有人能帮助我如何做到这一点/最佳实践我尝试过一些事情，比如在函数外部初始化跳线，以及在aysnc等待中的一些错误尝试如果要尝试运行它，请执行以下操作： <head></head> <body>

我在堆栈上看到过类似的问题，但我无法为我的用例实现解决方案

在某些上下文中，我尝试将纬度/经度变量存储在一个名为cords（Script.js）的数组中：

我正在尝试访问此变量并将其保存到本地文本文件（Script2.js）：

这是我用来在本地保存文件的方法，但我希望有人能帮助我如何做到这一点/最佳实践

我尝试过一些事情，比如在函数外部初始化跳线，以及在aysnc等待中的一些错误尝试

如果要尝试运行它，请执行以下操作：

<head></head>
<body>
    <button id = "find-me">Show my location</button><br/>
    <p id = "status"></p>
    <a id = "map-link" target="_blank"></a>
    
    <button id="filesaver">Click to Save</button>

    <script src="script.js"></script>
    <script src="script2.js"></script>
</body>


显示我的位置


单击以保存

您可以在功能范围之外定义

跳线

，使其可用于两种功能。解决方案是，在设计应用程序时，您甚至在从浏览器获取

跳线之前都不会尝试保存它。在用户从浏览器获取位置之前添加一些错误/信息

var=null；
函数geoFindMe（）{
const status=document.querySelector（“#status”）；
const mapLink=document.querySelector（“#映射链接”）；
mapLink.href=''；
mapLink.textContent=''；
功能成功（职位）{
变量纬度=位置坐标纬度；
var经度=position.coords.longitude；
跳线=[{lat:纬度，long:经度}]；
控制台日志（跳线）；
status.textContent=''；
mapLink.href=`https://www.openstreetmap.org/#map=18/${纬度}/${经度}`；
mapLink.textContent=`纬度：${Latitude}'，经度：${Longitude}`；
}
函数错误（）{
status.textContent='无法检索您的位置'；
}
如果（！navigator.geolocation）{
status.textContent='您的浏览器不支持地理位置'；
}否则{
status.textContent='locking…'；
navigator.geolocation.getCurrentPosition（成功，错误）；
//navigator.geolocation.watchPosition（成功，错误）；
}
}
document.querySelector（“#find me”）.addEventListener（'click'，geoFindMe）；
函数saveStaticDataToFile（）{
console.log（“单击”）
//在此处向用户显示错误/信息
if（！cords）console.log（'请先获取位置'）；
var a=document.body.appendChild（document.createElement（“a”））；
a、 下载=“cords.txt”；
a、 href=“data:text/plain；base64，”+btoa（JSON.stringify（cords））；
a、 innerHTML=“保存跳线”；
}
document.querySelector（“#filesaver”）.addEventListener（'click'，saveStaticDataToFile）

显示我的位置


单击以保存
html文件中的脚本作为一个脚本工作。您可以在全局范围内声明一个变量，并从html文件中的不同脚本中的任何位置访问它
index.html：
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Location</title>
</head>

<body>
    <button id="find-me">Show my location</button><br />
    <p id="status"></p>
    <a id="map-link" target="_blank"></a>
    <br>
    <!-- i used a link directly here so you dont have to click twice to download the file -->
    <a id="filesaver" href="">Click to Save</a>

    <!-- this script works like the same script even they are from different files/scripts -->
    <script src="script.js"></script>
    <script src="script2.js"></script>
</body>

</html>

script2.js：
function saveStaticDataToFile() {
    console.log("Clicked")
    
    var a = document.body.appendChild(document.createElement("a"));
    a.download = "cords.txt";
    a.href = "data:text/plain;base64," + btoa(JSON.stringify(cords));
    a.innerHTML = "Save Cords";
  
}
  
document.querySelector('#filesaver').addEventListener('click', saveStaticDataToFile);

const saveStaticDataToFile = () => {
    // using FILE_SAVER constant from the first script `we can access it from here bc we declare in global scope`
    FILE_SAVER.download = "cords.txt";
    FILE_SAVER.href = "data:text/plain;base64," + btoa(JSON.stringify(cords));
}

document.querySelector('#filesaver').addEventListener('click', saveStaticDataToFile);

// getting element from dom
// global scope constants
const FILE_SAVER = document.querySelector('#filesaver');
const STATUS = document.querySelector('#status');
const MAP_LINK = document.querySelector('#map-link');

let cords = []; // global scope variable so you can access it from the scripts below this one

FILE_SAVER.style.display = 'none'; // hiding the 'save file button' until we get the coords

const success = (position) => {
    const { coords: { latitude, longitude } } = position; // using ES6 syntax to make the code easy to read
    STATUS.textContent = '';
    MAP_LINK.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
    MAP_LINK.textContent = `Latitude: ${latitude}°, Longitude: ${longitude}°`;
    cords = [{ lat: latitude, long: longitude }]; // setting the cords in the global cords variable
    FILE_SAVER.style.display = 'block'  // displaying the 'save file button'
}
const error = () => {
    STATUS.textContent = 'Unable to retrieve your location';
}

const geoFindMe = () => {
    if (!navigator.geolocation) {
        STATUS.textContent = 'Geolocation is not supported by your browser';
    } else {
        STATUS.textContent = 'Locating...';
        navigator.geolocation.getCurrentPosition(success, error);
    }
}
document.querySelector('#find-me').addEventListener('click', geoFindMe);

const saveStaticDataToFile = () => {
    // using FILE_SAVER constant from the first script `we can access it from here bc we declare in global scope`
    FILE_SAVER.download = "cords.txt";
    FILE_SAVER.href = "data:text/plain;base64," + btoa(JSON.stringify(cords));
}

document.querySelector('#filesaver').addEventListener('click', saveStaticDataToFile);