滴滴WebApp实践经验分享

滴滴WebApp实践经验分享黄轶，前端技术专家，现就职于滴滴出行公共FE团队，前端技术专家，《Vue.js权威指南》主要作者。计算机专业硕士，2012年毕业于北京科技大学，曾任职百度。擅长前端自动化、工程化，前端架构等方向。业余时间喜欢写点H5小游戏，偶尔造造轮子。喜欢关注业界一些新技术，乐于分享，热爱开源。对代码有洁癖，追求高质量的代码。

2.前端工程化在WebApp的实践需求分析（1）支持模块化开发，包括JS和CSS。（2）组件化开发。一个组件的JS、CSS、模板放在一个目录，方便维护。（3）多个项目按项目名称+版本部署，采用非覆盖式发布。（4）允许第三方引用项目公共模块。（5）要支持CSS预处理器，前端模板。（6）与公司的jenkins发布平台配合，上线方便。（7）前后端分离，前端可以独立自主上线。

按项目名称+版本发布的fis-conf.js配置规则如下：

编译后部署的目录结构如下：

3.通用地图JS库的设计和实践需求分析（1）支持多种地图、多种地图场景的开发。（2）屏蔽底层地图库（高德、腾讯）的接口差异。（3）实现小车平滑移动。解决方案（1）底层对腾讯地图和高德地图分别封装（不会在源码中出现if(qq){}风格的代码)，依据webpack动态打包成2个JS文件，上游根据需求异步加载JS，对外提供同一套编程接口。

行程分享这个场景中，有等待接驾、行程中、行程结束等状态，有轨迹，小车平滑移动等功能。我们要做的就是利用通用地图JS库提供的接口去编写行程分享的逻辑。贴一下部分代码，看一下如何去使用封装好的地图JS库。我们可以先去写一个行程分享的场景：tripShare.js

然后我们这样去注册场景。

我们可以调用场景的方法，又由于场景继承了EventEmitter事件中心，它会通过trigger派发事件，我们可以监听这些事件，去做一些事情。4.统一登录SDK的设计需求分析（1）滴滴有众多业务线，每个业务线都有独立的域名，需要打通各个WebApp域名的登录态。（2）方便新老业务线、运营活动等页面接入登录。（3）提供简单、友好的接口。

技术栈（1）原生js（2）webpack打包5.通用客户端JSBridge的封装需求分析（1）内嵌在滴滴app端里的页面，需要通过JSBrigde的方式获取端的一些能力。（2）屏蔽IOS端和Android端的一些底层通讯差异。（3）提供简单、友好的接口。