一、ES6模块
关键词:export import
导出:
单个导出:
export var m = 111;
export function xxx(){ }
export class XX(){ }
引入时:import { xx,xx,xx as cc } from '文件路径'
合并导出,起别名:
export {xx,xx,xxx as cc}
引入时:import * as xx from '路径' xx.?
export default { xx,xx,xxx as cc }
引入:import xx from '路径'
混合引入:
import xx,{xx,xx} from '路径'
需要导出时 用 export default{} 和 export xx 配合
使用时:必须带有type="module"属性
而且必须走服务器
二、什么是webpack?
作用:
1. 可以把 ES6 规范 转为 ES5 规范, 让浏览器可以直接执行
2. 可以有效减少 网络请求的文件数量: 请求优化的一种方式
3. 图片打包: 剔除掉没有用到的图片, 减少垃圾数据
配置项中重要的配置:
mode: 打包的方式, 分产品和开发
entry: 要打包的 js文件路径
output: 出口, 打包之后的文件存放在哪里, 一般叫 dist
loader: webpack 本身只能打包 js 文件, 要想打包非js 文件, 则需要加载额外模块才能实现. loader 就是这些模块
plugins: 插件, 为webpack 提供更多的自动化的操作, 让开发更加简单快捷.
2.官网:https://www.webpackjs.com/
官方文档:https://www.webpackjs.com/concepts/
3.js的模块化写法
1.为什么要模块化?
作用1: 为了防止引入多个js文件, 产生全局变量污染, 出现冲突的情况
作用2:模块化这个概念最早期是 中国人在几千年前就发明的.
活字印刷术就是模块化 最早期的一个体现
刻板印刷(非模块化) --------所有内容融合在一起, 耦合性过高.导致剥离困难, 修复困难, 耦合性过高
活字印刷术------------每个字都是一个模块, 每个模块之前没有关联, 耦合性低. 容易维护 和 复用
现代中 模块化的例子非常多
台式电脑-------内存, 硬盘, cpu , 主板... 都是模块化
反例: 非模块化的 手机-------内存坏了... 可能要直接换整个主板
4.js的模块化
1.可维护性 ------ 把 js代码的每个功能点 剥离出来, 形成单独的模块.
后期做代码维护时, 升级等操作 都可以直接替换单独模块 而不需要整体修改代码. 可维护性高..
2.复用性强:-------------同一个模块 可以被引入到多个位置, 复制操作.
减少重复代码的编写
模块化的解决方案, 有四种规范
1.CommonJS --------|出现的比较早,都是第三方的规范,
2.CMD --------|
3.AMD --------|类似于CPU中的Intel amd ....都是国外的
4.ES6 --------新出的,是原生的,相当于华为的cpu,脱离了之前依赖别人家规范
的窘境.
以前js原生没有模块化规范,所以只能依赖于别人家的规范,来借鉴使用.后来出现了
js自家的规范 ES6
差异:
1.CommonJS--------使用在node.js服务器上,是一个同步的.
同步:上公交要排队
速度稍慢,但是有序,对于服务器这种从硬盘上读取数据的场景,比较适用于
硬盘传输速度快
异步:上公交不排队,可以走门 可以爬窗.
2.AMD,CMD --------- 使用在客户端浏览器上,是一个异步的
速度快,适用于网络加载数据的情况,因为网速慢.
3.ES6 ------------- JS原生的,可以使用在前端 + 后台 都可以.
commonJS: 1.引入 require() 2.module.exports = { }
注意:导出只能导出一个对象
一个js文件就是一个对象
ES6 ------------- 1. JS原生提供的模块化规范:吸收了第三方模块化规范的优点,并且针对缺点进行了改进.
2.写法关键字:以前CommonJS 1.exports 2.requir
ES6 1.export 2.import
3.导出个数: CommonJS:只能导出一个对象
ES6:可以导出任意多个对象
运行时:必须通过服务器运行,否则报错
总结:
export --------------- 单独导出
1.export var变量 =值;
2.export function 函数名(){ }
3.export class 类型{ }
合并导出
1.export{ 值,值,值 as 别名 }
2.export { 值,值,值 as 别名 }
import---------------自定义引入
1. import {要引入的值, 值 as 别名} from '文件路径'
2. 不同于node.js 的写法, 必须带有完整文件名, 即带有后缀名
引入所有
1.import * as 别名 from '文件路径'
2.import 别名 from '文件路径'
混合导入
1. import * as 别名, {值, 值 as 别名} from '文件路径' 对应 export {}
2.import 别名, {值, 值 as 别名} from '文件路径' 对应 export default {}
3.
混合导入方式 {} 中的值, 需要在 export 时 单独声明导出,
例如:
export function getCompanyName(){
}