温馨提示:文本由机器自动转译,部分词句存在误差,以视频为准
00:00
哈喽,大家好,这个小节呢,我们来介绍一下ES6模块化的一个语法。那么ES6模块化的这个功能呢,主要有两个命令组成,一个呢是export,一个呢是import。Export命令呢,用于规定模块的对外接口。就是我们在这个文件模块当中哪些数据啊需要暴露,那么就在这个暴露的数据前面加export就可以了。那么import呢?是用于输入其他模块提供的功能。就比方说我这个模块想要用你这个模块的功能,那好,我就是会在我的模块里边使用import这样一个指令来导入你的功能。好,我来给大家举个例子。点开这个编辑器,我呢,现在有一个index HTML这样一个文件。然后我去创建一个JS文件啊,在这呢,新建一个文件叫M1加GS。
01:00
代码呢,该怎么写怎么写啊,我把它拆分一下,诶在这像这样子啊,啊,我们写一个这个let school,等于一个什么上硅谷,然后在上面一个函数function,好,然后conso log,诶我可以啊,这是。可以交给你开发技能好了,现在的话呢,咱这个文件写完了,写完以后呢,这是一个模块,我们想这边呢,暴露一些数据,让外部的模块可以使用这个模块里边的啊变量和函数,那怎么办呢?诶我们可以使用export。这个命令。这块也是一样子啊,你看之前代码你该怎么写怎么写,当你需要暴露数据的时候呢,只要在这个啊,数据声明的前边加一个export就可以了。加完X以后呢,我们现在回到index.html里边,我们想对这个模块功能做一个引入,做一个使用,注意这个时候使用方式啊,跟原来就不太一样了。
02:10
原来我们是直接使用src去引这个JS文件就OK了,但是现在呢,我们要换了,大家注意观察script标签,Type等于一个module,然后呢,在module里边我们开始引入M1。啊,点GS这个模块的内容怎么做?我先来写一种通用方式import星S后边呢,写一个变量名M1FROM点杠GS啊,就是SRCGS下边的1.gs,这样一来的话呢,我index.html这个文件啊,这个文件就把1.gs这个模块里边的所有所有暴露的数据全都存到变量M1里边。
03:02
我们可以使用呢,Console log的方式来输出一下M1这个变量,保存,点开浏览器来看一下刷新啊module点开呢,里边有school,有teach,好,点一下school这个值,它是咱那个字符串上规股,点开teach这块打开它是那个函数。好,这是咱们当前呢,对这个ES6模块化呢,做了一个基本的一个使用。
我来说两句