ES6 module中模块的学习

对于前端,自从入行以来愈发觉得深似海,无边无际要学的很多,自己总感觉好像啥都会,但是不深入,所以从今天开始准备拾起零散的知识加以强化巩固。
今天就从es6的模块开始吧~

前言:
历史上,js是没有模块体系,无法将一个大的程序拆分成小的模块,但是像一些后台预言python却是有的。所以后来在es6出来之前社区就出了一套规范可以将大程序拆分成小程序,也就是我们经常说的CommonJS和AMD,前者用于服务器,后者用于浏览器,后来es6出来后就代替了这种模块解决方案。
下面看下CommonJS的实现过程
在这里插入图片描述上面代码的实质是整体加载fs模块(即加载fs的所有方法),生成一个对象(_fs),然后再从这个对象上面读取3个方法。这种加载称为“运行时加载”*,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。*
但是es6不是对象,他的设计思想是尽量的静态化,通过export命令向外抛出改文件内容,通过import引入抛出的文件

下面是具体的用法:
ES6 module中模块的学习_第1张图片导出函数形式写法:
ES6 module中模块的学习_第2张图片
**心得:**如果导出文件里有多个变量,函数即要导出多个内容时,导出的时候一定要用花括号,引入的时候有俩种引入方式。第一种就是导出什么引入的时候就怎么引入第二种可以用 import * from './index.js’或者取别名 import * as demo from ‘./index.js’ 使用的时候就是在demo中调用相应的方法或者变量

import除了截图上用法,import还可以引入外部模块,这也就是为什么我们会看到下图语句
在这里插入图片描述

export default 命令
从前面的例子可以看出,使用import的时候需要知道export导出的变量名 或者函数名,但是有时候并不想去阅读这些文档,所以es6就给出了export default 语法。
ES6 module中模块的学习_第3张图片
在这里插入图片描述
**注意:**上面代码的import命令,可以用任意名称指向export-default.js输出的方法,这时就不需要知道原模块输出的函数名。需要注意的是,这时import命令后面,不使用大括号。
ES6 module中模块的学习_第4张图片

你可能感兴趣的:(es6,javascript,es6)