模块化与组件化

• 组件化和模块化的中心思想都是分而治之。目的都是将一个庞大的系统拆分成多个组件或者说是模块。

  模块化的定义

  Modular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality.

• 简单来说,模块化就是将一个程序按照其功能做拆分，分成相互独立的模块，以便于每个模块只包含与其功能相关的内容。模块我们相对熟悉,比如登录功能可以是一个模块,搜索功能可以是一个模块,汽车的发送机也可是一个模块.

组件化的定义

Component-based software engineering (CBSE), also known as component-based development (CBD), is a branch of software engineering that emphasizes the separation of concerns in respect of the wide-ranging functionality available throughout a given software system. It is a reuse-based approach to defining, implementing and composing loosely coupled independent components into systems. This practice aims to bring about an equally wide-ranging degree of benefits in both the short-term and the long-term for the software itself and for organizations that sponsor such software.

• 组件化就是基于可重用的目的，将一个大的软件系统按照分离关注点的形式，拆分成多个独立的组件，主要目的就是减少耦合.
  • 一个独立的组件可以是一个软件包、web服务、web资源或者是封装了一些函数的模块。比如汽车的发动机是一个模块,也是一个组件,再或者前端中的一个日历控件是一个模块,也一个组件.这样，独立出来的组件可以单独维护和升级而不会影响到其他的组件.

JS/CSS模块化开发

• 分而治之是软件工程中的重要思想,是复杂系统开发和维护的基石,这点放在前端开发中同样适用.在解决了基本开发运行效率问题之后,前端团队开始思考维护效率,模块化是目前前端最流行的分治手段.
• 模块化开发的最大价值应该是分治.
• 不管你将来是否要复用某段代码,你都有充分的理由将其分治为一个模块

组件化开发

• 分治的确是非常重要的工程优化手段.前端作为一种GUI软件,光有JS/CSS的模块化还不够,对于UI组件的分治也有着同样迫切的需求
  • 1.页面上的每个独立的可是/可交互区域都可以视为一个组件
  • 2.每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护
  • 3.由于组件具有独立性,因此组件与组件之间可以自由组合
  • 4.页面只不过是组合的容器,负责组合组件形成功能完整的界面
  • 5.当不需要某个组件,或者想要替换组件时,可以整个目录删除替换

组件化vs模块化

• 组件和模块是一对容易混淆的名词,也常常被用来相互替换,两者是否有差异往往取决于专业背景、所在领域、以及视角。从设计上来看,组件强调复用,模块强调职责(内聚、分离),或者说组件是达到可复用要求的模块
  • 模块化强调的是拆分，无论是从业务角度还是从架构、技术角度，模块化首先意味着将代码、数据等内容按照其职责不同分离，使其变得更加容易维护、迭代，使开发人员可以分而治之。
  • 组件化则着重于可重用性，不管是界面上反复使用的用户头像按钮，还是处理数据的流程中的某个部件，只要可以被反复使用，并且进行了高度封装，只能通过接口访问，就可以称其为“组件”。

参考网址:http://blog.csdn.net/dd864140130/article/details/53645290