ES6 模块化

什么是模块化？

将一个js文件按照功能作用分解为多个js文件

为什么要使用模块化

使用模块化可以对不同的功能点进行统一管理，降低耦合性，减少同名的影响。每一个模块都有单独的空间。

常用模块化分类

1.CommonJS

暴露

module.exports = function add (a, b) { return a + b; }
module.exports = {........
}

引入

const result = require('./test')

2.ES6 模块化

分别暴露：

分别暴露

export const a = 10
export const getData = () => { }
// 对外暴露的实质是 {a,getData}

引入

// 按需引入【逐个引入】
import {a,getData} from './test'
// 全部引入【统一引入】
import * as Dome from './test'

引入并暴露

export {a,getData} from './test' 【暴露的为多个单个数据，模块化不合适】export * as Dome from './test' 【暴露的为一个模块】// 对外暴露的实质是 ： {Dome:{a,getData}}

统一暴露：

统一暴露

const a = 10
const getApp = () => { }
export {a,getApp
}
// 对外暴露的实质是 ： {a,getApp}

引入

// 按需引入【逐个引入】
import {a,getApp} from './test'
// 全部引入【统一引入】
import * as Dome from './test'

引入并暴露

export {a,getAPP} from './test' 【暴露的为多个单个数据，模块化不合适】export * as Dome from './test' 【暴露的为一个模块，模块化常用】// 对外暴露的实质是： {Dome:{a,getApp}}

默认暴露

=========== 书写方法一 ==========
export default {getBpp(){},a:20
}
========== 书写方法二 ==============
const a = 10,
const getBpp = () => {}
export default {a,getBpp
}
// 对外暴露的实质是 ： {default:{a,getBpp}}

引入

// 简写形式
import Dome from './test'
// 完整形式
import {default as Dome} from './test'

引入并暴露[不可使用简写形式]

export {default as Dome} from './test'
// 暴露的实质是：{Dome:{a,getBpp}}

总结

对外暴露出的都是一个对象，但是不同的暴露方法实际暴露的对象有所不同
默认并暴露的实质就是使用 export ➕ 去除import关键字后的引入写法
默认暴露在进行引入并暴露时不能进行简写
import引入的文件会自动收集在文件的最上方，并按照引入的顺序执行

ES6 模块化【暴露、引入、引入并暴露】相关推荐

vue项目引入不符合ES6模块化标准的JS文件
vue项目引入不符合ES6模块化标准的JS文件实现方式实现原理实现方式要引入的文件放在public目录下,在index.html中通过script标签引入实现原理参考vue官网–处理静态资 ...
echart模块化单文件引入
echart模块化单文件引入百度上面是推荐这样使用.今天看了一下,做了个Demo. 文件结构如下: 1 <!doctype html> 2 <html lang="en&q ...
前端工程化（ES6模块化和webpack打包）
文章目录目标: 目录: 1.模块化相关规范 1.1.模块化概述 1.2.浏览器端模块化规范 AMD CMD 1.3.服务器端模块化规范 CommonJS 1.4.大一统的模块化规范-ES6模块化 1 ...
全面理解ES6模块化编程
今天我们来学习ES6的模块化系统,如何从模块中导出变量.函数.类,在其他模块中去使用. 在ES6的模块系统中,每个JS文件可以理解为一个模块,模块代码以严格模式执行,所以模块中的变量.函数不会添加全局 ...
史上最详细易懂的ES6模块化语法（重点）
对于初次学习ES6的小伙伴来说,ES6的模块化语法是一个重点,在没有模块化之前,前端js代码有一下三句话 1.私密不漏 2.重名不怕 3.依赖不乱一.接下来先演示在没有模块化之前,这个"私 ...
Vue铺垫知识 --- ES6模块化
Vue框架内容管理 Vue Vue前置内容 ES6模块化默认导出[暴露]和默认导入按需导入和按需导出直接导入并执行模块中的代码安装node,vue 安装vue 创建vue项目 vue cre ...
commonjs是什么_第一步：面试官让我解释什么是Common.js和ES6模块化
前两篇文章中,有小伙伴给我留言说怎么没有模块化相关的知识点,模块化在面试中被问到的概率非常大,但因为前几篇文章篇幅实在太长了些,所以模块化知识点单独这篇文章给大家聊聊. 先说说什么是模块化,就是将独立 ...
ES6 模块化的基本语法——默认导出与默认导入、按需导出与按需导入、直接导入并执行模块代码
ES6 模块化的基本语法注意:每个模块中,只允许使用唯一的一次 export default,否则会报错! 按需导出与按需导入注意:每个模块中,可以使用多次按需导出直接导入并执行模块代码有 ...
vue项目接口地址暴露_vue组件暴露和.js文件暴露接口操作
1.将同一类型的组件放在一个文件夹下 2.在此文件夹下创建一个index.js 3.在index.js中导入组件,并把他们暴露出去 1.写法一 import studentCourse1 from ' ...
commonjs 和 es6模块化开发入门
commonjs模块化首先写一个api,提供给外部调用 //commonjslet sum =(a,b)=> a+b;// 暴露接口 module.exports = {sum // sum: ...

ES6 模块化【暴露、引入、引入并暴露】

ES6 模块化

什么是模块化？

为什么要使用模块化

常用模块化分类

1.CommonJS

暴露

引入

2.ES6 模块化

分别暴露：

统一暴露：

统一暴露

引入

引入并暴露

默认暴露

默认暴露

引入

引入并暴露[不可使用简写形式]

总结

ES6 模块化【暴露、引入、引入并暴露】相关推荐

最新文章

热门文章