基于 Angular 的前端组件化

随着浏览器性能提升，新的技术和形式不断升级，前端开发工程师面对的交互和设计也日趋复杂，开发周期变长，旧有的项目维护困难，与新的功能难以兼容匹配。前端开发者也需要学习和使用传统软件开发的思路和工具。其中组件化是最早在前端范围内展开应用的开发思想，比如 Bootstrap 对于标签样式的规范就是一种前端组件化。本篇文章是基于 Angular 框架对前端组件化的一些实践和思考，如有纰漏，还请谅解，欢迎指正。

组件化目的

目的一：复用

将部分模版和逻辑封装为组件，并在不同的页面位置中使用，可以实现代码的复用，同时保证页面展现和逻辑的统一。                  

如上图所示，红框中的组件分别被使用在商城首页和购物车相关推荐位，这两处的数据结构和样式完全满足复用的条件，故使用统一开发的组件，实现了前端代码的复用，便于维护。

目的二：理清开发思路

前端开发者在接到设计和产品提出的需求后，按照组建拆分的思想，将任务有效的细化，可以降低开发难度。拆分后的子组件复杂度更低，职责单一，也更有利于我们评估开发周期，控制研发风险，保证项目进度。当然能够有效的拆分需求，并构建组件树，需要开发者对需求和设计的理解非常透彻，这也变相的要求我们在开发之前要理清思路。

目的三