繁体   English   中英

拆分单个 JS 文件后的函数导入不再知道它们作为参数的 object

Functions imports after splitting a single JS file are no more aware of the object they take as parameter

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个 800 多行的单个 JS 文件,使用OpenLayers创建 web map。 这绝对是太多了。 该文件是用 vanilla JavaScript 编写的。

它的结构简单如下:

const function1 = (featurePassedFromFlask) {
  do stuff
  return someVectorLayers;
}

const function2 = (otherFeaturePassedFromFlask) {
  do stuff
  return aPoint;
}

const map = (vectorLayers, myPoint) => {
  do stuff to build the map, no returned value.
}

vectorLayers = function1(featurePassedFromFlask);
myPoint = function2(otherFeaturePassedFromFlask);

map(vectorLayers, myPoint);

如您所见,我在其中有三个主要功能,因此我决定将其拆分为三个文件,在阅读https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference后,每个 function 一个/Statements/importhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

文件function1.js

const function1 = (featurePassedFromFlask) {
  do stuff
  return someVectorLayers;
}
export { function1 };

文件function2.js

const function2 = (otherFeaturePassedFromFlask) {
  do stuff
  return aPoint;
}
export { function2 };

和文件map.js与剩余的代码+这两个新行在顶部:

import { function1 } from './function1.js';
import { function2 } from './function2.js';

“问题”是在我的 Flask 模板map.html (jinja2)中我只加载map.js

<!-- Pass first result object from Python to JS here --> 
{% if resultsObjectFromRoute1 %}
  <script type="text/javascript">
    var featurePassedFromFlask = {{ resultsObjectFromRoute1|tojson }};
  </script>
{% endif %}

<!-- Pass second result object from Python to JS here --> 
{% if resultsObjectFromRoute2 %}
  <script type="text/javascript">
    var otherFeaturePassedFromFlask = {{ resultsObjectFromRoute2|tojson }};
  </script>
{% endif %}

<script src="{{ url_for('static', filename='js/ol.js') }}" type="application/javascript"></script>
<script src="{{ url_for('static', filename='js/map.js') }}" type="application/javascript"></script>

浏览器首先抱怨: Uncaught SyntaxError: import declarations may only appear at top level of a module所以我浏览了一下发现我必须将最后一行更改为:

<script src="{{ url_for('static', filename='js/map.js') }}" type="module"></script>

它不再抱怨,但页面没有正常工作:

Uncaught ReferenceError: assignment to undeclared variable geom

我还尝试在map.html中导入我的两个函数文件,而不对前面的错误消息进行任何更改:

<script src="{{ url_for('static', filename='js/function1.js') }}" type="module"></script>
<script src="{{ url_for('static', filename='js/function2.js') }}" type="module"></script>
<script src="{{ url_for('static', filename='js/map.js') }}" type="module"></script>

如果 function 1 和 2 不必处理参数,也许它会起作用,所以我知道我破坏了与此相关的东西,因为现在那些文件“function1.js”和“function2.js”不再知道object 的存在,他们必须考虑作为其中定义的 function 的参数。 那么我怎样才能再次打开该链接,就像所有内容都封装在一个文件中一样?

ps:对于可能很糟糕的措辞抱歉,我不是 JS 专家(这也可能是我没有成功找到一些有用材料的原因)。

1 个回复

我终于弄明白了。

有两种可能性。

1. 作为 HTML 中的经典“type=application/javascript”导入

就像上面评论中建议的@Kajbo一样,删除所有导出/导入语法并在HTML中一一加载所有JS文件,最后在模板中加载主要文件( map.js )确实有效:

<script src="{{ url_for('static', filename='js/function1.js') }}" type="application/javascript"></script>
<script src="{{ url_for('static', filename='js/function2.js') }}" type="application/javascript"></script>
<script src="{{ url_for('static', filename='js/map.js') }}" type="application/javascript"></script>

但如果它们像我最初那样作为“模块”加载,它就不起作用

这种做法的主要缺点是,如果您最终拥有 180 个 JS 文件,则意味着您的 HTML 中有 180 个导入。 我不是很热情。

2. 作为 HTML 中的现代“type=module”导入

事实上,我注意到我在geom上遇到的错误是由于我的代码中的这一行:

geom = new ol.format.GeoJSON();

如果这种声明变量的惰性方式在使用“type=application/javascript”加载 JS 文件之前有效,那么当您将它们加载为“type=module”时它就不起作用了。 事实上,模块似乎更棘手,你现在真的必须正确声明你的变量:

let geom = new ol.format.GeoJSON();

我有许多其他类似的错误,所以我用正确的声明清理了我的代码,就是这样,它现在正在使用导出/导入 ES6 逻辑,因此您可以通过导入主 JS 文件(所有 JS逻辑保留在 JS 文件中;这样更干净)!

4 如何从JS文件导入函数?

上下文:我正在尝试将距离度量标准加载到在浏览器(Firefox)中运行的网页中。 距离度量采用javascript函数的形式。 问题:我正在尝试通过文件输入将功能加载到我的网页中。 但是,JS文档没有提供在脚本中导入函数的方法。 我知道应该从脚本的顶部完成导入,但是脚本不会事先加载。 ...

5 将单个Angular Controller拆分为多个JS文件

我正在尝试使用Angularjs为我们的金融客户创建一个应用程序。 他们需要整个应用程序在一个页面中。 我说服他们至少使用标签。 但实际问题是应用程序有近2000个字段,其中一半是根据输入和数据库中的一些数字计算的。 我使用很少的控制器隔离了应用程序。 但是在给出所有计算的情况下, ...

6 将函数导入js文件后出现VueJS错误

我制作了一个js脚本,可以将数据发送到数据库,并且希望将其导入到我的.vue文件中,以便在单击按钮时可以使用它。 问题是当导入脚本并且页面上什么都没有显示时,Vue向我显示此错误: 我的js脚本: 我的Vue页面: 如果有人有解决方案,我会很乐意接受;) ...

7 拆分文件后JS不更新DOM

只要HTML和JS / jQuery在同一个HTML文件中,这完全可以正常工作。 但是,由于可以从多个页面调用此方法,因此我将其拆分为单独的文件(我还认为它使代码更整洁,更易于阅读)。 也就是说,如果从所说的4到6页调用该函数,依此类推 我缺少使它在我的代码中显示回DOM的东西吗? ...

2018-04-08 16:38:06 1 15   dom
8 Vue 将组件从单个 .js 文件拆分到多个文件中

我在我的index.js (我的主要 Vue 代码所在的位置)中创建了一个组件。 现在我想将项目模块化并将组件放入一个单独的文件中。 我不知道该怎么做,因为如果我创建例如optionalapm.js主index.js会返回一个错误,它无法找到我包含的 vue 组件optionalapm 。 如何将 ...

9 JS与函数参数相同的对象

jiddle-我有使用默认value创建x*y array value 。 我希望这个值是2个长数组。 但是,似乎通过传递new Array(2)作为parameter它总是传递相同的对象,因此以后更改数组中的任何单元格都会影响它们。 如何使此数组使每个单元的每个default值都相同,但 ...

10 如何将单个Node.js文件拆分为单独的模块

我想将代码分成不同的文件。 我目前在同一个文件中编写所有get和post方法,但我想要更高的可读性和可管理性。 我试图将代码放在不同的文件中,但在运行主应用程序时,其他文件中的其余get和post方法都无法调用。 我包括这个: var Db = require('/ file ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM