谈一谈前端的公用组件

684 阅读2分钟

问题

目前在做的一个项目,大概100个页面;三个前端,开发+迭代差不多一年了,项目有一个目录用来放公用组件。 正在迭代一个新的版本,因为事件跨度比较长,而且不是一个人做,有时候懒得问或者是忘记了,会出现重复的写了一些相同的组件

方案

做一个公共组件注册中心,所有的公共组件都在这里导入,再导出,每一个组件都注释上使用方法

例如:
/**
 * 底部弹出框组件
 * @param {isOpened} props 
 * @param {title} props 
 * @param {children} props 
 * @param {onHandleClose} props 
 */
import FloatLayout from './floatLayout/floatLayout';

export { FloatLayout }

方案来源

因为偷懒,react的组件本来是需要单独建文件夹,每个组件都有一个jsx和css,我偷懒将多个组件写到了同一个文件里面,运行打包H5版本的时候没有问题,我也就放心的用了 后来安排我将项目适配的快应用和微信小程序,在编译的时候提示报错“一个文件里只能有一个组件”,大概是这个意思,这我就懵了!那我还得把这些组件分出来,还得在修改引入的地址。

稍加思索
于是我老老实实把组件分了出去,但是觉得改引入地址有点麻烦,我都不记得哪些地方有用到哪些组件,所以我干脆还是把分出去的组件导入到这个文件,导出不变。实测之后---可行 然后就没有然后了(小程序因为IM的包太大而而搁置,快应用因为Taro-UI目前还不兼容也搁置了哈哈哈哈哈哈哈哈哈哈) 然后又开始迭代,过程中我猛然发现这个导入又导出的文件就是一个现成的组件注册中心,美滋滋~~

摸鱼更新,希望没有被老板看到