logo
  2. 首页
  3. 教程分享
  4. WEB技术
  5. JavaScript
  6. ECMAScript 6 (ES6) module模块 案例
  7. 详情

ECMAScript 6 (ES6) module模块 案例

教程分享 > WEB技术 > JavaScript (417) 2024-08-06 14:27:26
佛西传递

简单使用

创建一个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>

打开页面

ECMAScript 6 (ES6) module模块 案例_图示-a8c1c339d6b745a5b5d9f5cf3bf2865a.png
运行内容

注意：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>

打开页面，打开控制台：

ECMAScript 6 (ES6) module模块 案例_图示-9ca8735262944ceeaaab0abd7ebbeeee.png
输出内容

可以看到运行结果没啥问题。

 

对象（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>

打开页面结果：

ECMAScript 6 (ES6) module模块 案例_图示-bd3c6ca95dcd46c798880affd1344a3d.png

 

 

 

 

https://www.leftso.com/article/2408031549453932.html
相关文章
ECMAScript 6 (ES6) module模块 案例
ECMAScript 6 (ES6) module模块 案例
简单使用创建一个js文件。//Say 模块export function Say(words){ alert(words);}H5调用模块&lt;!DOCTYPE h
ES6 module JavaScript ECMAScript 6
JavaScript ES6 importmap详解
JavaScript ES6 importmap详解
Import Maps是一种针对web页面去控制imports行为的新方式，潜在地可以使你摈弃掉你的构建系统。当Es modules在Ecmascript 20
JavaScript ES6 importmap
JavaScript 主流模块(module)规范
JavaScript 主流模块(module)规范
主流模块规范目前主流模块规范有：规范名称运行环境实现加载方式AMD(异步模块定义)客户端require.js异步CMD(通用模块定义)客户端sea.js异步Co
JavaScript ES6 module
设置Intellij Idea支持JS ES6语法
设置Intellij Idea支持JS ES6语法
在IDEA中对如下标签进行修改：File-&gtl;settings-&gtl;Languages & Frameworks-&gtl;JavaScript 中的参数JavaScript lan...
idea java
ES6 Promise 对象详解
ES6 Promise 对象详解
Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了
JavaScript ES6 Promise JS
JavaScript Module 理论课
JavaScript Module 理论课
前言在其他编程语言中，我们可以通过划分模块，来组织庞大复杂的项目，而JS一开始并没有模块的概念，因为一开始JS的脚本就很简单。后来随着JS的发展，前端要开发的项
JavaScript module JavaScript module
javascript中onclick事件传递对象参数
javascript中onclick事件传递对象参数
javascript中onclick事件传递对象参数,javascript,javascript传递对象参数
javascript javascript传递对象参数
JavaScript/JS数组删除指定元素
JavaScript/JS数组删除指定元素
方式一 spliceJavaScript 中的 splice() 方法可用于在数组中添加或删除元素。如果我们需要删除数组中的元素，可以使用 splice() 方
JavaScript JS JS数组 JavaScript数组
JavaScript/JS数组清空
JavaScript/JS数组清空
JavaScript/JS数组清空，删除数组内所有数据。Array=[]与Array.length=0的区别
JavaScript Array JS数组
JavaScript H5原生操作元素class
JavaScript H5原生操作元素class
JavaScript H5原生操作元素class，包括获取元素class值，设置class值修改元素class值操作。示例数据 &lt;head&gtl; &lt;meta cha
H5 JavaScript JS js原生操作属性
JavaScript 小数 加法、减法、乘法、除法精确计算
JavaScript 小数 加法、减法、乘法、除法精确计算
​JavaScript 数学小数精确计算&lt;!DOCTYPE html&gtl; &lt;html&gtl; &lt;head&gtl; &lt;title&gtl;&lt;/tit...
JavaScript 小数
JavaScript正则加上/去掉cdn域名前缀
JavaScript正则加上/去掉cdn域名前缀
JavaScript正则加上/去掉cdn域名前缀,文本支持&lt;script&gtl;let $domain="https://static-project.example
JavaScript 正则表达式 js替换域名
JavaScript创建对象
JavaScript创建对象
JavaScript语言中对象的创建和使用
JavaScript 对象
JavaScript 对象属性遍历复制
JavaScript 对象属性遍历复制
&lt;body&gtl; &lt;script type="text/javascript"&gtl;   function test(){     let obj={        ...
js对象复制 js对象属性遍历 js对象属性动态获取 js属性动态赋值
JS onclick 传递多个字符变量参数
JS onclick 传递多个字符变量参数
javascript（js）onclick 传递多个字符变量参数&lt;a title="点击下载附件" onclick="downloadFile(\''+row.url+'\',\''+ro...
onclick JavaScript js传递多个参数
热门文章
学习java垃圾回收
学习java垃圾回收
[Java教程]
Java 9 紧凑String改进[JEP 254]Java9新特性
Java 9 紧凑String改进[JEP 254]Java9新特性
[Java教程]
xcopy 复制点（.）开头的隐藏文件到用户主目录
xcopy 复制点（.）开头的隐藏文件到用户主目录
[Java教程]
Java EE 8 JSON Pointer讲解
Java EE 8 JSON Pointer讲解
[JavaScript]
spring boot 入门 整合security jpa角色和权限的实现
spring boot 入门 整合security jpa角色和权限的实现
[Spring]