怎么在ES6中使用导出和导入实现模块化

今天就跟大家聊聊有关怎么在ES6中使用导出和导入实现模块化,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

<强>前端模块化

<强> 1。模块化的好处

前后端分离以来,经常提到前端工程化,前端工程化是一个高层次的思想,前端工程化主要包括四个方面:模块化、组件化,规范化,自动化。而模块化和组件化是为工程化思想下相对较具体的开发方式,因此可以简单的认为模块化和组件化是工程化的表现形式。

模块化带来的好处:

,,1避免变量污染,命名冲突
,,2提高代码复用率
,,3提高维护性
,,4依赖关系的管理

<强> 2。什么是模块化?

那具体什么是模块化呢,还是举简单的例子,我们要写一个实现一个功能的JS代码,这个功能在项目其他位置也需要用的到,那么我们就可以把这个功能看成一个模块采用一定的方式进行模块化编写,既能实现复用还可以分而治之,同理在写样式的时候,如果我们需要某种特殊的样式,会在很多地方应用,那么我们也可以采用一定的方式进行CSS的模块化,具体说来,JS模块化方案很多有AMD/CommonJS/UMD格式/ES6模块等,CSS模块化开发大多是在少,sass,手写笔等预处理器的进口/mixin特性支持下实现的,具体技术大家自行学习。

<强> 3。没有ES6模块化之前是怎么表达模块化的?

在ES6前,前端就使用RequireJS或者seaJS实现模块化,RequireJS是基于AMD规范的模块化库,而像seaJS是基于CMD规范的模块化库,两者都是为了为了推广前端模块化的工具

<强> 4。ES6的模块化

现在ES6自带了模块化,也是JS第一次支持模块,我们可以直接作用进口和出口在浏览器中导入和导出各个模块了,一个JS文件代表一个JS模块;

<强> ES6的模块化的基本规则或特点:

1:每一个模块只加载一次,每一个JS只执行一次,如果下次再去加载同目录下同文件,直接从内存中读取。
2:每一个模块内声明的变量都是局部变量,不会污染全局作用域;
3:模块内部的变量或者函数可以通过出口导出;
4:一个模块可以导入别的模块
5: ES6的模块自动采用严格模式
6:模块顶级作用域的这个值为未定义
7:需要外部使用的部分,必须导出才可以

<强> 5。实际应用