前端基础向--从项目入手封装公共组件

简介: 前端基础向--从项目入手封装公共组件

前言


在上一篇 前端基础向~从项目入手封装工具函数 中简单介绍了封装项目通用工具函数的几种思路和函数设计方式,用来适配多种情况下的 数据处理,也提到了哪些情况下需要封装业务公共组件。


本文就从 “详情卡片” 业务组件的封装的几个阶段来说明我在编写公共组件的设计思路。


1. 阶段一:基础需求


假设我们现在有这样一个需求:需要满足显示产品的详细信息;需要可以根据不同分辨率适配不同的显示方式(2列,3列,4列)。基础样式如下:


网络异常,图片无法展示
|


为了快速实现不同分辨率实现不同的列数,最先想到的就是使用 UI 库的布局组件,这里我们选择的是 ElementUI 的 Row/Col 组件。


在满足当前的需求下的代码如下:


<script>
export default {
  name: "DetailPageInfoContent",
  props: {
    details: {
      type: Object,
      default: () => ({})
    },
    sizes: {
      type: Object,
      default: () => ({ xs: 12, sm: 12, md: 12, lg: 8, xl: 6 })
    },
    prop: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    detailInfoList() {
      if (!this.details) return [];
      return Object.keys(this.prop).reduce((list, propKey, index) => {
        let label, value;
        label = this.prop[propKey];
        value = (this.details[propKey] || "-").toString();
        list.push({ index, label, value });
        return list;
      }, []);
    }
  },
  render(h) {
    return h("div", { class: "detail-page-info-content" }, [
      h("el-row", { props: { gutter: 16 } }, [
        this.detailInfoList.map((item) =>
          h(
            "el-col",
            {
              props: { ...this.sizes },
              class: "info-item-content",
              key: item.index
            },
            [
              h("div", { class: "info-content_label" }, item.label),
              item.value.length < 32
              ? h("div", { class: "info-content_value" }, item.value)
              : h("el-tooltip", { props: { content: item.value } }, [
                h("div", { class: "info-content_value" }, item.value)
              ])
            ]
          )
        )
      ])
    ]);
  }
};
</script>
<style lang="scss">
.detail-page-info-content {
  box-sizing: border-box;
}
.info-item-content {
  font-size: 0.8rem;
  line-height: 32px;
  display: flex;
  align-items: center;
  color: $--font-color-secondary;
}
.info-content_value {
  flex: 1;
  overflow: hidden;
  word-break: break-word;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: $--font-color-base;
}
</style>


此时的组件仅仅满足传入一个配置对象 prop 和详情数据 details,以及一个默认的 ElRow 的布局配置。在 Value 长度大于 32 时使用 Tooltip 来显示超长的信息部分。


2. 阶段二:插槽


上面的组件仅仅满足已经符合正确格式的 prop 配置和 details,但是在需要增加图片预览按钮、操作按钮等情况时,则无法满足。


所以可以增加两个插槽,用在最前面和最末尾显示扩展信息。


<script>
export default {
  name: "DetailPageInfoContent",
  props: {},
  computed: {
    detailInfoList() {
      if (!this.details) return [];
      return Object.keys(this.prop).reduce((list, propKey, index) => {
        let label, value;
        label = this.prop[propKey];
        value = (this.details[propKey] || "-").toString();
        list.push({ index, label, value });
        return list;
      }, []);
    }
  },
  render(h) {
    return h("div", { class: "detail-page-info-content" }, [
      this.$scopedSlots.append && this.$scopedSlots.append(),
      h("el-row", { props: { gutter: 16 } }, [
        this.detailInfoList.map((item) =>
          h(
            "el-col",
            {
              props: { ...this.sizes },
              class: "info-item-content",
              key: item.index
            },
            [
              h("div", { class: "info-content_label" }, item.label),
              item.value.length < 32
              ? h("div", { class: "info-content_value" }, item.value)
              : h("el-tooltip", { props: { content: item.value } }, [
                h("div", { class: "info-content_value" }, item.value)
              ])
            ]
          )
        ),
        this.$scopedSlots.prepend && this.$scopedSlots.prepend()
      ])
    ]);
  }
};
</script>


此时开发者可以在外面通过插槽的形式注入一个 ElCol 组件或者其他组件,用来显示自定义的内容。


但是这时还有缺点:不能使用函数 format 转换需要显示的值,这种情况经常出现在处理字典值、时间日期等时候。


3. 阶段三:接收转换函数


这里的转换函数一般都用于单独的一个字段的处理,所以统一放在 prop 中。


<script>
export default {
  name: "DetailPageInfoContent",
  props: {
  },
  computed: {
    detailInfoList() {
      if (!this.details) return [];
      return Object.keys(this.prop).reduce((list, propKey, index) => {
        let label, value;
        if (typeof this.prop[propKey] === "string") {
          label = this.prop[propKey];
          value = (this.details[propKey] || "-").toString();
        } else {
          label = this.prop[propKey].label;
          props = this.prop[propKey].props;
          const format = this.prop[propKey].format;
          value =
            format && typeof format === "function"
              ? (format(propKey, this.details[propKey]) || "-").toString()
              : (this.details[propKey] || "-").toString();
        }
        list.push({ index, label, value, props });
        return list;
      }, []);
    }
  },
  render(h) {
    return h("div", { class: "detail-page-info-content", style: this.computedStyle }, [
      h("el-row", { props: { gutter: 16 } }, [
        this.$scopedSlots.append && this.$scopedSlots.append(),
        this.detailInfoList.map((item) =>
          h(
            "el-col",
            {
              props: { ...this.sizes, ...(item.props || {}) },
              class: "info-item-content",
              key: item.index
            },
            [
              h("div", { class: "info-content_label" }, item.label),
              item.value.length < 32
              ? h("div", { class: "info-content_value" }, item.value)
              : h("el-tooltip", { props: { content: item.value } }, [
                h("div", { class: "info-content_value" }, item.value)
              ])
            ]
          )
        ),
        this.$scopedSlots.prepend && this.$scopedSlots.prepend()
      ])
    ]);
  }
};
</script>


这里依旧遵循一个原则:改造影响最小化,不影响原有代码逻辑。所以这里在组装数据显示用的数组时,需要判断原有的 prop 配置格式。在单独一个配置项依旧为对象时,才调用其中的转换函数 format 处理显示结果。


另外为每一个显示项目增加了一个 props 配置,用来绑定到 ElCol 组件中,进行特定配置。


4. 阶段四:自定义 render 与配置化


如果上面的几种方式依然不满足情况:需要显示的不止有数据信息,还有其他按钮;需要根据条件隐藏某些显示项;需要增加四周的边距适配不同的页面;不需要显示信息,只需要自定义的显示内容。


所以重新对其进行改造:增加自定义 render 与配置项 onlyRenderhidden 等配置。


<script>
export default {
  name: "DetailPageInfoContent",
  props: {
    details: {
      type: Object,
      default: () => ({})
    },
    padding: {
      type: [String, Array],
      default: "8px 16px"
    },
    sizes: {
      type: Object,
      default: () => ({ xs: 12, sm: 12, md: 12, lg: 8, xl: 6 })
    },
    prop: {
      type: Object,
      default: () => ({})
    },
    labelPrefix: {
      type: String,
      default: ":"
    }
  },
  computed: {
    detailInfoList() {
      if (!this.details) return [];
      return Object.keys(this.prop).reduce((list, propKey, index) => {
        let label, value, render, hidden, onlyRender, props;
        if (typeof this.prop[propKey] === "string") {
          label = this.prop[propKey] + this.labelPrefix;
          value = (this.details[propKey] || "-").toString();
        } else {
          label = this.prop[propKey].label + this.labelPrefix;
          render = this.prop[propKey].render;
          hidden = this.prop[propKey].hidden;
          onlyRender = this.prop[propKey].onlyRender;
          props = this.prop[propKey].props;
          const format = this.prop[propKey].format;
          value =
            format && typeof format === "function"
              ? (format(propKey, this.details[propKey]) || "-").toString()
              : (this.details[propKey] || "-").toString();
        }
        !hidden && list.push({ index, label, value, render, onlyRender, props });
        return list;
      }, []);
    },
    computedStyle() {
      const padding = this.padding;
      if (typeof this.padding === "object") return { padding: padding.join(" ") };
      return { padding };
    }
  },
  render(h) {
    return h("div", { class: "detail-page-info-content", style: this.computedStyle }, [
      h("el-row", { props: { gutter: 16 } }, [
        this.$scopedSlots.append && this.$scopedSlots.append(),
        this.detailInfoList.map((item) =>
          h(
            "el-col",
            {
              props: { ...this.sizes, ...(item.props || {}) },
              class: "info-item-content",
              key: item.index
            },
            item.onlyRender
              ? [h("div", { class: "info-content_label" }, item.label), item.render && item.render(h, item)]
              : [
                  h("div", { class: "info-content_label" }, item.label),
                  item.value.length < 32
                    ? h("div", { class: "info-content_value" }, item.value)
                    : h("el-tooltip", { props: { content: item.value } }, [
                        h("div", { class: "info-content_value" }, item.value)
                      ]),
                  item.render && item.render(h, item)
                ]
          )
        ),
        this.$scopedSlots.prepend && this.$scopedSlots.prepend()
      ])
    ]);
  }
};
</script>


此时,我们的组件就可以满足绝大多数详情卡片的显示情况了,并且可以适应不同分辨率下的不同布局。


在使用时,我们只需要进行详情数据的配置,增加相关操作即可。


<detail-page-info-content :details="productDetails" :prop="baseInfoProps">
  <template #append>
    <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6" class="info-item-content">
      <div class="info-content_label">产品图片:</div>
      <image-preview url="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" />
  </el-col>
</template>
</detail-page-info-content>
//...
baseInfoProps: {
  productId: "产品ID",
  nodeType: { label: "节点类型", format: getEnumLabel, render: null },
  protocolType: { label: "接入协议", format: getEnumLabel },
  reserveProductNo: "接入产品ID",
  netWorkMethod: { label: "联网方式", format: getEnumLabel },
  syncState: {
  label: "同步状态",
  hidden: !this.isChannelEdition,
  render: (h) => h("el-button", { props: { type: "text", onClick: this.syncProduct.bind(this) } }, "同步")
  },
  connectType: { label: "连接方式", format: getEnumLabel },
  prdCode: { label: "产品类别", format: this.prdName.bind(this) },
  placeType: { label: "内外场类型", format: getEnumLabel },
  cipher: "产品密钥",
  createDt: "创建时间",
  updateDt: "修改时间",
  description: "产品描述"
},
productDetails: {}


5. 总结


与封装项目工具函数一样,封装项目公共组件常常需要配合项目需求,在结合项目需求与UI规范的情况下,脱离具体业务操作逻辑来封装组件。


在经历多个项目或者产品之后,小组内通常就能根据以往的项目经验与实际情况,封装一套自己内部的“半业务向组件库”。为什么说是“半业务”?


个人总结的就是:组件封装需要结合小组实际项目情况、组件需要脱离业务实际逻辑、组件需要在“最简单的配置使用”下满足常规使用场景、组件需要有较高的自由度支持配置化与二次扩展。


在实际的项目迭代过程中,我们封装的组件或者函数终究很难做到尽善尽美,所以我们能做的就是在封装的时候留下足够的余地,在迭代的过程中做好对原始代码的兼容;并且需要做好代码的可读性。


目录
相关文章
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
141 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
27天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
16天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
121 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
24天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
75 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
14天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
37 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
29天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
79 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
26天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
27 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
4月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
316 14
|
4月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
84 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75