如何使用JavaScript从另一个文件访问变量

在JavaScript中，可以通过<script>标签、import语句或export语句从另一个文件访问变量。<script>标签主要用于在HTML文件中访问JavaScript文件的变量。这对于客户端脚本和服务器端脚本都可以很好地工作。而import或export语句则不能用于客户端脚本。在服务器端脚本的Node.js中，import或export语句可以工作。

第一种方法： 首先创建“module1.js”文件，并定义一个名为“Student”的对象，对象具有属性“name”、“age”、“dept”和“score”。使用HTML文件的“head”部分中的<script>标签的src属性来导入“module1.js” JavaScript文件。由于导入了JavaScript文件，可以在HTML文件中访问其内容。

我们创建一个按钮，点击按钮触发JavaScript函数。通过函数 f() 访问“Student”对象的属性，并将所有的“Student”对象的属性连接到一个字符串变量中。使用HTML DOM的document.getElementById()和innerHTML属性将该字符串放置在具有‘text’ id的<p>标签中。这是一个客户端程序的示例。

代码实现：

variable_access.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="module1.js"></script>
</head>
<body>
<button onclick="f()">Click Me To Get Student Details</button>
<div>
<p id="text" style="color:purple; font-weight:bold;font-size:20px;"></p>
</div>
<script type="text/javascript">
function f() {
var name = Student.name;
var age = Student.age;
var dept = Student.dept;
var score = Student.score;
var str = "Name:" + name + "\nAge: " + age + "\nDepartment:" + dept + "\nScore: " + score;
document.getElementById('text').innerHTML = str;
}
</script>
</body>
</html>

module1.js 此文件在上述HTML代码中使用。

var Student =
{
name : "ABC",
age : 18,
dept : "CSE",
score : 90
};

输出：

如何使用JavaScript从另一个文件访问变量

第二种方法： 在这种方法中，创建一个JavaScript文件“module1.js”，并定义一个具有属性“name”、“age”、“dept”和“score”的“Student”对象。通过module.exports导出“Student”对象。在另一个JavaScript模块文件“module2.js”中，使用import语句导入“module1.js”，位于文件开头。在“module2.js”文件中定义了“Hostel”和“Hostel_Allocation”对象，并且可以在“Hostel_Allocation”对象中访问“Student”对象。

一个HTTP服务器被创建并在8080端口上托管。将 Hostel_Allocation 的属性连接成一个字符串。每当Web应用程序运行时，该字符串将打印在网页的首页面上。这是一个服务器端编程的示例。

代码实现：

module1.js

var Student = {
    name : "ABC",
    age : 18,
    dept : "CSE",
    score : 90
};
module.exports = {Student};

module2.js

var http = require('http');
const {Student} = require('./module1.js');

var Hostel = {
    student_count: 500,
    no_of_rooms: 250,
    hostel_fees: 12000
}

var Hostel_Allocation = {
    room_no : 151,
    student_name: Student.name,
    student_age: Student.age,
    student_dept: Student.dept,
    total_fees: 12000
}

var str = "宿舍号：" + Hostel_Allocation.room_no
          + "\n学生姓名："
          + Hostel_Allocation.student_name
          + "\n总费用："
          + Hostel_Allocation.total_fees;

http.createServer(function (req, res) {
    res.write(str);
    res.end();
}).listen(8080);