组件式开发

为何要作组件化？

不管前端也好，后端也好，都是整个软件体系的一部分。软件产品也是产品，它的研发过程也必然是有其目的。绝大多数软件产品是追逐利润的，在产品目标肯定的状况下，成本有两个途径来优化：减小部署成本，提升开发效率。

减小部署成本的方面，业界研究得很是多，好比近几年很流行的“去IOE”，就是很典型的，从一些费用较高的高性能产品迁移到开源的易替换的产品集群，又好比使用Linux + Mono来部署.net应用，避开Windows Server的费用。

提升开发效率这方面，业界研究得更多，主要途径有两点：加快开发速度，减小变动代价。怎样才能加快开发速度呢？若是咱们的开发不是从新造轮子，而是 每一次作新产品均可以利用已有的东西，那就会好不少。怎样才能减小变动代价呢？若是咱们可以理清模块之间的关系，合理分层，每次变动只须要修改其中某个部 分，甚至不须要修改代码，仅仅是改变配置就能够，那就更好了。 咱们先不看软件行业，来看一下制造行业，好比汽车制造业，他们是怎么造汽车的呢？造汽车以前，先设计，把整个汽车分解为不一样部件，好比轮子，引擎，车门， 座椅等等，分别生产，最后再组装，因此它的制造过程能够较快。若是一辆汽车轮胎被扎破了，须要送去维修，维修的人也没有在每一个地方都修一下，而是只把轮胎 拆下来修修就行了，这个轮胎要是实在坏得厉害，就干脆换上个新的，整个过程不须要不少时间。

 

JavaScript这个部分有好几个发展阶段。

• 早期的共享文件，把公共功能的代码提出出来，多个页面共用
• 动态引用，消灭全局变量
• 在某些框架上进一步划分，好比Angular里面又分为provider，service，factory，controller

JavaScript组件化的目标是什么呢，是清晰的职责，松耦合，便于单元测试和重复利用。这里的松耦合不只体如今js代码之间，也体如今js跟 DOM之间的关系，因此像Angular这样的框架会有directive的概念，把DOM操做限制到这类代码中，其余任何js代码不操做DOM。

如上图所示，总的原则是先分层次，层内再做切分。这么作的话，再也不存在以前那种端到端组件了，使用起来没有原先那么方便，但在另外不少方面比较好。

6.3. CSS的组件化

这方面，业界也有不少探索，好比LESS，SASS，Stylus等。为何CSS也要作组件化呢？传统的CSS是一种扁平的文本结构，变动成本较 高，好比说想要把结构从松散改紧凑，须要改动不少。若是把实际使用的CSS只看成输出结果，而另外有一种适合变动的方式看成中间过程，这就好多了。好比 说，咱们把一些东西定义成变量，每一个细节元素使用这些变量，当须要总体变动的时候，只需修改这些变量而后从新生成一下就能够了。