随着web技术的迅速发展,各种各样的web app应运而生,前端开发也进入了飞速发展的时代。不同于过去的形式,前端不再是简单的浏览型页面单元,多元的展示形式和日益复杂的前端交互,让前端开发的复杂度大大增长。与此同时,对于前端开发人员之间的协作也提出了更大的挑战。基于这种现状,前端领域开始寻求解决方案。前端架构的概念被提出来,以AngularJS、react、Vue为代表的MV*前端框架也由此走入大家的视线。本文所描述的前端框架,正是在这样的大背景下,针对百度品牌广告业务的前端开发需求而诞生的。百度品牌专区是在网页搜索结果页最上方为为各个品牌提供广告服务的资讯发布平台。由于业务增长,前端交互形式日益丰富,传统的为每个品牌广告写样式、通过css控制样式、通过js库来实现功能复用的解决思路已经不能满足业务需求,并且这样的做法让代码的质量也不能得到保障。因此在时代背景下,结合自身业务特点,百度品牌专区前端团队开发出一套适合自身业务的前端框架。本文所描述的前端框架,借鉴了主流框架的思路,采用MVC思想构建前端组件。框架基于组件化实现,单个组件通过html模板、数据配置文件和模块化的JS逻辑构成,有良好的可复用性,并且由于使用的模板本身支持模板继承、模板复用等高级语法,实现了组件的嵌套复用。为了进一步提高开发效率,框架提供了自动化构建和自动化测试机制,从而简化了本地开发到实际上线之间的额外工作量。框架的使用,使得广告样式的开发被细分到组件级别的开发与组件搭建,在满足多样的广告展示的同时减少了开发人员的重复劳动。以维护一套有效的组件为前提,成员间的协同工作也得到保障,有效的提高了开发效率,同时浏览器端的加载性能得到提升。