温馨提示:文本由机器自动转译,部分词句存在误差,以视频为准
00:00
Hello,大家好,那这个小节我们来介绍一下,动态import,与动态import对应的是这个静态的import,我们ES6的这个模块化呢,它是一个静态的模块系统,什么意思呢?就是我们在写这个import的语句的时候呢,往往是在呃,入口文件这块,或者某一个模块文件里边呢,写了大量的import语句,导入这个模块,导入那个模块导入了很多啊,我们也不管呢,这个模块到底是现在同步调用,要只要使用,还是说未来的某一个时刻啊,去使用这个模块里边的一些啊方法,或者是是说一些对象,就是我们是一股脑的把这些模块通通导进来,因为我们是有依赖关系的,那么这样的话呢,它就不能实现按需加载,也就是我们所说的懒加载啊,效率的话呢,就会产生一点点影响,而在ES11里边啊,它引入了动态import就是可以实现呢,按需下载,按需加载啊,当我们用到的时候呢。
01:00
哎,加载不用的时候呢,我们就不加载,我来给他演示一下,首先呢,我在咱们的HML文件里边呢,加了一个script的标签,它是一个type modu的,找到一指向一个入口文件,然后在这儿呢,我们想着给一个按钮呢,绑定一个事件。啊,点击。好,我们来,一个ID等于一个BTN。好,然后呢,下边我们在入口文件当中啊,需要给他绑一个事件啊,首先呢,先获取元素啊,再来一个cost。啊,BTN等于一个document点啊get element啊把ID把这个BTN放进来,然后呢,我们这个BTN呢,点on click啊来一个单击事件,单击事件做什么事情呢?哎,我们想呢,去弹出一个内容。啊,在页面弹出一个欢迎啊,欢迎您啊,就是类似于这样的一个欢迎语,但是这个功能呢,我们想单独拆一个模块去做啊,想在这儿呢,新建一个文件,来一个hello.gs然后咱们这写一个函数啊,咱们写一个hello,里边呢直接alert一个hello。
02:10
OK,搞定,然后最后咱们把这个模块呢,这个函数需要对外暴露一下export,好,那到这个文件当中呢,要是搁我们之前的话,我们会这样去做,Import from点杠hello.gs。啊,我们会这样去做啊,那么这种情况的话,诶,等会儿我忘了写一个S了啊,来一个hello,或者来一个me。啊,起个名字啊,我们会这样去做,就是首先先把这个文件呢啊导进来,然后呢,咱们再啊,就是某一个时刻来去调里边的一个函数,那么这种啊,就是静态的一个导入啊,静态导入就是我不管你未来用不用啊,我先给你弄进来,而与之对应呢,是这个动态引入,动态引入呢用的是这个port的函数啊port的函数在里边的话,哎,传递咱这个模块路径来个点杠hello.gs而这个影的函数呢,它的返回结果是一个promise对象。
03:09
啊,是一个promise对象啊,而这个promise对象成功的一个值啊,就是咱这个模块里边暴露出来那个对象,我们可以来先来输出一下啊,看一下r log,来一个module保存,然后打开这个网页,然后刷新页面,咱点击看一看啊点击你看这点开它里边有一个hello方法,那么现在咱们就可以在这调这个hello方法啊,Module点这个hello。保存,然后接下来一起来看结果,切过来刷新页面,然后点击你看结果就出来了,而这个模块它就是动态引入的啊,动态import进来的就是我们在模块执行的时候呢,这个时候我们不导入啊,不影响这个效率,然后等到用的时候呢,我们再导入,是这样的一个情况啊,提高咱们的一个执行的效率啊,就是加载的一个效率,好了那么这个小节关于动态import我们就先介绍这么多。
我来说两句