Share JavaScript Code — Overview

好，同学们，我们继续来看今天的知识点——在Lightning Web Components里面，组件之间怎么共享JavaScript代码。 其实啊，我们用的是标准的ES 6模块机制，LWC完全支持它。那具体怎么共享呢，这里有两种模式，都很常用。 第一种，我们叫它“同一文件夹模式”。这种方法特别适合把一个组件内部的逻辑拆分开，比如你有一个比较复杂的组件，里面写了很多工具函数，直接全塞在一个JS文件里太乱。这时候，你可以在组件文件夹里再放一个单独的JavaScript文件，比如叫“utils.js”，然后在主组件里用相对路径，像“'./utils'”这样把它导入进来。但是要注意，这种导入方式只能让同一个文件夹里的组件用，别的组件是找不到这个文件的。换句话说，它是用来做内部代码组织的，不是为了把功能暴露给整个项目到处用的。 第二种模式呢，就是专门为跨组件共享设计的，我们叫“API模块组件模式”。你可以创建一个独立的库文件夹，注意，这个文件夹里面没有HTML文件，它只包含JavaScript。这个库文件夹的主文件的名字要和文件夹名一样，比如你建了一个叫“myUtils”的文件夹，那里面就有一个“myUtils.js”作为主入口。其他组件想用这个库的功能时，直接用“c/myUtils”这种熟悉的组件引用语法就能导入，非常方便。 但要留心一个限制：其他组件只能从这个库的主JavaScript文件导入东西。如果你在库文件夹里还放了一些补充文件，比如“helpers.js”，在主文件外面定义的导出，外面是看不见的。那怎么把这些补充文件的函数也暴露出去呢？很简单，你需要在主文件里用“export ... from ...”语法，把它们重新导出一遍，这样外面才能用。 最后，有个硬性规定别忘了，每个JavaScript文件的大小不能超过128 KB，不管你是库文件还是组件文件，都得遵守。好了，这两种模式你清楚了吗？我们接下来可以看个例子。