无纸化教育传媒 伴随着您成长 伴随着您进步
JavaScript中的Export和Import与class类用法
JavaScript一般给人印象是种前端脚本语言，没有复杂的类构造，而实际它一门既简单又复杂的语言，说它用来简单控制网页元素很轻松实现，说它复杂它也可以像java、C#语言那样进行class类构造，引入类也可以像java语言那样通过Import那样引入类，而C#则是using引入，除此JavaScript还可以结合node.js框架开发服务器应用，对数据库操作管理。本文主要讲解JavaScript中的class类与Export和Import用法，本文适合有其他高级程序语言开发经验读者（如：C++、C#、java、VB等任意一种），否则文章示例难以上手理解面向对象和类构造。
Export和Import用法
通过简单的示例演示Export和Import的用法，先建立一个JavaScript文件命名为“userMessage.js”，在里面写入两个方法“name(user)”和“age(age)”分别用来传姓名和年龄，追加“export { name, age}; ”这样外部调用才可访问name和age方法，然后新建一个html网页文件命名“HtmlPage1.html”，有JavaScript基础的知道，如果调用js脚本文件，需要写入 <script src="**.js" type="text/javascript"></script>才可引入，本文的示例介绍Import用法通过<script type="module"> </script>在里面写入 import { name, age } from './userMessage.js'; 这样也就将name和age两个方法引入了进来，如下代码：
/*Copyright(C) 遺昕传媒|Weisim3.com 08.02.2022*/
/*JavaScript中的Export和Import与class类用法*/
/*建立userMessage.js文件*/
// 姓名
function name(user) {
alert(`姓名： ${user}!`);
}
//年龄
function age(age) {
alert(`年龄： ${age}`);
}
export { name, age}; // 输出姓名name、年龄age
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="module">
/*Copyright(C) 遺昕传媒|Weisim3.com 09.24.2022*/
/*JavaScript中的Export和Import与class类用法*/
/*创建HtmlPage1.html文件*/
import { name, age } from './userMessage.js';//引入userMessage.js中的name和age方法
name("Jessica");
age("26");
</script>
</head>
<body>
</body>
</html>
下面是执行效果，可以看到弹出了输入的姓名name“Jessica”和年龄age“26”，如下图：
import 也可以通过”import * as“ 定义一个对象名，如示例” import * as user from './userMessage.js'“这里的user则是定义了一个对象实例，通过user可以直接访问userMessage.js中的name和age两个方法，同样会执行弹出提示，如下代码：
// import * as 定义user实例，通过user访问
import * as user from './userMessage.js';
user.name("刘东");
user.age(28)
接着在userMessage.js文件中指定默认输出方法，这里用到export default，示例：“export default function userInfo(name, age)”默认输出userInfo方法，然后再在“HtmlPage1.html”写入：” import userInfo from './userMessage.js'；“此处通过import直接定义userInfo实例，这里可以随意定义，因为在userMessage.js中已经指定了默认的输出方法，所以都会默认执行到userInfo(name, age)方法。如下详细代码：
/* Copyright(C) 遺昕传媒|Weisim3.com 08.02.2022*/
/*JavaScript中的Export和Import与class类用法*/
/*建立userMessage.js文件*/
// 姓名
function name(user) {
alert(`姓名： ${user}!`);
}
//年龄
function age(age) {
alert(`年龄： ${age}`);
}
export { name, age }; // 输出姓名name、年龄age
//默认输出
export default function userInfo(name, age) {
return alert(`姓名：${name}, 年龄：${age}`);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="module">
/* Copyright(C) 遺昕传媒|Weisim3.com 09.24.2022*/
/*JavaScript中的Export和Import与class类用法*/
/*创建HtmlPage1.html文件*/
import { name, age } from './userMessage.js';
name("Jessica");
age("26");
//import * as 定义user实例，通过user访问
import * as user from './userMessage.js';
user.name("刘东");
user.age(28)
//在userMessage.js通过default关键字指定默认输出userInfo方法
import userInfo from './userMessage.js';
userInfo("Tang", 24);
</script>
</head>
<body>
</body>
</html>
如下图：
另一种写法，还可以直接输出变量，如在userMessage.js文件中定义”const UserInfo = "姓名：tang，age：28";“，然后追加”export default UserInfo;“这样默认就输出了UserInfo这个变量值，再在引入页写入”import users from './userMessage.js';“，直接弹出”alert(users);“，需要注意的是：每个js文件里面只可以设置一个默认输出标识，也就是说”export default“组合关键字只可以出现一次，否则出现异常报错”Uncaught SyntaxError: Duplicate export of 'default'“，也就是说的重复导出。还有一个需要注意：每个“export default”或“export”都要对应一个“import”，否则也会跳出异常错误：“Uncaught TypeError: userInfo is not a function”无法找到要import的内容。
//默认输出变量
const UserInfo = "姓名：tang，age：28";
export default UserInfo;
//在userMessage.js通过default关键字指定默认输出UserInfo变量值
import users from './userMessage.js';
alert(users);
Export和Import与class类用法
下面在JavaScript中建立class类，并且使用export default输出类，新建”UserInfo.js“写如class类，类命名为” UserInfo“，通过关键字“constructor”初始化方法，加入id、name、age三个属性，然后再在”HtmlPage1.html“导入import UserData from './UserInfo.js'，将UserInfo属性示例化，付予Id、name、age具体的值，用详细代码如下：
/* Copyright(C) 遺昕传媒|Weisim3.com 08.02.2022*/
/*JavaScript中的Export和Import与class类用法*/
/*建立UserInfo.js文件,建立UserInfo类默认输出*/
export default class UserInfo {
constructor(id, name, age) {
this.id = id;
this.name = name;
this.age = age;
}
}
<script type="module">
/* Copyright(C) 遺昕传媒|Weisim3.com 09.24.2022*/
/*JavaScript中的Export和Import与class类用法*/
/*创建HtmlPage1.html文件*/
import { name, age } from './userMessage.js';
name("Jessica");
age("26");
//import * as 定义user实例，通过user访问
import * as user from './userMessage.js';
user.name("刘东");
user.age(28)
//在userMessage.js通过default关键字指定默认输出userInfo方法
//import userInfo from './userMessage.js';
//userInfo("Tang", 24);
//在userMessage.js通过default关键字指定默认输出UserInfo变量值
import users from './userMessage.js';
alert(users);
//导入class类通过default关键字指定默认输出UserInfo类
import UserData from './UserInfo.js'
var userTem = new UserData(1, "Jessica", 26);
alert("用户Id:" + userTem.id + "\n用户名：" + userTem.name + "\n年龄：" + userTem.age);
</script>
执行如下图：
补充constructor说明： 是一种用于创建和初始化class创建的对象的特殊方法。详细可以参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/constructor
异常提示：下载源代码文件在启动“localhost”环境下可以执行（localhost有过asp.net、jsp、php开发经验朋友，再熟悉不过，这里不作解释），发布在服务器下通过域名或IP访问页面可以执行，直接在本地文件夹打开“HtmlPage1.html”无法执行，报错：“ from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, chrome-untrusted, https, isolated-app.”大概意思是在网络协议下才可正常访问运行程序。
