从另一个 js 文件导入函数。 Javascript答案

【问题标题】：Import functions from another js file. Javascript从另一个 js 文件导入函数。 Javascript
【发布时间】：2018-06-21 01:37:32
【问题描述】：

我有一个关于在 javascript 中包含文件的问题。我有一个非常简单的例子：

--> index.html
--> models
      --> course.js
      --> student.js

课程.js：

function Course() {
    this.id = '';
    this.name = '';
}

学生拥有课程属性。像这样：

import './course';

function Student() {
    this.firstName = '';
    this.lastName = '';
    this.course = new Course();
}

index.html 是这样的：

<html>
    <head>
        <script src="./models/student.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="myDiv">
        </div>
        <script>
        window.onload= function() {
            var x = new Student();
            x.course.id = 1;
            document.getElementById('myDiv').innerHTML = x.course.id;
        }
        </script>
    </body>
</html>

但我在“var x = new Student();”这一行遇到错误：

学生未定义

当我从 Student 中删除导入时，我不再收到错误消息。我尝试过使用（要求、导入、包含、创建自定义函数、导出），但没有一个对我有用。

有人知道为什么吗？以及如何解决？

附：路径正确，来自VS Code中的自动补全

【问题讨论】：

我现在可以链接到文档吗：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
我不认为他有导入问题，他尝试运行它的环境有问题。浏览器默认不处理导入。
您在浏览器的 F12 开发工具窗口中观看了吗？
浏览器还不支持它们。将来可能会。检查此链接以获取更多信息oreilly.com/learning/…
他，我会调查的。

标签： javascript import

【解决方案1】：

默认情况下，脚本不能直接处理这样的导入。您可能会收到另一个关于无法获取课程或不进行导入的错误。

如果您将 type="module" 添加到您的 <script> 标记，并将导入更改为 ./course.js（因为浏览器不会自动附加 .js 部分），那么浏览器将为您和它下拉课程'可能会工作。

import './course.js';

function Student() {
    this.firstName = '';
    this.lastName = '';
    this.course = new Course();
}

<html>
    <head>
        <script src="./models/student.js" type="module"></script>
    </head>
    <body>
        <div id="myDiv">
        </div>
        <script>
        window.onload= function() {
            var x = new Student();
            x.course.id = 1;
            document.getElementById('myDiv').innerHTML = x.course.id;
        }
        </script>
    </body>
</html>

如果您通过 file:// 提供文件，它可能无法正常工作。一些 IDE 可以运行快速服务器。

您还可以编写一个快速的express 服务器来提供您的文件（如果没有 Node，请安装它）：

//package.json
{
  "scripts": { "start": "node server" },
  "dependencies": { "express": "latest" }
}

// server/index.js
const express = require('express');
const app = express();

app.use('/', express.static('PATH_TO_YOUR_FILES_HERE');
app.listen(8000);

使用这两个文件，运行npm install，然后运行npm start，您将有一个运行在http://localhost:8000 上的服务器，它应该指向您的文件。

【讨论】：

不幸的是，它不起作用，现在它抛出了一个额外的异常。 " 无效响应。因此不允许访问 Origin 'null'。"
如果你看到了，那就是跨域异常。你是从file:// 协议还是http:// 运行它？如果您从 file:// 运行它，您将遇到困难。
file:// 。那该怎么办？如何解决？
最好的方法是使用某种服务器通过localhost 为他们提供服务。一些 IDE 内置了它们。您还可以用几行代码编写一个快速的express 服务器。我会在我的回答中给你一个例子。
我无法使用任何服务器。

【解决方案2】：

快速浏览 MDN，我认为您可能需要在文件名末尾包含 .js，以便导入内容为 import './course.js' 而不是 import './course'

参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

【讨论】：

快速浏览一下您的答案，我可以看出您错了。请不要在未尽职尽责的情况下发布答案。

【解决方案3】：

以下内容适用于 Firefox 和 Chrome。在 Firefox 中，它甚至可以从 file:///

models/course.js

export function Course() {
    this.id = '';
    this.name = '';
};

models/student.js

import { Course } from './course.js';

export function Student() {
    this.firstName = '';
    this.lastName = '';
    this.course = new Course();
};

index.html

<div id="myDiv">
</div>
<script type="module">
    import { Student } from './models/student.js';

    window.onload = function () {
        var x = new Student();
        x.course.id = 1;
        document.getElementById('myDiv').innerHTML = x.course.id;
    }
</script>

【讨论】：

不幸的是没有工作，通过：从原点'null'访问'file:///........./models/student.js'的脚本已被阻止CORS 政策：无效响应。因此，不允许访问 Origin 'null'。
@SamySammour 这就是我在 Chrome 中得到的，但它在 Firefox 中确实有效。没关系；在生产中，您无论如何都会提供文件（这会使该错误消失）。这是如何实现对浏览器的模块支持的当前状态，所以它是您问题的答案，无论它是否适合您；）
它也不适用于 Firefox。它通过异常“未声明 HTML 文档的字符编码。如果文档包含 US-ASCII 范围之外的字符，则该文档将在某些浏览器配置中呈现乱码。页面的字符编码必须在文件或传输协议中。”屏幕上没有输出
如果您看到1，它就起作用了。该异常与您的<head> 中没有<meta charset="utf-8"> 无关，是由于您的<head> 引起的。
我已经提到没有输出，屏幕是空的。为什么 javascript 必须如此复杂

【解决方案4】：

你可以尝试如下：

//------ js/functions.js ------
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ js/main.js ------
import { square, diag } from './functions.js';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

你也可以完全导入：

//------ js/main.js ------
import * as lib from './functions.js';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

通常我们使用./fileName.js 来导入自己的js file/module，fileName.js 用于导入package/library 模块

当您将 main.js 文件包含到您的网页中时，您必须按如下方式设置 type="module" 属性：

<script type="module" src="js/main.js"></script>

更多详情请查看ES6 modules

【讨论】：

【解决方案5】：

//In module.js add below code

export function multiply() {
    return 2 * 3;
}

// 使用calc.js中的模块

import { multiply } from './modules.js';

const result = multiply();

console.log(`Result: ${result}`);

// 模块.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Module</title>
</head>
<body>

  <script type="module" src="./calc.js"></script>
</body>
</html>

它的设计模式相同的代码可以在下面找到，请使用在线服务器进行测试，否则会出现 CORS 错误

https://github.com/rohan12patil/JSDesignPatterns/tree/master/Structural%20Patterns/module

【讨论】：