首页 > 下载 > 下载详文:JavaScript中的Export和Import与class类用法

JavaScript中的Export和Import与class类用法

发布时间:2022年09月24日 18时26分06秒   属性:程序Web开发 > Javascript/Html    访问次数:64457
字体: 初始 添加收藏 分享给好友

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两个方法引入了进来,如下代码:

JavaScript 代码  复制
/*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

JavaScript 代码  复制
<!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两个方法,同样会执行弹出提示,如下代码:

JavaScript 代码  复制
   // 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)方法。如下详细代码:

userMessage.js 代码  复制
/* 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}`);
}
HtmlPage1.html 代码  复制
<!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的内容。

JavaScript 代码  复制
//默认输出变量
const UserInfo = "姓名:tang,age:28";
export default UserInfo;
HTML 代码  复制
//在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具体的值,用详细代码如下:

UserInfo.js 代码  复制
/* 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;
}
}
HtmlPage1.html 代码  复制
<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.”大概意思是在网络协议下才可正常访问运行程序。

免费
JavaScript中的Export和Import与class类用法 (11)
本下载连接不支持第三下载工具打开,请直接点击下载即可
文章版权归属weisim3.com所有,未经书面版权许可同意,不得私自转载(或做修改转载),源文件示例仅供学习使用,更不要出于商业用途或印刷出版发行!否则将追究其相关法律责任,版权联系QQ:729260499。
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .