繁体   English   中英

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

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 地图。 绝对是太多了! 该文件是用普通 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后,每个功能一个/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>

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

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

1 个回复

我终于想通了。

有两种可能。

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

就像@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. 作为现代的“type=module”在 HTML 中导入

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

geom = new ol.format.GeoJSON();

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

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

我还有很多其他类似的错误,所以我用正确的声明清理了我的代码,就是这样! 它现在与导出/导入 ES6 逻辑一起工作,因此您可以通过导入主 JS 文件来保持 HTML 干净(所有 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 。 如何将组件导入in ...

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