工作暂时结束了

吐槽

前段时间一直在做学院集市的新前端, 今天终于暂时结束了, 感谢另一位前端的同学写新ui. 怎么说呢, 最开始只是想着锻炼自己的能力吧, 加上早晚要写, 干脆就自己写了. 一些不喜欢的人和不喜欢的发言, 差点就想删库开摆了. 如果不是后面突然有说可能按勤工俭学来发钱搞不好真的就不写了.

一些收获

使用jsx封装组件

这是我第一次使用jsx来封装组件, 也是封装组件最多的一次. 一般方式封装组件：

<!-- MessageBox.vue -->
<script setup>
defineProps({
  msg: {
    type: string,
    required: true
  },
  close: {
    type: Function,
    required: true
  }
})
</script>

<template>
  <div>{{ msg }}</div>
  <button @click="close">
    X
  </button>
</template>

使用组件：

<template>
    <div>
        <!-- 其它代码 -->
         <!-- 实际可能需要在其它地方触发 -->
        <button @click="isShow = true">模拟触发弹窗</button>
        <message-box v-if="isShow" :msg="msg" />
    </div>
</template>
<script setup>
import { ref } from 'vue'
import MessageBox from 'MessageBox.vue'
const msg = ref('hello')
const isShow = ref(false)
const close = ()=>{
    isShow.value = !isShow.value
}
</script>

这是一般方法封装组件, 如果要调用的话会发现要加很多行. 如果经常调用就可能会很痛苦. jsx封装：

import { createApp } from 'vue'

const messageBox = {
  props: {
    msg: {
      type: String,
      required: true
    },
    close: {
      type: Function,
      required: true
    }
  },
  setup(props) {
    return () => (
      <div id="msgbox-root">
        <p>{props.msg}</p>
        <button>X</button>
      </div>
    )
  }
}
function showMsg(msg) {
  const div = document.createElement('div')
  document.body.appendChild(div)
  const app = createApp(messageBox, {
    msg,
    close: () => {
      app.unmount(div)
      document.body.removeChild(div)
    }
  })
  app.mount(div)
}
export { showMsg }

使用组件：

<template>
    <div>
        <!-- 其它代码 -->
        <!-- 实际可能需要在其它地方触发 -->
        <button @click="showMsg('hello')">模拟触发弹窗</button>
    </div>
</template>
<script setup>
import { showMsg } from '@/components/MessageBox.jsx'
</script>

使用对比

一般方式组件使用

<template>
    <div>
        <!-- 其它代码 -->
         <!-- 实际可能需要在其它地方触发 -->
        <button @click="isShow = true">模拟触发弹窗</button>
        <message-box v-if="isShow" :msg="msg" />
    </div>
</template>
<script setup>
import { ref } from 'vue'
import MessageBox from 'MessageBox.vue'
const msg = ref('hello')
const isShow = ref(false)
const close = ()=>{
    isShow.value = !isShow.value
}
</script>

jsx组件使用

<template>
    <div>
        <!-- 其它代码 -->
        <!-- 实际可能需要在其它地方触发 -->
        <button @click="showMsg('hello')">模拟触发弹窗</button>
    </div>
</template>
<script setup>
import { showMsg } from '@/components/MessageBox.jsx'
</script>

从代码长度来看也能看出来用jsx封装组件的便利性, 需要使用的时候只需要导入一下函数, 再调用一下就可以了. 我觉得那个up说的挺好的, 使用jsx的话实现可能比一般方式要复杂一点, 但是调用的时候更加简单方便. 封装是为了让使用简单, 而不是为了实现简单.

markdown代码复制功能

当时使用的是marked库, 第一次用不太熟悉. 在开发者工具里发现code都在pre标签里, 第一个想法是在每个pre里都加一个绝对定位的button放右上角, 但是有点不想这么做捏, 让我遍历整个markdown内容, 再往pre里加button, 感觉会有点损耗性能, 于是得到了第二个想法：使用::before或者::after再给它们一个背景图片充当按钮. 这样也算是得到了一个按钮吧, 但是又有一个问题, 伪元素是不能绑定事件的, 如果要绑定只能绑定整个pre. 不过如果我点一下代码就复制我干嘛弄个按钮？最后选择在css里将pre的点击事件设置为none, 再将::before伪元素的点击事件设置为auto

:deep(pre) {
  position: relative;
  pointer-events: none;
  z-index: 0;
}
:deep(pre::before) {
  background-image: url('/PhCopy.webp');
  position: absolute;
  z-index: 1;
  top: 3px;
  right: 3px;
  pointer-events: auto;
}

这样的话给pre绑定点击事件只有before伪元素可以触发了. 不过我也没有给pre绑定事件, 实在不想遍历整个markdown内容再绑定事件捏.

async function clickHandler(event) {
  /**
   * 在css里已经去除了pre标签的点击, 只保留了pre::before的点击
   */
  if (event.target.tagName === 'PRE') {
    const code = event.target.innerText
    await navigator.clipboard.writeText(code)
    showMsg('代码已复制')
  }
  else if (event.target.tagName === 'IMG') {
    // 拿到图片的src
    const src = event.target.src
    // 如果class名为user-avatar, 直接展示
    if (event.target.className === 'user-avatar') {
      showImg(src)
      return
    }
    const uploadImg = strHandler('postImg', src)
    showImg(uploadImg)
  }
}

这里将点击事件绑定到了根元素, 这种方式好像叫做事件托管？托管给它们的父元素, 点到其中某个元素执行相关的操作. 另一个图片的是放大图片的功能, imageShower同样是使用jsx封装的, 用来展示图片.

---

封装组件最好趁早

别让等待成为遗憾, 等代码成屎山之后我觉得不会有人想碰它了. 可惜我封装的太晚, 勉强封装了几个组件就不想动了. 帖子详情页面感觉一坨, 很难想象我当时的精神状态, 命名也是一坨, 还好写了一点注释. 最后把基卡片、帖子卡片和详情卡片封装好了, 评论卡片实在有点痛苦, 还是改日吧, 反正能跑捏, 不管是代码还是我. 封装的好处也是比较明显的. 改集市的等级只需要在基卡片里改就可以了, 不用列表改一遍, 详情页面再改一遍. 貌似封装组件还能稍微地提升性能, 只要不过度封装.

第一次写这么大的东西, 写了大概五六千行代码吧, 希望不会有bug.