为什么我不能在其他JS文件中使用该功能？

Question

这是我的索引文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta name="description" content="test">

    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="test">

    <title>test</title>
</head>

<body>
    
    <script type="text/javascript">
        console.log('myname');
        calcbymodel('/model.json',[0,0,0,0]);
    </script>

    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.js"></script><!-- fetch -->
    <script src="./babel.min.js"></script><!-- babel -->
    <script src="./app.js" type='text/babel'></script>
</body>

</html>

这是 app.js 文件

async function calcbymodel(path, input) {
    const model = await tf.loadLayersModel(path);
    const r = model.predict(tf.tensor(input));
    r.data().then(array => console.log(array));

    return r.data();
}

我想知道为什么控制台会说：

Uncaught ReferenceError: calcbymodel is not defined
    at (index):21
(anonymous) @ (index):21

对于 babel 脚本，由于公司政策拒绝，无法导入。 所以，我作为本地文件导入。 这是链接：

https://unpkg.com/@babel/standalone/babel.min.js

有人可以帮我吗？

原来是 babel 脚本问题。 这是链接：为什么 JS 在 babel 脚本中找不到该函数？

Answer 1

您需要将 app.js 文件移动到使用该函数的上方。 在这种情况下，您需要将正在使用该函数的脚本标记移动到 app.js 脚本下方，或者将 app.js 脚本移动到您使用该函数的上方。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta name="description" content="test">

    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="test">

    <title>test</title>
</head>

<body>
    

    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"> 
    </script> 
    <script src="https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.js"> 
    </script><!-- fetch -->
    <script src="./babel.min.js"></script><!-- babel -->
    <script src="./app.js" type='text/babel'></script>
    <script type="text/javascript">
        console.log('myname');
        calcbymodel('/model.json',[0,0,0,0]);
    </script>
</body>

</html>

因为 HTML 是按照它们在文件中的顺序加载 js 文件的，所以可以在 HTML 文件中它下面的任何脚本标记中使用函数。

Answer 2

JS 当前按照您定义的顺序执行：

<body>
<body>
  <!-- This is first -->
  <script type="text/javascript">
    console.log('myname');
    calcbymodel('/model.json', [0, 0, 0, 0]);
  </script>
  <!-- This is second-->
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
  <!-- This is third-->
  <script src="https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.js"></script>
  <!-- fetch -->
  <!-- This is fourth-->
  <script src="./babel.min.js"></script>
  <!-- babel -->
  <!-- This is fitht-->
  <script src="./app.js" type="text/babel"></script>
</body>

如果你想在你的代码中访问另一个函数，你需要将你的第一个脚本移到底部，第二个问题似乎是type="text/babel"必须设置到 babel 脚本而不是应用程序。

我用 CDN 和这个应用程序尝试过：

<body>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.js"></script>
  <script src="./app.js" ></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" type="text/babel"></script>
  <script type="text/javascript">
    console.log('myname');
    calcbymodel('/model.json', [0, 0, 0, 0]);
  </script>
</body>

在 app.js 中：

const calcbymodel = ()=>{
    console.log("make calculations");
}

为什么我不能在其他JS文件中使用该功能？

问题描述

2 个解决方案

解决方案1
0 2021-11-11 00:41:57

解决方案2
0 2021-11-11 00:42:52

为什么我不能在其他JS文件中使用该功能？

问题描述

2 个解决方案

解决方案1 0 2021-11-11 00:41:57

解决方案2 0 2021-11-11 00:42:52

解决方案1
0 2021-11-11 00:41:57

解决方案2
0 2021-11-11 00:42:52