百度药直达项目前端设计和实现.docVIP

百度药直达项目前端设计和实现 　　摘要：随着移动互联网技术的飞速发展，基于HTML5的WebApp开发模式越来越流行，前端开发成为决定用户产品体验的关键，很多人开始关注前端技术开发。以百度公司针对医药行业推出的药直达项目为研究对象，深入分析了当前医药行业的互联网化需求，对前端代码进行了分层设计，并在此基础上完成了药直达产品的前端实现。 　　关键词：Web 前端；HTML5；WebApp；分层设计模式；百度 　　中图分类号：TP319 文献标识码：A 文章编号：1672-7800（2016）004-0095-03 　　0引言 　　随着移动互联网和O2O时代的到来，移动端电商化交易额正稳步增长，人们开始习惯于在移动终端完成电商的交易闭环。然而，在巨大的医药市场方面，医药电商仍有巨大的增长空间。在“移动互联网+健康”的大背景下，百度推出了针对医药行业全方位的解决方案――药直达产品。药直达立足于“连接人与医药服务”的理念，计划逐步建立“医疗+医药+健康”的生态系统，重构行业价值链，推动大健康产业的发展。除了助力药店的移动互联网转型、打造人与药师的服务链条外，药直达也致力于为工业药企整合互联网销售渠道，努力打通医药全行业生态链[1]。 　　为了迅速占有市场，药直达采用了基于WebApp的开发模式，可通过手机端任意浏览器或百度糯米、百度地图进行访问。它充分利用了WebApp的跨平台、开发效率高、无需安装更新等优势，很好地适配了不同分辨率和操作系统的移动设备，为药直达的产品迭代提供了有力支持，避免了分别开发安卓和苹果应用带来的时间和人力成本。目前，这种通过移动端WebApp快速迭代的开发模式正越来越受到欢迎和重视。 　　1需求分析 　　为了更好地给消费者提供便捷的购药服务，药直达通过深度对接用户需求和客户诉求，其核心设计理念为：用户无需单独下载手机应用，仅通过百度搜索药直达、药店、药、疾病等关键字，便能直达购药页面，然后根据用户的定位和配送地址获取附近药店准确的库存、价格、服务时间等信息，完成咨询、选药、推荐药、购药、送药的一站式服务。具体而言，其具有以下核心功能：①药直达入口：需要在百度搜索结果或百度百科词条中开发对应的卡屏入口；②药店/聚合首页：对药品进行分类、列出热销药品以方便客户选择；③药品列表页：可搜索药品并对药品按照要求进行筛选、排序；④药品详情页：展示商品相关信息，提供用户与售卖药店的沟通平台以及将药品加入购物车等操作；⑤购物车：根据药店进行拆单，用户根据不同的药店分别对药品进行结算购买；⑥确认订单页：包括切换收货地址、选择支付和配送方式、使用优惠券、订单提交等功能；⑦订单管理：包含订单信息查看、订单取消、确认收货、评价等功能。 　　药直达核心购物流程如图1所示。 　　2药直达WebApp设计 　　根据需求分析，首先针对每个页面模块进行具体功能点的划分，然后对基于Stylus的样式和基于AMD的JS逻辑代码进行分层设计[2]： 　　2.1样式框架设计 　　随着OOCSS（Object-oriented-CSS）、SMACSS（ScalableModularArchitectureforCSS）、BEM（Block、Element、Modifier）等优秀CSS设计模式的提出，在深入研究了相关设计模式之后，提出了页面结构无样式代码、可复用地使用样式Class、在样式代码中对几何属性和可视属性进行分离的样式设计原则，并基于提出的设计原则对药直达进行样式框架上的分层[3 　　]： 　　图1药直达核心购物流程 　　（1）Base层。由于每个浏览器都有自己的默认样式，甚至同是Webkit内核的浏览器，在不同的手机平台上也具有差异。Base层代码主要包含针对不同浏览器默认样式的重置以及对项目中公用基础代码的引用两部分内容。目前关于浏览器默认样式重置有两种方案，分别是：CSSReset和Normalize。 　　（2）Layout层。Layout是指整个项目的页面框架布局，页面是由一块块的“样式区域”组成，如header、footer等，构成了“页面骨架”。Layout层主要针对这些“骨架”性的结构进行几何属性（宽度、高度、位置等）样式的描述。同时，作为移动端项目，还需要将响应式布局（ResponsiveWebDesign）与网格（GridSystem）规则也写在这一层。 　　（3）Module层。Module层的样式指在多个页面被重复使用的WebComponent，比如：弹出框、分页、导航、进度条等。出于可复用性的角度考虑，需要将它们从业务代码中抽离，然后在对应模块进行按需加载，以增强可维护性，提高开发效率[4]。 　　（4）Biz层。Biz层即通常所指的业务层，通常每个页面模块都对应一个Biz层的