ES6模块化理解
前言
若文章有误,欢迎读者留言反馈模块化
vue中的模块化、组件化,把部分html,独立成一个.vue文件,这个文件我们一般叫它为组件。
组件化≠模块化。模块化是从文件层面上,对代码或资源进行拆分;而组件化是从设计层面上,对用户界面进行拆分。前端组件化更偏向UI层面,更多把逻辑放到页面中,使得UI元素复用性更高。
具体说明
es6模块化规范语法:
- 声明时导出,在声明变量、函数或类时前面加上export,但是这样导入时就得加上大括号
- 独立使用export声明,一个export关键字加上变量名列表,但是这样导入时就得加上大括号
- export { a, b, c } 对应 import { a, b, c } from ‘xx.js’
- export和default联合使用,export default表示导出一个默认变量值,后面可接表达式
原始值都是不能成为指定对外接口=>export和export default都可以直接导出函数、对象
export default后面不能接var?
- default的本质是变量也是指定对外接口,而export default命令的本质是将后面的值,赋给default变量,所以可以直接将一个值写在export default之后。
- 直观解释default = var a = 1 或者说 b = var a = 1【很显然会报错】
大致说说export和export default的区别
- export与export default均可用于导出常量、函数、文件、模块等
- 在一个文件或模块中,export、import可以有多个,export default仅有一个
- 通过export方式导出,在导入时要加{ },export default则不需要
- export导出的变量,import时导入该变量时会随着导出那个变量值的变化而变化;但是default不会,default拿的是值导出,export直接导出的是变量a
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 穿书自救指南!
评论