ES6模块化之import的使用方式
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的使用方式的更多相关文章
- ES6 模块化(Module)export和import详解 export default
ES6 模块化(Module)export和import详解 - CSDN博客 https://blog.csdn.net/pcaxb/article/details/53670097 微信小程序笔记 ...
- ES6模块化
关于ES6模块化 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require ...
- ES6模块化与常用功能
目前开发环境已经普及使用,如vue,react等,但浏览器环境却支持不好,所以需要开发环境编译,下面介绍下开发环境的使用和常用语法: 一,ES6模块化 1,模块化的基本语法 ES6 的模块自动采用严格 ...
- ES6模块化操作
在ES5中我们要进行模块化操作需要引入第三方类库,随着前后端分离,前端的业务日渐复杂,ES6为我们增加了模块化操作.模块化操作主要包括两个方面. export :负责进行模块化,也是模块的输出. im ...
- 通过ES6 Module看import和require区别
前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...
- amd、cmd、CommonJS以及ES6模块化
AMD.CMD.CommonJs.ES6的对比 他们都是用于在模块化定义中使用的,AMD.CMD.CommonJs是ES5中提供的模块化编程的方案,import/export是ES6中定义新增的 什么 ...
- ES6——模块化
模块化 模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来. 一.浏览器使用ES6模块化方式一 使用script标签,将type属性设置为module,然后在script中书写代码 ...
- CommonJS、AMD、CMD和ES6模块化区别
本文参考自:https://www.cnblogs.com/chenguangliang/p/5856701.html 1.CommonJS NodeJS是CommonJS规范的实现,webpack ...
- javascript ES6模块化
一.将模块导出去 /* *将模块导出去 *a.js文件 */ const a=12; export default a; /* *将模块导出去 *b.js文件 */ const a=5; export ...
- ES6 模块化与 CommonJS 模块化
ES6 模块化 import命令用于输入其他模块提供的功能;export命令用于规定模块的对外接口. export 可以有多个,export default 仅有一个 a.js 模块a文件 导出多个方 ...
随机推荐
- 第二章 excel的快捷键操作
本章介绍excel中部分常用的快捷键 1.文件类 工作簿操作:Ctrl + N 新建:Ctrl + w 关闭当前:Ctrl + S 保存 F12 当前另存为 Ctrl + p 打印当前 2.通用类 C ...
- 关于UPD章节学习的一些感想
课程看到了UDP, 首先了解UDP的原理模型. 服务端,首先是实例QUdpSocket,也就是UDP套接字,然后,需要绑定.绑定一个任意IP地址,分为IPV4和IPV6.自行选择课程中讲解时绑定的是I ...
- Nginx配置ThinkPHP3.1的PATHINFO模式
location / { if (!-e $request_filename) { rewrite ^/(.*)$ /index.php?$1 last; bre ...
- loadrunner获取当前年月日时分秒 时间
loadrunner获取当前年月日时分秒 时间 lr_save_datetime ("%Y-%m-%d %H:%M:%S",DATE_NOW+TIME_NOW,"crea ...
- 2022中职组网络空间安全 A模块
A-1任务一 登录安全加固 1.密码策略(Windows,Linux) 主要是针对windows和Linux的系统加固,类似于运维的题目 a.设置最短密码长度为15: 这里并没有说明具体是Window ...
- Solon2 分布式事件总线的技术价值?
分布式事件总线在分布式开发(或微服务开发)时,是极为重要的架构手段.它可以分解响应时长,可以削峰,可以做最终一致性的分布式事务,可以做业务水平扩展. 1.分解响应时长 比如我们的一个接口处理分为四段代 ...
- 使用nsis美化安装向导后,安装时实现浏览器自定义协议打开
1. electron官方提供api,支持向注册表中写入协议,可通过浏览器打开 app.setAsDefaultProtocolClient('open-electron') 问题:1. 因为该方法时 ...
- 【LeetCode贪心#11】单调递增的数字(详解)
单调递增的数字 力扣题目链接(opens new window) 给定一个非负整数 N,找出小于或等于 N 的最大的整数,同时这个整数需要满足其各个位数上的数字是单调递增. (当且仅当每个相邻位数上的 ...
- 如何提取 x64 程序那些易失的方法参数
一:背景 1. 讲故事 最近经常遇到有朋友反馈,在 x64 环境下如何提取线程栈中的方法参数,熟悉 x64 调用协定的朋友应该知道,这种协定范围下,方法的前四个参数都是用寄存器传递的,比如rcx,rd ...
- 仓库管理、dockerfile
Docker仓库管理 仓库(Repository)是集中存放镜像的地方. Docker Dockerfile 什么是Dockerfile? Dockerfile 是一个用来构建镜像的文本文件, ...