Sam*_*our 20 javascript import
我有一个关于在javascript中包含文件的问题.我有一个非常简单的例子:
--> index.html
--> models
--> course.js
--> student.js
course.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();"行上收到错误:
学生没有定义
当我从学生中删除导入时,我不再收到错误.我曾尝试使用(要求,导入,包含,创建自定义函数,导出),但没有一个对我有用.
谁知道为什么？以及如何解决这个问题？
PS路径正确,它来自VS Code中的自动完成
Chr*_*s G 17
以下适用于Firefox和Chrome.在Firefox中它甚至可以使用file:///
车型/ course.js
export function Course() {
this.id = '';
this.name = '';
};
车型/ 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>
Bab*_*med 12
你可以尝试如下:
//------ 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模块
默认情况下，脚本不能直接处理这样的导入。您可能会收到另一个关于无法获取 Course 或不进行导入的错误。
如果您添加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该服务器应该指向您的文件。
小智 6
//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
| 归档时间： |
|
| 查看次数： |
74291 次 |
| 最近记录： |