关于日常前端公用组件的封装

6,175 阅读2分钟

1 前端组件化发展之路

  • 静态页面的公共资源封装 –比如公用的js文件 css文件在多个页面复用(模块化思想 交互少)
  • 早期动态页面 把具有同一类的业务逻辑的页面单独组建起来 在页面动态引入 比如页面的公用页头 页尾等(页面级别封装)
  • 以JQuery-UI, easy-UI,miniUI以及大名鼎鼎的ExtJS代表的DOM封装–表现炫酷 但是很难维护和修改
  • 前端MV*时期到来 Angular React Vue (自定义组件思想 一切皆组件)

2 组件封装的好处

  • 降低系统各个功能的耦合性
  • 提高了功能内部的聚合性
  • 前端工程化
  • 代码维护难度降低
  • 开发效率以及开发成本的提升

3 组件封装的原则

一个组件只专注做一件事,且把这件事做好(通用 易用 可组合)

4 组件封装的难点

  • 怎么做到最大程度的通用但是又能支持相对的个性化(个性–通用)
  • 组件之间的数据共享
  • 组件之间的事件传递
  • ....(开发人员的抽象能力 编码能力 使用规范 说明文档 错误处理)...

5 个人对前端组件化的思考

  1. 并不打算专门去做组件封装 不需要为了封装而封装 这个涉及到太多东西了 技术选型 组件设计风格 整体的ui风格 业务场景(组件类型)--区别于专业的框架封装工具组
  2. 最好在项目初期根据原型来进行前端公用组件的开发 一开始可以针对项目的业务场景来设计组件 之后对代码进行回顾和优化的时候可以抽离出更加抽象以及通用的组件
  3. 需要强调的是使用文档需要很规范 开发的组件简单易用 配置项写清楚 开箱即用

6 既有项目的前端公共组件成果分享

有兴趣的读者可以看下,基于Vue+Element封装的表单搜索表格联动组件

鲨鱼哥的前端摸鱼技术群

欢迎大家技术交流 内推 摸鱼 求助皆可 - 链接