【ES】笔记-ES6模块化

暴露数据引入模块语法

  • 规范
    • 基本语法
      • 分别暴露 (按需暴露)
      • 统一暴露 export {暴露内容1,暴露内容2}
      • 默认暴露 (适合只暴露一个数据) 只能暴露一次
      • 同时使用
      • 在app.js中引入

规范

  • 每个文件都是一个模块
  • 要借助Babel和Browserify依次编译代码,才能在浏览器端运行
  • Bebel中文网:https://www.bebeljs.cn/
  • Babel可以把es6转成es5

基本语法

模块暴露数据
1、分别暴露 (按需暴露) export 暴露内容
2、统一暴露 export {暴露内容1,暴露内容2}
3、默认暴露 export defalut 暴露内容

分别暴露 (按需暴露)

export const data='asheh'
export const msg='ssss'
export function showMsg(){console.log(msg);
}
export function showData() {console.log(');
}

补充:准备相关依赖包(为编译代码做准备)
全局安装:babel-cli、Browserify :npm install babel-cli browserify -g
局部安装:babel-preset-es2015: npm install babel-preset-es2015
建立.babelrc文件

{"presets0"["es2015"]
}

}
执行babel ./ -d
翻译 browserify ./build/app.js -o ./build/build.js

统一暴露 export {暴露内容1,暴露内容2}

const school='尚硅谷'
const person={name:'老刘',age:18,sex:'女'
}
function getLaoliu(){console.log(person)
}
//统一暴露--常用`在这里插入代码片`
export {school,person,getLaoliu}
//支持改名
export {school as school ,person as person,getLaoliu as getLaoliu}

默认暴露 (适合只暴露一个数据) 只能暴露一次

export default {name:"wc",age:5
}

同时使用

# [分别暴露]
export const teacher1={name:'强哥',age:15}
export const teacher2={name:'ke 哥',age:35}
# [统一暴露]
const stu1= {name:'网哥',age:25}
const stu1= {name:'掌声',age:33}
export {stu1,stu2}# [默认暴露]
export default{school:'上海dax',address:'shanghai',subject:['计算机','java','大数据']
}

在app.js中引入

# 引入【分别暴露】模块
import {data,msg,showData,showMsg} form './module1' # 注意不是解构赋值# 引入【分别暴露】模块 + 打包加入
import * form './module1'# 引入【分别暴露】模块 + 重命名
import {data as data2} form './module2'# 引入【统一暴露】模块 (和上面三种一样)
import {school as sc,person,getLaoliu} form './module3'# 引入【默认暴露】模块 
import module4 form './module4'# 引入多种暴露方式
import module5,{teacher1,teacher2,stu1,stu2} from './module5'

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/98061.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电脑散热——液金散热

目录 1.简介 2.传统硅脂与液金导热区别 3.特点 4.优点 5.为什么液金技术名声不太好 6.使用方法 1.简介 凡是对于电脑基础硬件有所了解的人,都知道硅脂是如今高性能电脑设备中必不可少的东西。芯片表面和散热器接触面,虽然肉眼看上去是非常光滑的金属…

屏幕分辨率:PC / 手机 屏幕常见分辨率,前端如何适配分辨率

一、常见的PC屏幕分辨率 序号水平像素点数和垂直像素点数也被称为常见显示器11366 768720p 或 HD Ready常见于笔记本电脑和低端桌面显示器21920 10801080p 或 Full HD / 全高清高端笔记本电脑和中高档台式机32560 14402K 分辨率常见于高端笔记本电脑和高端台式机43840 216…

CSS3实现动画加载效果

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>加载效果</title><link rel"style…

C++基础——基础语法

1 注释 C支持单行注释和多行注释。 单行注释 // 注释内容单行注释直到改行末尾&#xff0c;可以与代码放在同一行&#xff0c;在代码后面注释 多行注释 /* 注释内容 */包含在其中的都会被注释 2 变量 变量的作用是给指定的内存空间起名&#xff0c;方便操作这段内存。变…

开启AI大模型时代|「Transformer论文精读」

论文地址: https://arxiv.org/pdf/1706.03762v5.pdf 代码地址: https://github.com/tensorflow/tensor2tensor.git 首发&#xff1a;微信公众号「魔方AI空间」&#xff0c;欢迎关注&#xff5e; 大家好&#xff0c;我是魔方君~~ 近年来&#xff0c;人工智能技术发展迅猛&#…

图论---最短路径问题

解决图论问题中的最短路径问题一般有四种算法&#xff0c;分别是Floyd算法、Dijkstra算法、Bellman-Ford算法和SPFA算法&#xff0c;下面介绍一下这几种算法的模板和原理用途。 Floyd算法 原理&#xff1a;Floyd本质上是一个动态规划的思想&#xff0c;每一次循环更新经过前k…

你的librosa和scikit-learn打架了吗?

被这个问题困扰好久&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 我的原来版本librosa0.7.1 和 scikit-learn1.3.1 一直拆了按&#xff0c;按…

TypeScript应用

目录 TypeScript应用defineProps的TS写法defineEmits的TS写法ref的TS写法1.简单数据类型2.复杂数据类型 reactive的TS写法1.默认值属性是固定的2.根据默认值推导不出我们需要的类型 computed和TS事件处理与TSTemplate Ref与TS非空断言TypeScript类型声明文件TS类型声明文件是什…

【UE5 Cesium】15-Cesium for Unreal 加载本地影像和地形

目录 一、加载全球无高度地形 二、加载区域DEM 三、加载离线地图影像 一、加载全球无高度地形 1. 先去如下网址下载全球无高度地形&#xff1a;Using a global terrain layer without height detail - #9 by RidhwanAziz - Cesium for Unreal - Cesium Community 下载后如下…

好物周刊#12:计算机考研资料

https://cunyu1943.github.io https://yuque.com/cunyu1943 村雨遥的好物周刊&#xff0c;记录每周看到的有价值的信息&#xff0c;主要针对计算机领域&#xff0c;每周五发布。 一、项目 1. JEECG BOOT 低代码开发平台 一款基于代码生成器的低代码开发平台&#xff01;前后…

scala数组函数合集

目录 1. 添加类函数 2.生成类函数 3.删除类函数 4.查找类函数 5.统计类函数 6.修改类函数 7.判断类函数 8.获取集合元素 9.集合操作类函数 10.转换类函数 11.工具类函数 12.集合内与集合间计算函数 在 scala 中Array数组是一种可变的、可索引的数据集合 创建数组…

FFmpeg合并多个音频并解决声音变小的方法

在制作或编辑视频时,音频是一个重要的组成部分。但是当尝试使用FFmpeg在MP4视频中插入多个音频时,可能会遇到声音变小的问题。 本文将详细解释这一现象的原因,并提供代码示例来解决这一问题。 文章目录 多个音频插入MP4声音变小原因Python合并音频和解决办法FFmepg合并音频…

优秀程序员是怎么思考的?

首发日更公 Z 号&#xff1a;十二又十三 作为一名优秀的程序员&#xff0c;思考是我们工作中最重要的一部分。它不仅能够帮助我们解决问题&#xff0c;还能够提升我们的技术水平和职业发展。那么&#xff0c;优秀程序员是如何思考的呢&#xff1f;本文将为您介绍一个思考框架和…

想升级macOS Big Sur,但是MacBook内存空间不够该怎么办?

随着使用时间的增长&#xff0c;我们会发现Mac电脑的存储空间越来越少&#xff0c;这时候我们就需要对Mac电脑进行清理&#xff0c;以释放更多的存储空间。那么&#xff0c;Mac空间不足怎么解决呢&#xff1f; 1.清理垃圾文件 Mac空间不足怎么解决&#xff1f;首先要做的就是清…

Linux: 基础IO

学习目标 1.C接口与系统调用接口的差别 2.文件描述符, 重定向, 一切皆文件, 缓冲区 3.fd与FILE, 系统调用和库函数的关系 4.系统中的inode 5.软硬链接 6.动静态库 预备知识 1.文件 内容 属性 2.文件的所有操作: a. 对内容的操作 b.对属性的操作 3.文件在磁盘(硬件)上, 我…

前端—— 分层模型和应用协议

1 分层模型 MAC地址 可以认为计算机专属&#xff0c;可以认为每台计算机的 MAC地址 固定不变&#xff1b; IP地址 可以认为是计算机当前的【家庭地址】&#xff0c;动态唯一&#xff0c;家庭地址变化&#xff0c;IP地址 也跟着变化&#xff1b; 举个例子&#xff0c;A 给 B 发…

MyBatisPlus(十五)分页查询

说明 MyBatisPlus 提供了分页查询的功能。 MyBatisPlus 的分页功能&#xff0c;是通过分页插件实现的。要使用分页功能&#xff0c;需要配置分页插件的拦截器。 MyBatisPlus 的分页功能&#xff0c;可以通过内置的API接口实现&#xff1b;也可以通过自定义的 mapper#method …

consulmanage使用

一、监控自建主机 需要在所有被监控的主机上部署node_exporter收集主机的监控数据 在此页面下载node_exporter安装包 Download | Prometheus 下载后解压安装包&#xff0c;并启动node_exporter服务 mkdir /opt/node_exporter && cd /opt/node_exporter tar -zxvf node_…

C/S架构学习之多线程实现TCP并发服务器

并发概念&#xff1a;并发是指两个或多个事件在同一时间间隔发生&#xff1b;多线程实现TCP并发服务器的实现流程&#xff1a;一、创建套接字&#xff08;socket函数&#xff09;&#xff1a;通信域选择IPV4网络协议、套接字类型选择流式&#xff1b; int sockfd socket(AF_IN…

【计算机视觉|人脸建模】学习从4D扫描中获取的面部形状和表情的模型

本系列博文为深度学习/计算机视觉论文笔记&#xff0c;转载请注明出处 标题&#xff1a;Learning a model of facial shape and expression from 4D scans 链接&#xff1a;Learning a model of facial shape and expression from 4D scans | ACM Transactions on Graphics Pe…