Open PaulChess opened 3 years ago
portal方法研究
https://www.cnblogs.com/smart-girl/p/12606011.html
目前的Vue脚手架默认会携带一个 registerServiceWorker的东西,这个东西是做什么的呢?
首先说明,registerServiceWorker可以运用于主流框架,它只是为了简化缓存机制产生的js包
,以下的例子是在Vue中使用,
这个文件可以视情况用或者不用,它是用来做离线缓存
等任务的,实际上就是为Vue项目注册了一个service worker。这样的话,如果在线上,只要访问过一次该网站,以后即使没有网络也可以访问(此时使用的是之前缓存的资源)。只在生产环境中有效(process.env.NODE_ENV === ‘production’)
使用service worker的现象是什么呢? 他会在第一次访问该站点的时候,一次性请求加载所有资源,当然 除了当前页面的资源是通过浏览器去获取的,其他缓存资源都是通过service worker,如下图所示:
vue中的属性如果不传的话默认是undefined
重构:
新增;
vue3 teleport可以将组件挂载到指定的节点下:
<Teleport to={props.teleport}>
{renderOverlay()}
{renderTransition()}
</Teleport>
在transition组件里的v-on:afterEnter和v-on:afterLeave钩子里可以知道内部的元素是出现还是消失
在popup组件里,opened: 打开弹出层且动画结束后触发, closed: 关闭弹出层且动画结束后触发
props:
events:
埋点:
// 引入埋点库,先取出挂载window上的_xxxclog方法
const logFn = window._xxxclog;
// 全局作用域定义埋点发送方法
let sendStat = function (name?: string) {};
if (logFn) {
logFn.prototype.onceStat = [];
// 在这里给埋点发送方法赋值
sendStat = function (name?: string) {
const pkgData = pkg; // package.json
const statInfo = {
name: 'xxx-m-ui, // 组件库前缀名称
ver: `v${pkgData.version}`, // 版本
};
if (name) {
// 判断组件名称如果不在logFn原型的onceStat数组中,则推进去
if (logFn.prototype.onceStat.indexOf(name) > -1) {
return;
}
logFn.prototype.onceStat.push(name);
statInfo.name = `thsc-m-hxmui_${name}`;
}
logFn(statInfo);
};
} else {
console.error('未检测到埋点库,请引入stat.js');
}
Popup组件重构情况:
[x] show:boolean
[x] width: string
[x] height: string
[x] position: string
[x] round: boolean
[x] zIndex: number|string
[x] duration: number|string ⚠️时间设置得比较长的时候出现的时候会有顿挫感
[x] fixedBody: boolean 是否锁定
[x] overlay-click: Event
[ ] 1. 逐步给每个组件覆盖单元测试,最终目标是每个组件下都有完备的单测。工具为jest
+ vue-test-utils
。
组件库早期做法是将单测用例全都写在test
目录下,如test/dialog.spec.ts
,且至目前为止只覆盖了4
个组件。
业界的优秀组件库如vant
、elementui
等都是将单测用例写在单个组件源码目录下,因此我们也需要从新开始搭建完整的单测流程。
jest文档: https://jestjs.io/zh-Hans/docs/getting-started
vue-test-utils文档: https://vue-test-utils.vuejs.org/zh/
[ ] 2. 将组件库文档迁移到thsc-hxmui
项目中。目前组件库的文档是另一个独立存在的项目: hxmui-doc
, 现存的几个问题:
1 ). hxmui-doc中的组件文档和thsc-hxmui单个组件对应的文档会存在内容不对应的情况,真正用于发布官方文档的其实是hxmui-doc
项目,而单个组件下的文档就成了"摆设",这是文档copy必然会导致的情况。所以我们需要将hxmui-doc
的代码内置在thsc-hxmui
中,并且通过遍历项目所有组件目录下的md文档来得到需要的所有组件文档,而不是简单的copy。
2 ). 目前文档demo内嵌的iframe src是通过jpage发布的测试地址,发布demo的时候,会将项目build完生成的dist包放到jpage上进行pack发布,存在的问题是当其他人也在jpage上发布项目的时候,demo地址经常会访问502。所以我们还需要迁移发布demo的容器。目前已申请到新的容器: ths-frontend-hxmui-container
,关联的就是thsc-hxmui
仓库。
3 ). 基于上述两点情况,希望的结果是一次发布,搞定一切
。所以需要设置新的pipeline, 走普通发布
的时候我们可以对文档和组件库同时进行打包,(组件库可以选择分支), 分别将文档打包完的dist和源码打包完的dist发布到静态资源服务器。走自动化发布
的时候就是真正的组件库上线,将打包完的zip包和lib文件夹分别上传到静态资源服务器和内网npm repository。
[ ] 3. 组件按需加载问题。随着组件库体积的增加,按需加载成为了一件必须要提上日程的事情,由于内网有npm仓库,可以通过npm安装hxmui, 然后通过babel-plugin-import
实现按需加载。但是外网没有npm仓库,所以只能通过cdn
的方式进行引入。曾经对外网按需引入组件进行过一定的研究,记录如下:
Hxmui组件库umd build机制优化研究
设想是在基础工具库中提供一个类似require
的方法引入组件,加载需要的组件的js和css文件,使用cb
进行链接拼接插入到页面中。由于之前install
等写法的问题,导致同时引用多个组件的时候只有一个组件能够生效,而且按需加载以后,写在index.ts
中发送埋点的方法也就无法执行(当然内网也存在这样的问题),如何实现将发送埋点的方法注入到每一个组件中使得按需加载该组件的时候也能发送埋点也成为一个问题。
[ ] 4. demo和文档规范,组件库早期在文档、demo包括组件开发上都没有形成规范,将组件任务分配给不同的开发时更是1000个人有1000种写法,官网呈现的结果和可读性也不如人意,在这一方面我们需要做的事情:
1 ). 完成并完善官网的开发规范文档,(后期还可以添加上如何正确提issue
和常见问题回答
区)。比如拉取、提交代码规范,添加新组件流程(目前配置新组件的流程还是有点繁琐,可以考虑写一个小工具在node命令行一键生成新组件),class命名规范, demo和文档命名规范等。
2 ). 对常用的、不规范的以及尚未开发的组件按照优先级进行重构排期,比如像video视频
、scrollStockList可滚动列表
都是业务方呼声比较高的组件,理清业务需求后需要尽快排期开发上线使用。
3 ). demo、文档规范化: 前端在设计demo的时候要有自己的审美,不过目前已经开发出demoBlock
组件用于规范每一个demo块的样式;文档的每一块内容也要对照相应的demo做出比较清晰的解释。目前已经有部分重构或者新增的组件采用了新的规范,大量老的组件尚未修改,重构到的时候需要逐步迭代上线。
[ ] 5. 由于组件库中的样式没有使用scoped作用域,所以样式很容易被业务样式覆盖, 比如button { border-width: 0; }
。类似问题反而耽误了很多排查bug的时间。组件库的样式应避免被覆盖,除非使用>>>
或者/deep/
深度选择器。
[ ] 6. 其他. 随时等待补充。
组件库文档: 已修改上线:
已修改未上线 -> 准备整合上线:
未修改/准备干掉
下线5个组件,21 / 27 覆盖率77%
重新做归类:
idea:
统计组件库中组件的使用率: 问卷,项目中用过的组件的使用统计(多选),希望开发的组件(textarea)。
extra work:
main work:
Toast相比vant还有很多可以扩展的属性和api
SnackBar组件的应用比较单一,文档显得比较空旷,后期统计其应用率
组件需要顺便改一下,需要配合Icon组件
Badge组件设置isDot的时候小圆点的border-radius有点问题,是因为宽高使用了相对单位,在部分安卓机型上会变形,后期需要修改
这个组件的命名是不是有问题?
在pc上监听滚动事件有问题,在移动端上是正常的,该问题暂未解决!!且属性名有点奇怪>>
由于counter命名并不能很准确地反映组件功能,需要尝试做兼容性api、name修改
搜索结果插槽和历史记录插槽有比较大的优化空间
bottomSafeArea
属性可以集成在组件内,不需要用户去自己写方法,控制弹窗的隐藏显示用v-model, 这样就可以干掉overlay-click
关闭方法(也可以选择保留用于用户其他的操作),也不用在触发弹窗的时候将show
置为true,控制弹窗的显示位置可以直接传一个position
属性进去组件的属性api对比,组件本身的问题,在demo页上展示的问题,样式的问题, 属性命名,考虑以后的重构...