ES6——模块化
模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
一、浏览器使用ES6模块化方式一
使用script标签，将type属性设置为module，然后在script中书写代码。
1 <script type="module">
2 import * as app from "./app.js";
3 </script>
1.1 模块化的好处
防止命名冲突
代码复用
高维护性
1.2 ES6模块化语法
模块化功能只要有两个命令构成：export和import。
export命令用于规定模块的对外接口
import命令用于输入其他模块提供的功能
1.3 ES6暴露模块数据
1.3.1 分别暴露
index1.js
1 //暴露数据：export
2 export let person = '张三';
3
4 export function sayHi(){
5 console.log("你好我是张三");
6 };
index.html
1 <body>
2 <script type="module">
3 //引入index1模块
4 import * as index1 from "./index1.js";
5 console.log(index1);
6 </script>
7 </body>
注：这样的写法在本地会出现跨域问题，通过IP去访问，相当于是通过本地的服务器去访问就不会了，不要通过file协议去访问。也可使用Live Server之类的小型服务器来打开就可以避免以上问题。
1.3.2 统一暴露
index2.js
1 let person = '张三';
2
3 function sing(){
4 console.log("我会唱歌");
5 };
6 //统一暴露
7 export {person, sing};//花括号里边是要暴露的数据
index.html
1 <body>
2 <script type="module">
3 //引入index2模块
4 import * as index2 from "./index2.js";
5 console.log(index2);
6 </script>
7 </body>
1.3.3 默认暴露
index3.js
1 //可以暴露任意类型，对象居多
2 export default {
3 person: '张三',
4 coding: function (){
5 console.log("我在敲代码");
6 }
7 }
index.html
1 <body>
2 <script type="module">
3 //引入index3模块
4 import * as index3 from "./index3.js";
5 console.log(index3);
6 </script>
7 </body>
对于这样一个结构，我们如果想要使用里边的属性或者方法就需要再多加一个default。
1 <body>
2 <script type="module">
3 //引入index3模块
4 import * as index3 from "./index3.js";
5 index3.default.coding();
6 </script>
7 </body>
1.4 ES6引入模块数据语法
1.4.1 通用导入方式
import * as 变量名 from "模块路径";
1.4.2 解构赋值形式
如果有相同的数据名，我们可以给其中一个添加一个别名。
1 import {要暴露的数据名, 要暴露的数据名} from "模块路径";
2 //例
3 //分别暴露
4 import {person,sayHi} from "./index1.js";
5 //起别名（统一暴露），因为和上边分别暴露的person重名了需要起别名
6 import {person as ren, sing} from "./index.js";
7 console.log(ren,sing);
解构赋值对于默认暴露，不能直接使用default必须给它起一个别名。
1 import {default as 别名} from "模块路径";
2 //例（固定写法）
3 import {default as index3} from "./index3.js";
4 console.log(index3);
1.4.3 简便形式
注意：简便形式只能针对默认暴露。
1 import 变量名 from "模块路径";
2 //例
3 import index3 from "./index3.js";
二、浏览器使用ES6模块化方式二
使用一个script中的src属性引一个入口文件，然后设置type属性为module。
1 <script src="./app.js" type="module"></script>
三、babel对ES6模块化代码转换
前边提到的两种使用模块化的方式都存在兼容性的问题，并且ES6模块化还不能直接对npm安装的一些模块进行导入。因此我们在项目当中不会这么引入，而是使用babel做一个转化。
babel是一个JavaScript编译器，它能够将比较新的ES6语法转换成浏览器能够识别的ES5语法。
3.1 安装工具
babel-cli：babel的命令行工具babel-preset-env：预设包，能够将最新的ECMAscript特性进行转换browserify（webpack）：一个打包工具
1.初始化
npm init --yes
2.安装
-D：开发依赖
npm i babel-cli babel-preset-env browserify -D
3.对代码进行转化(局部安装)
第一个参数是原文件的目录
-d：将转换完的结果存在哪
--presets=babel-preset-env：传的参数，可以直接建一个文件
npx babel ES6/23-ES6模块化/js -d dist/js --presets=babel-preset-env
全局安装可以直接使用babel。
4.打包
第一个参数是原文件的目录
-o：输出
npx browserify dist/js/app.js -o dist/bundle.js
5.在页面上引用
1 <script src="../dist/bundle.js"></script>
四、ES6模块化引入NPM包
需求：使用jQuery对文件进行背景色修改。
要想使用npm包
1.安装所需包
npm i jquery
2.import 变量名 from "要导入的模块名";
import $ from "jquery";
ES6——模块化的更多相关文章
- ES6模块化
关于ES6模块化 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require ...
- ES6模块化与常用功能
目前开发环境已经普及使用,如vue,react等,但浏览器环境却支持不好,所以需要开发环境编译,下面介绍下开发环境的使用和常用语法: 一,ES6模块化 1,模块化的基本语法 ES6 的模块自动采用严格 ...
- 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文件 导出多个方 ...
- ES6 模块化(Module)export和import详解 export default
ES6 模块化(Module)export和import详解 - CSDN博客 https://blog.csdn.net/pcaxb/article/details/53670097 微信小程序笔记 ...
- ES6模块化使用遇到的问题
前言 最近在学习ES6模块化时,遇到了一些问题,通过查询相关资料得以解决,本篇随笔详细记录了解决方法. 具体内容 以下定义一个模块common.js 在test.html中引入上述定义的模块 运行上述 ...
- ES6模块化深入 debug
引子: 2020.2.24.最近刚写完一个vue项目.项目用到ES6的模块化 想到之前写node项目用到过commonjs模块化 就想着把所有用到过的模块化技术 总结学习一下 在看阮一峰老师的 es6 ...
- 07 . 前端工程化(ES6模块化和webpack打包)
模块化规范 传统开发模式主要问题 /* 1. 命名冲突 2. 文件依赖 */ 通过模块化解决上述问题 /* 模块化就是把单独的一个功能封装在一个模块(文件)中,模块之间相互隔离, 但是可以通过特定的接 ...
- js 模块化的一些理解和es6模块化学习
模块化 1 IIFE 2 commonjs 3 浏览器中js的模块化 4 简单理解模块加载器的原理 5 es6 之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式( ...
随机推荐
- Linux shell猜数游戏
题目:猜随机数随机1-100中的一个数字,要求用户猜数字,猜中则退出脚本并告知用户猜测次 数和随机数字,否则要求用户继续猜,并告知当前猜的数字和随机数的关系. #!/bin/bash #猜数游戏 Ra ...
- 2022-08-14-esp32把玩记-③_轻轻松松显示个二维码(esp32+ssd1306显示图片)
layout: post cid: 9 title: esp32把玩记-③ 轻轻松松显示个二维码(esp32+ssd1306显示图片) slug: 9 date: 2022/08/14 09:22:0 ...
- 14.MongoDB系列之配置分片
1. 启动服务器 1.1 启动配置服务器 配置服务器是集群的大脑,保存着关于每个服务器包含哪些数据的所有元数据,因此,必须首先创建配置服务器. 由于资源限制,在同一机器上启动三个进程 # mkdir ...
- 【算法训练营day8】LeetCode344. 反转字符串 LeetCode541. 反转字符串II 剑指Offer05. 替换空格 LeetCode151. 翻转字符串里的单词 剑指Offer58-II. 左旋转字符串
[算法训练营day8]LeetCode344. 反转字符串 LeetCode541. 反转字符串II 剑指Offer05. 替换空格 LeetCode151. 翻转字符串里的单词 剑指Offer58- ...
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】（2022/8/30）
插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...
- 你真的会使用Typora吗？
你真的会使用Typora吗? 标题 一级标题:# 空格+内容 二级标题:## 空格+内容 字体 加粗:内容两边各加两个*号 你真美! 斜体:内容两边各加一个*号 你真帅! 删除线:两边各加两个~号(波 ...
- goroutine调度
0.1.索引 https://blog.waterflow.link/articles/1662974432717 1.进程 一个进程包含可以由任何进程分配的公共资源.这些资源包括但不限于内存地址空间 ...
- 海思3516系列芯片SPI速率慢问题深入分析与优化（基于PL022 SPI 控制器）
海思3516系列芯片SPI速率慢问题深入分析与优化(基于PL022 SPI 控制器) 我在某个海思主控的项目中需要使用SPI接口来驱动一块液晶屏,液晶屏主控为 st7789,分辨率 240x240,图 ...
- 知识图谱顶会论文(ACL-2022) CAKE：用于多视图KGC的可扩展常识感知框架
CAKE:用于多视图KGC的可扩展常识感知框架.pdf 论文地址:CAKE:Scalable Commonsense-Aware Framework For Multi-View Knowledge ...
- Codeforces Round #829 (Div. 2) A-E
比赛链接 A 题解 知识点:枚举. 只要一个Q后面有一个A对应即可,从后往前遍历,记录A的数量,遇到Q则数量减一,如果某次Q计数为0则NO. 时间复杂度 \(O(n)\) 空间复杂度 \(O(1)\) ...