ES6模块化的引入和暴漏本质

无论什么样的暴露方式，往外暴露的都是一个模块
只不过，暴露的模块形成方式不一样

默认暴露
比如暴漏的是
export default {a:100}
暴露的是一个模块，这个模块里面是以default为属性名，以default后面的东西为值的对象

其实暴漏出的模块是：
{
default:{a:100}
}

引入的时候，如果是默认暴露
通常我们是这样引入 import a from './xxx.js' 它其实是一个简写方式

因为default是一个关键字，所以我们只能重新起名
全写应该是 import {default as a} from './xxx.js'
由于默认暴露引入的时候如果全写会很麻烦，因此才出现上面我们的简写。（只有默认暴漏才会有这样的简写）

分别暴露
export const a = 100
export const reqXX = () => {}
最终暴露出文件的时候，会自动的把分别暴露的信息封装为一个对象
{
a:a,
reqXX:reqXX
}

引入的时候
import {reqXX} from './xx.js'
import {a} from './xx.js

整体暴露
const a = 100
const obj = {a:100}

最终暴露的就是你export 后面的对象
export {
a,
obj
}

引入的时候
import {a} from './xx.js'
import {obj} from './xx.js'

无论什么暴露方式，如果你想拿到暴露出文件的整个那个模块，就要用一下方面去引入

as是重新起名字的意思
import * as xxx from './xx.js'

ES6模块化的引入和暴漏本质相关推荐

ES6新特性_浏览器使用ES6模块化引入模块---JavaScript_ECMAScript_ES6-ES11新特性工作笔记042
然后我们再来看一下在浏览器中怎么用这个 ES6的模块化,来引入模块. 首先我们在同一个文件下写一个js文件,m1.js,里面写个变量,写个函数然后如果我们想把,m1.js文件中的某个变量,或者 ...
vue项目引入不符合ES6模块化标准的JS文件
vue项目引入不符合ES6模块化标准的JS文件实现方式实现原理实现方式要引入的文件放在public目录下,在index.html中通过script标签引入实现原理参考vue官网–处理静态资 ...
史上最详细易懂的ES6模块化语法（重点）
对于初次学习ES6的小伙伴来说,ES6的模块化语法是一个重点,在没有模块化之前,前端js代码有一下三句话 1.私密不漏 2.重名不怕 3.依赖不乱一.接下来先演示在没有模块化之前,这个"私 ...
前端工程化（ES6模块化和webpack打包）
文章目录目标: 目录: 1.模块化相关规范 1.1.模块化概述 1.2.浏览器端模块化规范 AMD CMD 1.3.服务器端模块化规范 CommonJS 1.4.大一统的模块化规范-ES6模块化 1 ...
全面理解ES6模块化编程
今天我们来学习ES6的模块化系统,如何从模块中导出变量.函数.类,在其他模块中去使用. 在ES6的模块系统中,每个JS文件可以理解为一个模块,模块代码以严格模式执行,所以模块中的变量.函数不会添加全局 ...
es6模块化机制及CommonJS与ES6模块化规范区别
模块化机制 CommonJS模块化规范导入 1. let { firstName, lastName } = require('./1-module.js') 导出 1. module.export ...
ES6模块化与异步编程高级用法
ES6模块化与异步编程高级用法一.学习目标能够知道如何使用ES6的模块化语法能够知道如何使用Promise解决回调地域的问题能够知道如何使用async/await 简化Promise的调用能 ...
JS模块化（二）：ES6 模块化
简介 ECMA推出了官方标准的模块化解决方案,使用 export 导出,import 导入,编码简洁,从语义上更加通俗易懂. let name = 'now'; let fun = () => ...
Vue铺垫知识 --- ES6模块化
Vue框架内容管理 Vue Vue前置内容 ES6模块化默认导出[暴露]和默认导入按需导入和按需导出直接导入并执行模块中的代码安装node,vue 安装vue 创建vue项目 vue cre ...

ES6模块化的引入和暴漏本质

ES6模块化的引入和暴漏本质相关推荐

最新文章

热门文章