针对百度品牌专区业务的前端框架的设计与实现

发布时间：2019-08-13 11:53

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

２０１３］；邋２００４年，，ＡＪＡＸ诞生并以此为基础打造出谷歌地图和Ｇｍａｉｌ，获得巨大的逡逑关注，从此一个全新时代诞生［柯昌正，黄厚宽，２００７］。ＡＪＡＸ标识着Ｗｅｂ２．０时逡逑代的到来，从此Ｗｅｂ网页开始向Ｗｅｂ应用的方向迈进［唐灿，２００９］，图１．１逡逑展示了在Ｗｅｂ２．０时代的开发模式，这个阶段ＪａｖａＳｃｒｉｐｔ承担了更多的开发任务。逡逑Ｗｅｂ邋２．０逡逑Ｃｌｉｅｎｔ邋Ｓｉｄｅ逦Ｓｅｒｖｅｒ邋Ｓｉｄｅ逡逑Ｂｒｏｗｓｅｒ逡逑ＨＴＭＬ邋逦逦邋ＣＤＮ逡逑ｆ逦逡逑ＣＳＳ邋逦逡逑Ｓｅｒｖｉｃｅ逡逑逦邋Ａｐｐ邋Ｓｅｒｖｅｒ逡逑ＪａｖａＳｃｒｉｐｔ〈．－．逡逑图１．邋１邋Ｗｅｂ２．０下开发模式逡逑Ｗｅｂ２．０时代标志着Ｗｅｂ技术的迅速发展，种类繁多的Ｗｅｂ邋ａｐｐ随之诞生，逡逑１逡逑

２００５］。为了应对这种复杂度的提高，原本应用在后端的分层架构被引逡逑入到前端领域，并由此催生出各种前端框架，以ＡｎｇｕｌａｒＪＳ、Ｒｅａｃｔ、Ｖｕｅ为代逡逑表的前端框架在这个时代大放异彩，图１．２展示了主流前端框架的架构图以及其逡逑中模板、数据与控制逻辑的分离情况。逡逑逦Ｃｏｍｐｏｎｅｎｔｓ邋ｉｎ邋ＳＰＡ邋逦逡逑Ｃｌｉｅｎｔ邋Ｓｉｄｅ逦Ｓｅｒｖｅｒ邋Ｓｉｄｅ逡逑Ｂｒｏｗｓｅｒ逡逑ｔｅｍｐｉ逦ｃｔｒＭ逦ｍｏｄｅｌ邋１逡逑Ｓ＾ｒｖｉｃ？逡逑Ｔｅｍｐｌａｔｅｓ逦Ｃｏｎｔｒｏｌｌｅｒｓ逦Ｍｏｄｅｌｓ逦Ａｐｐ逦Ｓｅｒｖｅｒ逡逑ｔｅｍｐ２逦ｃｔｒｌ２逦ｍｏｄｅｌ２逡逑图１．２前端框架架构逡逑框架带来的优势十分明显，前后端职责分工也更加清晰明确。在明确职责的逡逑情况下，前端只需要关注浏览器端的工作，从而让并行前端开发的复杂度可控。逡逑通过合理的分层，前端代码的厚重感降低，开发得以有序进行。同时在使用框架逡逑的前提下，部署工作相对独立，可以快速改进产品体验［Ｔｕｃｈｏｌｋａ邋Ａ，邋Ｇｕｒｂａｎｉ邋Ｐ，逡逑２０１０］。逡逑在这样的技术大背景下，为了满足百度品牌专区前端开发的需求，百度品牌逡逑专区前端团队决定开发出一套适合自身业务特点的前端框架。百度品牌专区是在逡逑网页搜索结果页顶部为知名品牌量身打造的资讯发布平台，以整合各类资源为目逡逑标提升用户的搜索体验。由于业务增长，以视频和图片为主的交互形式日益丰富，逡逑传统的为每个品牌广告写样式、通过ＣＳＳ控制样式、通过ＪＳ库来实现功能复逡逑２逡逑
【学位授予单位】：南京大学
【学位级别】：硕士
【学位授予年份】：2017
【分类号】：TP311.52


本文编号：2526105