前端通用组件设计

Posted 2023-04-24

参考技术A

调用组件库的API相信很多人都会用，但是如何封装一个高复用的组件并不是每个人都能做到，而这也是检验一个前端开发人员的一个标准。

说到开发组件，首先需要考虑一个问题，一个可复用的组件都需要具备哪些必要条件。

1. 细粒度考量
看过设计模式的朋友应该有了解过很多设计原则，其中一个就是 单一职责原则 ，这个原则放在开发组件中也同样适用。在原则上一个组件就只负责一件事，这就是单一原则所带来的好处也非常明显，就是可以更大可能的复用组件。但如果职责过于单一，也会造成组件碎片化严重，过于抽象。

因此我们需要考虑，所谓的单一职责原则是建立在可复用的基础上的。否则，可以做为独立组件的内部组件进行使用。

2. 组件通用性考量
组件设计之初是为了当时的页面设计进行封装设计的，那么之后的页面设计极大可能是与之前不同的，那么之前设计的组件就不能用了。

而一旦发生这样的情况，就说明我们之前所设计的组件是不通用的，需要重新设计了。就像Antd组件库那样，预留了dropdownRender进行组件渲染。

通用性的设计就代表着将放弃对DOM的操作权，暴露给开发者进行操作，组件开发者本身只负责底层逻辑和基本的DOM结构。这也是开发通用型组件的秘诀之一。

3. 技术选型
css存在着许多的弊端，例如样式易冲突（没有作用域的概念）、书写繁琐（不支持嵌套）、缺少变量（不便于一件更换主题）等等。而解决这些问题的方案也是层出不穷，从最早的css预处理，到后来的Postcss，再到后来的styled-compontent，各种方式任君选择。

4. 打包工具
产品的设计思想固然是核心，但是也需要一堆辅助工具来来帮助我们开发，例如编译工具、测试工具、打包工具。

说到打包工具，就不得不提一下如今非常火爆的，需要配置工程师专门配置的webpack了。但是他也有一个强大的竞争对手 rollup。

rollup更适合用于组件库的打包，优势如下：

设计一个轮播图组件
学以致用，学了就肯定要实践一下。轮播图是一个比较常见的组件，每个组件库中都封装的有，接下来我们也来介绍一下如何设计一个轮播图组件。

1. 轮播图原理
通常情况下我们使用轮播图是这样编写的

那么为什么放入了四个div盒子却只显示一个呢，这是因为可视区域是固定的，只需要移动div盒子就可以显示出后面的盒子，这样就达到了轮播的效果。

为了是观看效果更好，我们都会隐藏掉可视区域之外的内容，这样就是大家经常看到的轮播图了。组件就可以这样设计：

可以通过transform: translateX()不断改变SlideList的位置，就可以达到轮播的效果了。

2. 轮播图的基础实现
知道了基础原理就可以进行组件的实现了，这里以移动端轮播图为例。

首先，获取移动端可视窗口的宽度。

------- 未完待续 --------

如何通过 Vue＋Webpack 来做通用的前端组件化架构设计

链接：http://web.jobbole.com/86977/

目前如果要说比较流行的前端架构哪家强，屈指可数：reactjs、angularjs、emberjs、avalonjs、vuejs。

我个人接触使用过：avalonjs、angularjs、vuejs。因为工作以及前端团队能力的问题，所以在不同的公司，在开发工作中选用了不同的前端架构。

以下仅仅是代表我个人选用架构的一些看法和理由，如下：

angular:

我觉得angularjs的学习上手周期比较长，可能遇到问题，都无法立刻解决，而且编码的质量明显的很差，如果团队没有制定规范，那写出来的代码就没法看。对于一个选用angularjs的团队来说，我认为编码规范是很重要的，否则对编码能力是没有提升的。

avalon:

avalonjs文档资料没有那么全，我感觉一些开源支持的力量不够多。不过，如果有项目需求，需要去做IE浏览器的支持话，我建议选择avalonjs

vue：

vuejs 文档比较齐全，vue吸取了angularjs 的一些优点，规避了一些缺点，至少编码规范上有了一个质的飞跃，学习上手的周期比较短。vue起初只是一个轻量级的类库，用来做类似于react的事情，同时vue也是可以拿来做前端架构设计的，比如：vueify + vue-router（spa框架）。

以上说了那么多没用的，下面就来点干活了！

我的前端组件化架构设计，目录如下：

项目架构用到的知识点，还是挺多的，知识清单如下：

［1］:   gulp + webpack 构建打包工具， 使用了一系列的loader，比如：vue-loader,  sass-loader, babel-loader , 以及 postcss，postcss-custom-properties，等等

[2]  :   postcss-custom-properties : 用来做样式全局化, 只需要通过变量去维护，通过编译变量既可以换肤。

 [3]  :   vue-loader （vue文件组件化）:用来去编译处理 *.vue 的文件，一个vue 文件就是一个单独的组件，vue组件开发具有高独立且易维护。组件的划分可大可小，一个页面也可以看作成由多个vue 组件构成的，一个页面也可以是一个vue组件, vue 文件结构如下：

[4]  ： babel-loader  ：实现对vue文件中 es6 语法的编译解析

 [6]  ： vue （插件式方式）：vue本身提供了一个install 方式用来注入，我们可以注入一些全局的(属性、方法、以及通用的ui组件)。

下面说说文件夹的含义：

  common 文件夹: 是用来存一些通用的东西，比如样式，以及全局的js等等

  components 文件夹：用来放独立的组件，我打算后期做细分，ui 组件，以及page 组件等等，这里面就是团队的心血，以后就能做成独立的组件库了。

  filters 文件夹：用来放通用的过滤器操作。

  plugins 文件夹：用来放 Vue.use 注入到Vue全局的插件库，比如：请求加载、弹框、分页、ui组件 等等。plugins 只是把 componets组件暴露给 Vue全局。

  views 文件夹: 用来存放页面模块

  app.vue 文件：第一次启动的主程序模块

  app.js 文件：启动前的加载，注入，实例化

  router.config.js 文件：路由模块

目前该架构在前后台的SPA架构都适用，可能还是有很多不完善，不过我还很年轻，vue也还狠年轻，望各位道友多给我们年轻人一些机会。

【今日微信公号推荐↓】

更多推荐请看《》