PaulChess/MyBlog

questions

Opened this issue · 12 comments

PaulChess commented
questions
PaulChess commented

idea:
统计组件库中组件的使用率: 问卷，项目中用过的组件的使用统计(多选)，希望开发的组件(textarea)。

extra work:

  • DemoBlock 格式化demo
  • 整理App.vue
    • 根据路由获取当前组件的name,展示在nav上
    • 完成getThemeMode和setThemeMode方法，简化页面
    • 删掉一些用不掉的类，先要在业务组件中把依赖它们的地方干掉
  • 整合utils方法

main work:

  • 1. Toast 轻提示 demo + 文档
    Toast相比vant还有很多可以扩展的属性和api
  • 2. SnackBar 临时消息栏 demo + 文档
    SnackBar组件的应用比较单一，文档显得比较空旷，后期统计其应用率
  • 3. Loading 加载 demo + 文档
    组件需要顺便改一下，需要配合Icon组件
  • 4. Dialog 对话框 demo + 文档
  • 5. Footer 页脚 demo + 文档
  • 6. Card 卡片 demo + 文档
    Cards组件的问题比较多，先搁置，后处理，而且这个组件完全可以做成swiper组件
  • 7. Badge 徽章 demo + 文档
    Badge组件设置isDot的时候小圆点的border-radius有点问题，是因为宽高使用了相对单位，在部分安卓机型上会变形，后期需要修改
  • 8. List 列表 demo + 文档
    这个组件的命名是不是有问题?
  • 9. Grid 宫格 demo + 文档
    在pc上监听滚动事件有问题，在移动端上是正常的，该问题暂未解决！！且属性名有点奇怪>>
  • 10. Counter 计数器 demo + 文档
    由于counter命名并不能很准确地反映组件功能，需要尝试做兼容性api、name修改
  • 11. DropdownMenu 下拉菜单 demo + 文档
  • 12. Search 搜索 demo + 文档
  • 13. SearchPage搜索页 demo + 文档
    搜索结果插槽和历史记录插槽有比较大的优化空间
  • 14. Tabs 标签页 demo + 文档
  • 15. PickerWheel 滚轮列表 demo + 文档
  • 16. Stepper 步进器 demo + 文档
  • 17. Radio + RadioGroup 单选框 demo + 文档
  • 18. CheckBox + CheckboxGroup 复选框 demo + 文档
  • 19. Switch 开关 demo + 文档
  • 20. Calendar 日历选择器 demo + 文档
    这个组件有很大的问题，先从组件库里移出去，待重构
  • 21. PullRefresh 下拉刷新 demo + 文档
  • 22. 资金流向图 demo + 文档
    这个组件实在是太复杂了，而且代码量很大，暂时先从组件库里清出去
  • 23. Exposure曝光组件 demo + 文档
  • 24. H5Audio 音频组件 demo + 文档
  • 25. H5Video 视频组件 demo + 文档
  • 26. Marqueen 文字轮播 demo + 文档
  • 27. Overlay 遮罩 demo + 文档
    和popup组件差不多，这个组件比较简单，可优化的api和属性有: v-model控制遮罩层的显示和隐藏
  • 28. PageStatus 页面状态 demo + 文档
  • 29. popup 弹出层 demo + 文档
    这个属性从api和属性层面可优化方面比较多：bottomSafeArea属性可以集成在组件内，不需要用户去自己写方法，控制弹窗的隐藏显示用v-model, 这样就可以干掉overlay-click关闭方法（也可以选择保留用于用户其他的操作），也不用在触发弹窗的时候将show置为true,控制弹窗的显示位置可以直接传一个position属性进去
  • 30. tooltip 工具提示 demo + 文档
    有同学反映说这个组件太过简单，需要进行优化
  • 31. Button 按钮 demo + 文档
  • 32. Icon 图标 demo + 文档

组件的属性api对比，组件本身的问题，在demo页上展示的问题，样式的问题, 属性命名，考虑以后的重构...

  • 🚀1
PaulChess commented

portal方法研究

PaulChess commented

vue中的registerServiceWorker有什么用?

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，如下图所示:

PaulChess commented

vue中的属性如果不传的话默认是undefined

PaulChess commented

重构:

  • Button 按钮
  • PullRefresh 下拉刷新
  • overlay -- 改造vant
    未上线

新增;

  • Icon 图标
PaulChess commented

vue3 teleport可以将组件挂载到指定的节点下:

<Teleport to={props.teleport}>
    {renderOverlay()}
    {renderTransition()}
</Teleport>
PaulChess commented

在transition组件里的v-on:afterEnter和v-on:afterLeave钩子里可以知道内部的元素是出现还是消失
image

在popup组件里,opened: 打开弹出层且动画结束后触发， closed: 关闭弹出层且动画结束后触发

PaulChess commented

props:

  • show
  • position
  • overlay-class
  • overlay-style
  • popup-style
  • duration
  • round
  • zIndex
  • fixedBody 锁定滚动
  • lazy-render 是否在显示弹层时才渲染节点
  • close-on-popstate 是否在页面回退时自动关闭
  • close-on-click-overlay 是否在点击遮罩层后关闭
  • closeable 是否显示关闭图标
  • close-icon-position
  • transition 动画类名
  • transition-appear 是否在初始渲染时启用过渡动画
  • bottomSafeArea 是否开启底部安全区适配

events：

  • click 点击弹出层触发
  • click-overlay 点击遮罩层触发
  • click-close-icon
  • open 打开弹出层时触发
  • close 关闭弹出层时触发
  • opened 打开弹出层且动画结束时触发
  • closed 关闭弹出层且动画结束时触发
PaulChess commented

埋点:

// 引入埋点库，先取出挂载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');
}
PaulChess commented

Popup组件重构情况:

  • show:boolean

  • width: string

  • height: string

  • position: string

  • round: boolean

  • zIndex: number|string

  • duration: number|string
    ⚠️时间设置得比较长的时候出现的时候会有顿挫感

  • fixedBody: boolean 是否锁定

  • overlay-click: Event

PaulChess commented

  • 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. 其他. 随时等待补充。

PaulChess commented

组件库文档:
已修改上线:

  • Toast 轻提示
  • Dialog 对话框
  • Switch 开关
  • PullRefresh 下拉刷新
  • Overlay 遮罩层
  • Popup 弹出层
  • Button 按钮
  • Icon 图标

已修改未上线 -> 准备整合上线:

  • SnackBar 临时消息栏
  • Loading 加载 --> 可以先不上，等改版后的Loading一起上
  • Footer 页脚
  • Badge 徽章
  • Grid 宫格
  • Counter 计数器
  • Search 搜索
  • Tabs 标签页
  • Radio + RadioGroup 单选框(准备重构)
  • Checkbox + CheckboxGroup 复选框
  • H5Video H5视频组件
  • H5Audio H5音频组件
  • Marqueen 文字轮播
  • PageStatus 页面状态

未修改/准备干掉

  • Calendar日历 下掉
  • Cashflowchart 资金流向图 下掉
  • Cards 卡片 --> 准备做成Swiper， 暂时先下掉
  • DropdownMenu --> bug比较多，暂时先下掉
  • ToolTip 工具提示 问题太多，暂时下掉
  • List 下拉加载 --> 未修改
  • SearchPage 搜索页 业务组件 --> 未修改
  • PickerWheel 滚轮选择器 --> 未修改
  • Stepper 步进器 --> 未修改
  • Exposure 曝光组件 --> 未修改

下线5个组件，21 / 27 覆盖率77%

重新做归类: