ECMAScript 6 (ES6) module模块 案例
简单使用
创建一个js文件。
//Say 模块
export function Say(words){
alert(words);
}
H5调用模块
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>ES 6 Module</title>
</head>
<body>
<script type="module">
import {Say} from "./OneModuleOneFile.js";
Say('你好,module')
</script>
</body>
</html>
打开页面
注意：H5的script type需要指定module
一个JS文件多个Module模块
export function SayHello(){
console.log('SayHello:Hello')
}
export function SayES6(){
console.log('SayES6:ES6')
}
// export default function SayDefault(){
// console.log('SayDefault:Default...')
// }
//default还可以这样
export default {
hi(){
console.log('df-hi')
},
hello(){
console.log('df-hello')
}
}
function SayFn1(){
console.log('SayFn1:Fn1')
}
function SayFn2(){
console.log('SayFn2:Fn2')
}
function SayFn3(){
console.log('SayFn3:Fn3')
}
const fnVersion = '3.0';
//先声明函数或变量再导出
export {SayFn1,SayFn2,SayFn3,fnVersion}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>ES 6 Module</title>
</head>
<body>
<script type="module">
// import SayDefault from "./MultiModuleOneFile.js";
import {SayHello,SayES6,default as dff,SayFn1,SayFn2,SayFn3,fnVersion} from "./MultiModuleOneFile.js";
dff.hi();
SayES6();
console.log('fnVersion:',fnVersion)
</script>
</body>
</html>
打开页面，打开控制台：
可以看到运行结果没啥问题。
对象（class）模块module
'use strict';
export class Say{
//构造函数
name;
constructor(name){
this.name = name;
}
hi(){
console.log('Say.hi');
}
hello(){
console.log('Say.hello');
}
words(words){
console.log('Say.',words,' name:',this.name);
}
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Object Module</title>
</head>
<body>
<script type="module">
import {Say} from "./ObjectModuleFile.js";
let say=new Say('我是构造参数');
say.words('我是words参数');
</script>
</body>
</html>
打开页面结果：
https://blog.xqlee.com/article/2408031549453932.html
评论
相关文章
简单使用创建一个js文件。//Say 模块export function Say(words){ alert(words);}H5调用模块<!DOCTYPE h
Import Maps是一种针对web页面去控制imports行为的新方式，潜在地可以使你摈弃掉你的构建系统。当Es modules在Ecmascript 20
主流模块规范目前主流模块规范有：规范名称运行环境实现加载方式AMD(异步模块定义)客户端require.js异步CMD(通用模块定义)客户端sea.js异步Co
Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了
前言在其他编程语言中，我们可以通过划分模块，来组织庞大复杂的项目，而JS一开始并没有模块的概念，因为一开始JS的脚本就很简单。后来随着JS的发展，前端要开发的项
centos6 yum安装redis3.29,centos6 源码安装redis以及常用配置
环境JDK 17Spring Boot 3.2.1-3.2.3Spring Security 6.2.1-6.3.1Spring Security 权限/角色常
javascript中onclick事件传递对象参数,javascript,javascript传递对象参数
centos6源码安装MySQL5.6
根据xpenology论坛资料显示，黑群晖的6.2.3 25426 update3版本更新将会大面积失败
JavaScript/JS数组清空，删除数组内所有数据。Array=[]与Array.length=0的区别