☍TealUI 介绍

概述

适用场景

UI 开发

代码库

二次开发

生态

开放生态

封闭生态

下一步做什么

☍概述

TealUI 的目标是打造一个小而精的专业前端组件库。

• 小：每个组件都是依赖少、可独立使用的小单元。
• 精：精简的设计使得组件可以用最少的代码实现最多的需求。
• 专业：紧跟前端技术发展，符合最新规范。

☍适用场景

☍UI 开发

TealUI 提供了三套开箱即用的 UI 组件，分别适用于企业级后台管理系统、移动端和 PC 端。

每个 UI 组件的 HTML 模板、CSS 样式和 JS 交互逻辑完全分开，方便定制。

☍代码库

如果你之前总在网上找像常用正则、人民币转大写这些工具函数，不妨试试先在组件库搜索，库里提供的代码都有质量保障，且文档齐全。

☍二次开发

目前大多数 UI 库单纯使用很方便，但想要定制组件就比较麻烦了。 很多企业都因为皮肤主题问题而无法使用现成的组件库。

TealUI 从最初就是为二次开发而创建的。开发 TealUI 所需的所有工具和文档都是对外公开的。

☍生态

随着 node.js 的出现，前端社区迅速发展，社区内提供了丰富的组件。

☍开放生态

开放社区带来了这些优势：

1. 功能全面。几乎每个功能都可以找到现成组件。
2. 成熟稳定。有多人共同维护、测试，使用无忧。
3. 优胜劣汰。优秀的组件会逐渐代替其它同类组件，取长补短。
4. 沟通互助。假如大家都使用同一组件，沟通互助就会方便很多，碰到问题也容易在网上找到现成解决方案。

就像开放的安卓生态圈，开放社区同样也带来了一些隐患：

1. 生态各异。由于是不同人参与维护，因此相同的功能却可能有完全不同的用法、命名。这无形中增加了学习成本，也是很多前端人觉得累觉不爱的原因：每学习一个新组件都可能要清空现有知识体系和习惯，从零开始。
2. 代码臃肿。不同组件可能使用了不同底层，使得项目里重复引入很多功能相似的代码。为了满足不同人的需求，社区内组件一般都会提供尽可能多的功能，而一般用户只需要其中部分功能。
3. 性能问题。社区内组件将开发体验放在首位，性能问题很容易被忽略。
4. 选择困难。由于组件数过多，很多组件又相似，从中找到功能够用又好用的组件是一件很辛苦的事情。

☍封闭生态

TealUI 是一个类似苹果的封闭生态圈：

• 我们帮用户作了一些决定，同一个功能只保留一个用法，以减少复杂度。
• 高度统一，自成体系。所有相似的组件都提供相似的接口和文档，且依赖同一个底层。
• 有限开放，精挑细选。吸收社区里的优秀组件，但会根据组件库标准进行改造。

TealUI 的组件和社区内同类型的相比，功能更纯、体积更小、性能更高。对于团队来说，统一的组件规范也能提升协作的效率。

社区内知名框架和 TealUI 等效组件的体积比较结果如下：

☍下一步做什么

• 开始使用