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的发展，前端要开发的项
DHCPv6自动分配分为DHCPv6有状态自动分配和DHCPv6无状态自动分配。DHCPv6有状态自动分配。DHCPv6服务器自动配置IPv6地址/前缀，同时分
WAN6配置此处示例图以WiFi无线中继，取名WWAN6 和 WAN6 相同首先新建WAN6，协议dhcpv6 client，firewall zone改成wa
DHCPv6前缀代理DHCPv6 PD(Prefix Delegation)是一种前缀分配机制，并在RFC3633中得以标准化。在一个层次化的网络拓扑结构中，不
概述OpenWRT 二级路由实现IPv6中继（IPv6中继模式又称之为：IPv6穿透、IPv6 Passthrough），IPv6由于底层设计原因，NAT6模式
概述Windows ipv6如何查看，Windows ipv6的几种类型解析，包括：IPv6 地址 临时IPv6地址 本地链接IPv6地址 对比区别总结，默认网
centos6 yum安装redis3.29,centos6 源码安装redis以及常用配置