为什么要做组件库?

原创 2018年04月17日 18:15:37

1.背景介绍

前端组件化,这是一个概念,也是一种技术。那么为什么要实现前端组件化?

2.知识剖析

传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用, 而且往往随着业务的增长或者变更,系统的复杂度会呈现指数级的增长, 经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。

针对此弊端,其实业界早就有了一些探索,我们希望一个大且复杂的场景能够被分解成几个小的部分, 这些小的部分彼此之间互不干扰,可以单独开发,单独维护,而且他们之间可以随意的进行组合。 就拿电脑主机来说,一台整机包括CPU,主板,内存,硬盘等等,而这些部件其实都是由不同的公司进行生产的, 他们彼此之间根据一套标准分别生产,最后组装在一起。当某个部件出现问题时,不需要将整台主机都进行维修, 只需要将坏的部件拿下来,维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务,而在前端开发中的体现就是组件化。

3.常见问题

CSS怎么做组件化呢?为什么要做组件化?

4.解决方案

CSS的模块化基本上是将实现某一模块Dom样式的CSS放在不同的文件中, 显然随着WEB应用的发展,开发者已经很不满足于这种简单的模块化了。 其实关于CSS的组件化,业界也早就已经有了很多探索,比如less,sass等。 那么为什么CSS也要组件化呢?

从开发者角度来看: 

在CSS上,保证代码上的模块化,具有独立作用域; 内部的布局,字体的变化(不包括颜色这类是不可控的)只由其最外层容器影响。 概括的说就是,组件内部的布局只受容器变化影响。 在容器不受外部影响变化的前提下,内部容器的样式不被外部所影响

从整个公司的发展来看: 

业务划分更佳清晰,新人接手更佳容易,可以按组件分配开发任务。 项目可维护性更强,提高开发效率。 更好排查问题,某个组件出现问题,直接对组件进行处理。 开发测试过程中,可以只编译自己那部分代码,不需要编译整个项目代码。

CSS是一种扁平的结构,一个Dom可能对应着一个CSS样式,而这些CSS样式很有可能出现公共的部分, 那么提取这些公共的部分也就实现了CSS的组件化,在诸如less和sass出现之前, 开发者都是把公共的CSS样式写成一个个公共class,但是这样之后CSS文件的阅读性就变得困难了, 当然也不容易修改。而less和sass出现之后,使得CSS的编程可以定义变量, 可以实现继承,CSS内容的结构也变得更加清晰,提高了CSS文件的阅读性,更容易让人理解,修改起来也变得简单。

5.编码实战

demo

6.扩展思考

做组件库有什么好处?

7.参考文献

参考一:谈谈前端组件库

参考二:博客

8.更多讨论

bootstrap有哪些常用的组件?


三个问题:

1.还有什么好的组件推荐

解答:还有什么好的组件推荐 答案

2.组件是不是一定要注重复用性呢?

解答:是的

3.组件,怎么引用,怎么覆盖怎么修改?

解答:引用组件一般都在自己写的文件的前边引入如果想要修改部分东西,你只能修改组件里的东西,用自己的类名的话是修改不了的你只能在elements里找到组件里你要修改的部分,用人家的类名部分来修改

为什么要有一个好的架构

转载至:http://blog.csdn.net/qq20004604/article/details/70480932 1、为什么要有一个好的架构 首先明确一点,架构是为需求服务的。 ...
  • qq_34201826
  • qq_34201826
  • 2017-09-09 15:22:10
  • 142

谈谈前端组件库

谈谈前端组件库
  • DoBetterEveryDaY
  • DoBetterEveryDaY
  • 2014-11-21 09:58:09
  • 1380

前端为什么要做组件化

本文转自:EAII企业架构创新研究院(微信号:eaworld) http://mp.weixin.qq.com/s?__biz=MzI5MDEzMzg5Nw==&mid=2660394384&idx=...
  • u014036123
  • u014036123
  • 2016-11-15 19:08:28
  • 6798

为什么要做好需求分析??

1、为什么要做需求分析 需求分析就是分析软件用户的需求是什么,用户通过软件可以实现那些功能,完成那些操作。如果我们投入大量的人力物力,但是最后产出的软件根本没有用户愿意使用,或者根本不能满足用户的需要...
  • aswallow0323
  • aswallow0323
  • 2016-09-02 18:29:47
  • 840

为什么都要向上爬,做领导

为什么都要向上爬,做领导? 第一,证明自己的实力 第二,不看别人的脸色,如果你不上去,你的小弟弟上去,你就得看小弟弟的脸色 第三,工资高 第四,有那么一点点权力 第五,证明自己在发展 如果 做码农,能...
  • RSS_40728440
  • RSS_40728440
  • 2018-01-12 16:42:19
  • 23

为什么要做性能测试?

为什么要做性能测试?以下是摘自Loadrunner帮助文档的回答: Automated Performance Testing is a discipline that leverages produ...
  • Testing_is_believing
  • Testing_is_believing
  • 2009-09-13 21:04:00
  • 3906

聊一聊为什么要做公众号

从写公众号的第一篇文章到今天差不多运营了一周左右,就在昨天我们收到微信的原创邀请,意味着我们今后发布的文章就会得到一定程度的原创保护,这是一件值得高兴的事情。 今天要和大家聊一聊为什么要做这个公...
  • gschen_cn
  • gschen_cn
  • 2017-03-12 21:44:40
  • 206

吉日嘎拉的梦想 - 做全国最好的后台权限管理系统,提高我们的软件生产率,成为权限标准组件,为软件系统的集成提供咨询服务

软件编程走火入魔之:女人的脸,男人的代码 每天提高一点点,每天积累一点点,每天一点进步,有目标有计划的奋斗一生,每天追逐梦想,软件人生,人生软件。 为什么不自己做网站,选择博客园?为什么程序不加密...
  • jirigala
  • jirigala
  • 2009-07-20 20:49:00
  • 1284

为什么要做架构设计

架构设计的目标: 减少重复代码    重复是万恶之源!这是从结构化程序设计时代就存在的格言,在面向对象时代依然是金玉良言。方便理解逻辑    清晰简洁的结构能够让人以最快的速度理解和掌握程序代码的逻辑...
  • ZhangXiaoHui
  • ZhangXiaoHui
  • 2007-08-03 13:59:00
  • 1006

为什么要给软件做测试?如何测试呢?

你为什么应该测试你的软件?你应该如何测试软件? 有些人对这些问题有非常简单的回答。 及时享乐型的程序员根本懒得去测试,快乐地活在当下。更严肃的程序员会告诉你软件测试是为了开发出高质量的...
  • zhusongziye
  • zhusongziye
  • 2017-11-20 21:55:55
  • 145
收藏助手
不良信息举报
您举报文章:为什么要做组件库?
举报原因:
原因补充:

(最多只允许输入30个字)