ES6模块化
关于ES6模块化
历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。
在nodeJS中,有模块化的方法,使用CommonJS规范可以做到模块化,也就是说,只有在用js进行后端node开发的时候,才能使用模块化,前端js依然不行
在前端我们可以使用requireJS,seaJS来实现模块化,但是requireJS也是通过对script标签进行异步导入的方式来进行,并不是js里自带的语法
我们也可以使用webpack工具来进行模块化打包,是因为webpack跑在nodeJS中,说到底还是nodeJS中的模块化
但是在ES6中,我们第一次在js语法中加入了模块化的东西,目前很多浏览器都不支持,所以说还需要编译
ES6模块化的规范
模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
- 暴露
可以export直接暴露出某些对象,可以暴露多个:
//暴露多个接口 在定义的时候暴露
export let str = 'abcd'
export let fn = function(){
console.log('fn')
}
export let person = {
name:'二狗'
}
//暴露多个接口,在{}里放入要暴露的对象
export {str,fn,person}
因为直接暴露的对象在引入的时候名字不能改变,可能会导致在引入的模块中造成命名冲突
可以在暴露的时候通过as来定义别名
export {str as a_str,fn as a_fn,person as a_person}
在暴露对象的时候,如果只有一个,可以default暴露,在引入的时候叫啥都行,也不用加{}
export default fn
default只能暴露一个东西,如果我们有一个是defualt暴露的,还有几个是具名暴露
export default str
export {fn,person}
引入:
import abc,{fn,person} from './modules/module_a'//abc就是上面的str
导入
如果被引入的模块没有暴露,只是一段逻辑代码需要在引入模块里运行的话
import './modules/empty'
如果要导入某一个模块中暴露的一些对象的话,注意,不一定非要把其暴露的模块全部引入,导出的对象的名字不能错
import {str,fn,person} from './modules/module_a.js'
console.log(str,person)
fn()
在引入模块中暴露的接口的时候,很可能会产生命名冲突,依赖于在暴露的时候定义别名的话,也不是很安全,所以最好在引入的时候命名别名
import {str as a_str,fn as a_fn,person as a_person} from './modules/module_a.js'
如果要引入的模块暴露出来的对象有很多,我们在引入的时候可以放入到一个对象中去使用:
A对象不需要自己定义,引入的时候会自动创建
import * as A from './modules/module_a'
console.log(A)
ES6模块化的更多相关文章
- 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 之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式( ...
随机推荐
- LeetCode 170. Two Sum III - Data structure design (两数之和之三 - 数据结构设计)$
Design and implement a TwoSum class. It should support the following operations: add and find. add - ...
- ABAP开源项目清单
因为曾经的“SAP Code Exchange”平台已经于2013年倒闭,现在无论在SCN还是网络上都比较难找到一个地方来关注全部的优秀ABAP开源项目. 本文将这些项目的地址和他们的描述列出,以供参 ...
- 深度学习系列 Part (2)
1. 神经网络原理 神经网络模型,是上一章节提到的典型的监督学习问题,即我们有一组输入以及对应的目标输出,求最优模型.通过最优模型,当我们有新的输入时,可以得到一个近似真实的预测输出. 我们先看一下如 ...
- [C#]使用ILMerge将源DLL合并到目标EXE(.NET4.6.2)
本文为原创文章,如转载,请在网页明显位置标明原文名称.作者及网址,谢谢! 本文主要是使用微软的ILMerge工具将源DLL合并到目标EXE,因此,需要下载以下工具: https://www.micro ...
- 27.Linux-DM9000C网卡移植(详解)
上一节 我们学习了: 网卡驱动介绍以及制作虚拟网卡驱动: http://www.cnblogs.com/lifexy/p/7763352.html 接下来本节,学习网卡芯片DM9000C,如何编写 ...
- Python函数篇:dict函数和列表生成式
1.dict函数语法:dict()dict(**kwarg) dict(mapping, **kwarg) dict(iterable, **kwarg) 第一种:dict()构造一个空字典 h=di ...
- Android 开发笔记___alertDialog
public class AlertActivity extends AppCompatActivity implements OnClickListener { private TextView t ...
- font-face 在 Firefox无法正常工作问题
@font-face存在的问题: 1.不同浏览器支持不同格式 2.Firefox默认情况下不允许跨域font-face,除非你可以添加“Access-Control-Allow-Origin” hea ...
- Python-数据类型-转摘
1.数字 2 是一个整数的例子.长整数 不过是大一些的整数.3.23和52.3E-4是浮点数的例子.E标记表示10的幂.在这里,52.3E-4表示52.3 * 10-4.(-5+4j)和(2.3-4. ...
- CSS3 动画 animation和@keyframes
CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...