1.引入外部文件:

<script src='文件路径' type='module'><!--PS:这个type="module" 必须要写,否则浏览器会报错-->

  2.标签内嵌式:

<script type='module'><!--PS:这个type="module" 必须要写,否则浏览器会报错-->
</script>

  上述两种任意一种都可,

  然后在外部文件或script标签之间写入代码

关于引入的方式:

//模块引入

//1.通用的导入方式
//引入index1.js
import * as index1 from './index1.js';
console.log(index1);
index1.print('通用方式导入-分别暴露',index1.name); //引入index2.js
import * as index2 from './index2.js';
console.log(index2);
index2.print('通用方式导入-统一暴露',index2.name); //引入index3.js
import * as index3 from './index3.js';
console.log(index3);
index3.default.print('通用方式导入-默认暴露',index3.default.name); //2.解构赋值形式
import {name, print} from './index1.js';
print('解构赋值形式导入-分别暴露',name); //重复的名字可以用别名
import {name as retrace, print as println} from './index2.js';
println('解构赋值形式导入-统一暴露',retrace); import {default as index} from './index3.js';
index.print('解构赋值形式-默认暴露',index.name); //3.简便形式 针对默认暴露
import m3 from './index3.js';
m3.print('简便形式-针对默认暴露',m3.name);

  其中index1.js

//分别暴露
//要暴露的属性
export let name = 'retrace';
//要暴露的方法
export function print(method,msg){
console.log(method,'index1.js','打印数据:',msg);
}

  index2.js

//统一暴露

let name = 'retrace';

function print(method,msg){
console.log(method,'index2.js','打印数据:',msg);
} export {
name,
print
}

  index3.js

//默认暴露
export default {
name:'retrace',
print:function (method,msg){
console.log(method,'index3.js','打印数据:',msg)
}
}

ES6模块化之import的使用方式的更多相关文章

  1. ES6 模块化(Module)export和import详解 export default

    ES6 模块化(Module)export和import详解 - CSDN博客 https://blog.csdn.net/pcaxb/article/details/53670097 微信小程序笔记 ...

  2. ES6模块化

    关于ES6模块化 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require ...

  3. ES6模块化与常用功能

    目前开发环境已经普及使用,如vue,react等,但浏览器环境却支持不好,所以需要开发环境编译,下面介绍下开发环境的使用和常用语法: 一,ES6模块化 1,模块化的基本语法 ES6 的模块自动采用严格 ...

  4. ES6模块化操作

    在ES5中我们要进行模块化操作需要引入第三方类库,随着前后端分离,前端的业务日渐复杂,ES6为我们增加了模块化操作.模块化操作主要包括两个方面. export :负责进行模块化,也是模块的输出. im ...

  5. 通过ES6 Module看import和require区别

    前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...

  6. amd、cmd、CommonJS以及ES6模块化

    AMD.CMD.CommonJs.ES6的对比 他们都是用于在模块化定义中使用的,AMD.CMD.CommonJs是ES5中提供的模块化编程的方案,import/export是ES6中定义新增的 什么 ...

  7. ES6——模块化

    模块化 模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来. 一.浏览器使用ES6模块化方式一 使用script标签,将type属性设置为module,然后在script中书写代码 ...

  8. CommonJS、AMD、CMD和ES6模块化区别

    本文参考自:https://www.cnblogs.com/chenguangliang/p/5856701.html 1.CommonJS NodeJS是CommonJS规范的实现,webpack ...

  9. javascript ES6模块化

    一.将模块导出去 /* *将模块导出去 *a.js文件 */ const a=12; export default a; /* *将模块导出去 *b.js文件 */ const a=5; export ...

  10. ES6 模块化与 CommonJS 模块化

    ES6 模块化 import命令用于输入其他模块提供的功能;export命令用于规定模块的对外接口. export 可以有多个,export default 仅有一个 a.js 模块a文件 导出多个方 ...

随机推荐

  1. windows服务器部署mysql

    一.Mysql安装教程就不上传了,百度很多的很详细的. 二.配置环境变量:我的电脑右键=>属性=>高级系统设置=>环境变量=>系统变量下找到Path,选中编辑, 变量值后面添加 ...

  2. jenkins启动失败,查看状态提示active(exited)

    chown -R jenkins:jenkins /var/lib/jenkins chown -R jenkins:jenkins /var/cache/jenkins chown -R jenki ...

  3. 6 Sampling Configuration Space: 6.4 Adaptive Steered Molecular Dynamics

    6.4 Adaptive Steered Molecular Dynamics 理论背景: SMD 利用施加steering力的伪粒子,以便以特定速度穿过反应坐标. 这个外力允许人们在MD模拟时间尺度 ...

  4. Unity泛型单例模式

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class Singleto ...

  5. supervisor不一样的日志轮转

    出于项目需求,需要读取某个进程的最新日志,而这个进程刚好是supervisor管控. 很自然地我就想到了,根据日志的编辑时间排序,获取最新的日志文件. 然而,发现了奇怪的一幕: 发现什么没有? web ...

  6. 如何利用Apifox通过签名计算及数据加解密进行用户认证接口测试?

    用户注册场景:输入签名数据signature,appId,13位时间戳timestamp,6位随机数nonce,merchantId(非必填,本次不填)的请求参数发送给服务器,服务器返回响应数值后,校 ...

  7. RPA的市场定义和企业选型

    RPA(Robotic Process Automation)译为机器人流程自动化,又可以称为数字化劳动力,是一种智能化软件,通过模拟并增强人类与计算机的交互过程,实现工作流程中的自动化.RPA具有对 ...

  8. ASP.NET Core - 选型系统之选型配置

    1. 选项 前面讲完了.NET Core 下的配置系统,我们可以通过 IConfiguration 服务从各种来源的配置中读取到配置信息,但是每次要用的时候都通过 Iconfiguration 读取配 ...

  9. 从头开始——重新布置渗透测试环境的过程记录(From Windows To Mac)

    因为疫情和工作的原因,2022年整整一年我基本没有深度参与过网络安全和渗透测试相关的工作. 背景:之前因为使用习惯,一直使用的是ThinkPad X1 Extreme,可联想的品控实在拉胯,奈何Thi ...

  10. 基于Kafka和Elasticsearch构建实时站内搜索功能的实践

    作者:京东物流 纪卓志 目前我们在构建一个多租户多产品类网站,为了让用户更好的找到他们所需要的产品,我们需要构建站内搜索功能,并且它应该是实时更新的.本文将会讨论构建这一功能的核心基础设施,以及支持此 ...