从另一个 js 文件导入函数.Javascript [英] Import functions from another js file. Javascript

查看：32 发布时间：2021/12/25 19:29:13 javascript import

本文介绍了从另一个 js 文件导入函数.Javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

-->索引.html-->楷模-->课程.js-->学生.js

course.js:

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

学生有一个课程属性.像这样:

import './course';函数学生(){this.firstName = '';this.lastName = '';this.course = new Course();}

和 index.html 是这样的:

<头><script src="./models/student.js" type="text/javascript"></script><身体><div id="myDiv">

<脚本>window.onload= 函数(){var x = new Student();x.course.id = 1;document.getElementById('myDiv').innerHTML = x.course.id;}

但是我在var x = new Student();"行上收到一个错误:

<块引用>

未定义学生

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

有人知道为什么吗?以及如何解决这个问题?

附言路径是正确的，它来自 VS Code 中的自动完成

解决方案

以下在 Firefox 和 Chrome 中对我有用.在 Firefox 中它甚至可以从 file:///

<块引用>

模型/course.js

导出函数课程(){this.id = '';this.name = '';};

<块引用>

模型/student.js

import { Course } from './course.js';导出函数学生(){this.firstName = '';this.lastName = '';this.course = new Course();};

<块引用>

index.html


<脚本类型=模块">从'./models/student.js'导入{学生}；window.onload = 函数 () {var x = new Student();x.course.id = 1;document.getElementById('myDiv').innerHTML = x.course.id;}

I have a question about including a file in javascript. I have a very simple example:

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

course.js:

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

A student has a course property. like this:

import './course';

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

and the index.html is like:

<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>

But I am getting an error on the line "var x = new Student();":

Student is not defined

When I remove the import from Student, I don't receive the error anymore. I have tried to use (require, import, include, create a custom function, export) and none has worked for me.

Anybody knows why? and how to fix that?

P.S. the path is correct, it comes from the autocomplete in VS Code

解决方案

The following works for me in Firefox and Chrome. In Firefox it even works from 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>

这篇关于从另一个 js 文件导入函数.Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

从另一个 js 文件导入函数.Javascript [英] Import functions from another js file. Javascript

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

从另一个 js 文件导入函数.Javascript [英] Import functions from another js file. Javascript

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭