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文件 导出多个方 ...
随机推荐
- Kubernetes(k8s)pod详解
一.简介 在Kubernetes集群中,Pod是所有业务类型的基础,也是K8S管理的最小单位级,它是一个或多个容器的组合.这些容器共享存储.网络和命名空间,以及如何运行的规范.在Pod中,所有容器都被 ...
- MySql 入门——日期计算
MySQL自带的日期函数TIMESTAMPDIFF计算两个日期相差的秒数.分钟数.小时数.天数.周数.季度数.月数.年数,当前日期增加或者减少一天.一周等等 SELECT TIMESTAMPDIFF( ...
- 多线程JUC练习
package com.aliyun.test.learn; import java.util.concurrent.*; import java.util.concurrent.locks.Reen ...
- 我亲自整理的Tampermonkey(以下简称tm)v4.13.6136的编辑器按键映射(基于联想笔记本键盘+win10+火狐浏览器企业版)
警告:你可以对该随笔内容进行转载,但必须写明其来源网址,以及其作者是博客园的zqdlly,否则后果自负!不要小看了我,我一定会让你付出你应得的成本. 0. 家喻户晓的 键 原生comment myMe ...
- class1,2,3,4,5,6,7
//测试你是哪一类学者 #include<stdio.h> int main() { int ans; char words[5000]; printf("网课学习让一些人喜一些 ...
- OpenJudge2811:熄灯问题(枚举)
熄灯问题 有一个由按钮组成的矩阵,其中每行有6个按钮,共5行.每个按钮的位置上有一盏灯.当按下一个按钮后,该按钮以及周围位置(上边.下边.左边.右边)的灯都会改变一次.即,如果灯原来是点亮的,就会被熄 ...
- go 发布
rm test-serv.bingo build -o test-serv.bin main.go
- Go语言 :使用简单的 for 迭代语句进行 TDD 驱动测试开发与 benchmark 基准测试
前提准备与运行环境请参考:(新手向)在Linux中使用VScode编写 "Hello,world"程序,并编写测试-Ubuntu20.4 在 Go 中 for 用来循环和迭代, ...
- day09-拦截器&文件上传
拦截器&文件上传 1.拦截器-Interceptor 1.1拦截器概念 拦截器 拦截器(Interceptor):是一种动态拦截方法调用的机制,在SpringMVC中动态拦截控制器方法的执行. ...
- 最大流基础(Maximum Flow Basis)
1. 最大流问题定义 1.1 流网络(Flow network) Def. A flow network is a tuple \(G = (V, E, s, t, c)\): Digraph \(( ...