js中的import ,export ,exports,module.exports, require

在js中,import可以导入另个文件中的export的东西。而需要注意的地方是,js仿佛有着Spring容器一般东西,任何东西只要被导入一次过,在下一次导入(比如在另一个js文件里又导入了同一个东西),那么这两个东西是同一个。因此,基于这一点,在js中我们可以非常自然地做到单例模式。比如如果我们需要一个数据的容器 DataPool,并且我们希望这个容器是全局唯一,全局可访问的,那么我们可以在一个js文件中直接 export const dataPool={};然后我们在其他文件中import dataPool引用,这样一来,这个dataPool就是全局共享的一个数据容器了。

换句话说,export 的内容只会被执行一次。

其实,当我们从某个js文件里import某个东西的时候,这个js文件实际上已经被全部执行过一遍,其中有被export的东西会被存储到一个容器中,我们暂且可以将这个容器理解为类似SpringContainer一样的东西(如果不知道spring容器也可以理解为一个存放对象的容器),当有地方用到存起来的东西时,就直接从容器里面拿。对于一个对象无论拿多少次,拿到的都是同一个对象。

import 应该与export 对应使用,而module.exports,exports 应该与require对应使用。因为前者是es6的语法,后者是node上的语法,虽然都会被babel转换,但是交叉使用容易出现问题,甚至报错。比如当在一个js文件中同时使用export 和exports时就会报错。

从实际运行情况上来看,module.exports ,exports,require 和export,import是一模一样的,也是会把整个js文件都执行一遍。但是node中的module.exports ,exports,一个js文件只能导出一个对象,而esport 可以导出多个。从这点上来说,还是es6的好用些。

但是require也有优势,因为它可以动态地加载一个js文件,动态加载某个对象。比如 if (a>b){person=require('----')};挡在某些配置文件中存在许多可以不加载的东西,或者可能暂时不用加载,可以这样做。这显然可以加快大型react应用的首次展示速度。比如下面这种情况:在一个项目中,需要对美国的每个州都写对应的组件以实现每个州的特殊逻辑,然而当你以某个州的名义登录时,其他州的组件完全可以不加载,只加载当前的州,如果在配置文件中直接import所有州的组件显然浪费了大量的内存。此时,我们可以先判断州然后加载对应的组件。另一种情况就是页面还没跳转到那一页,比如我一个工作流水线有10步,对应10个页面。那么,如果我们一开始就把所有组件写成import的形式,那么第一次渲染一定会比较慢,这也是最大的问题,因此,我们可以到了那个页面再require这个组件,于其第一次等10秒,人们更喜欢每次等1秒,并且这样更加节省内存。

还有一点就是作用域的问题,每个被import的js文件都在自己的作用域里,没有通过export,import导出导入的变量,是不能直接使用的,但是可以在一些全局对象上绑定一些属性,比如window。当然不推荐这样这样做,避免变量污染。

发布了21 篇原创文章 · 获赞 2 · 访问量 7283

猜你喜欢

转载自blog.csdn.net/qq_31261131/article/details/81158891