《第三方开发前端实践课件》由会员分享，可在线阅读，更多相关《第三方开发前端实践课件（36页珍藏版）》请在金锄头文库上搜索。
1、第三方开放平台前端开发实践,周杰 (hehe123),Agenda,关于我们 关于第三方开放平台 产品 & 平台 需求 & 痛点 寻求解决之道 布道 我们还可以做 结语 Q&A,关于我们,姓名：周杰 (Jerrod.Zhou) 昵称：hehe123weixin：hehe123 Mail: | 职位: 杭州光云科技有限公司 前端技术专家 Git： 曾经就职于 Cisco.HZ, 对于与web有关的多媒体技术，游戏等兴趣多多并且有所成绩。同时也在致力于前端工程化开发模式的实践。是个多动且闷烧的大叔。,关于我们,姓名: 杭州光云科技有限公司 链接: 工作: 以为taobao卖家服务的第三方软件开发公
2、司, 服务于数十W的淘宝卖家。 主打: 超级店长, 超级绩效, 智能营销 多类目 金牌淘拍档,关于第三方开放平台,特定淘宝开放平台下 卖家服务平台 淘宝卖家服务”是淘宝网提供给淘宝卖家各种服务的平台，服务内容涵盖网店运营各种需要。提供的服务只要以软件（工具）的形式来满足淘宝卖家店铺运营的需要，也包括一些网店运营技巧知识和新手开网店等流程讲解。,产品 & 平台,关于数据 御膳房 云服务数据平台（自有）,产品 & 平台,聚石塔 “云+SAAS模式” 资源共享与数据互通。,产品 & 平台,千牛平台 卖家工作台。阿里巴巴集团官方出品，淘宝卖家、天猫商家均可使用。包含卖家工作台、消息中心、阿里旺旺、量子
3、恒道、订单管理、商品管理等主要功能，目前有两个版本：电脑版和手机版。,产品 & 平台,产品的数据来源 自管理的数据 淘宝开放平台获 得的卖家实时 数据,产品 & 平台,产品对应的展台 PC 浏览器 PC 千牛 Mobile 千牛,产品 & 平台,需求 & 痛点,API问题 PC端的卖家宝贝数据，是通过后端api调用 千牛平台（PC & Mobile），提供了js api做为调用接口 UI layerout 展现不一 操作不一 开发模式 分离与统一 系统稳定性,需求 & 痛点,兼容操作 PC 几乎需要全兼容 PC-千牛 基于webkit内核，有换肤和自设定窗口等特有功能 Mobile-千牛 基于
4、webkit内核，并且支持多种手机特性 千牛端的特性 缓存机制 展现机制 特性平台的操作机制,需求 & 痛点,功能特性 不一致的功能特性 可缺省的功能配置 痛中之痛. 开发周期长. 维护痛苦，升级困难.,寻求解决之道,一套合适的框架/解决方案 前后端数据与展示分离 PC端的兼容特性 Mobile端的特性（如touch等） 在layer展现操作，以mobile端的操作为主 优化目前的操作步骤，可以满足同逻辑，同数据接口，不同layer的要求,寻求解决之道,大家都在做，taobao也在做,寻求解决之道,SPA （single page application） 基于 route 与 templat
5、e engine 拓展，增加module 与 支持特性 的event. 不完全的MVC。 后续可维护性高,寻求解决之道,参考？ AngluarJS Backbone Other,布道,SPA (Single Page Application) 单页应用, 可满足性能&效率&尺寸等的问题 需考虑兼容 考虑IE7/8/9(照顾6的基本功能), 以及其他现代浏览器 模块化开发 每个页面转化成模块,开发者自己定义,存在并且不影响其他模块的使用 缓存方案 包括app cache与session & local storage 在内的各种解决方案(照顾兼容仍然会使用到cookie, 但是约束使用) 数据处
6、理分案 前端数据化, 根据数据来执行渲染等操作,布道,定义：功能块 构成该解决方案的基本模块 模块与模块之间只能够通过有限功能块互通。 定义：模块 模块是构成一个app的基本构成部分 定义：控件（组件一种） 组件是一系列可重复利用的与业务无关只与自身有关的部分,布道,功能块集合（功能块） 事件功能块. 缓存功能块. 模块功能块. 页面指引功能块. 与后端链接call功能块. 模板处理功能块. 用户数据功能块. 小工具功能块. ,布道,目前对应2个平台(不对其混合兼容) Mobile Mobile特有的css3与html5的良好支持 Mobile所不同的touch事件 Mobile所追求的精简与
7、高效,省流量/电 Mobile所特有的一些native事件处理. PC 兼顾大部分的浏览器平台. 兼顾事件处理.,布道,演示,布道,特点: 只有一个出口(index.html), 对应一整个产品 所有的页面跳转都需要经过路由配置表. 模块之间完全独立, 数据通信使用Pub/Sub 的方式. 有管理器来决定页面内容的展现与处理. API,MOCK,CONF模块和后端开发共享,联调简单方便.,布道,从url到模块的展现. 模块的自管理与通知机制. 同一时间整个产品最多只有一个关注点模块,布道,一个前端交付的标准的项目文件(以超级数据为例)： conf - 前后端共享, 路由配置表, 约定了用户能够
8、访问的内容 Framework 框架部分的js&css, 以及api.js & mock.js 前后端共享的文件 Mock_ajax 前端用于模拟数据的文件. Modules 该项目所有的模块都在此. Resources 放置其他的公有css/js (第三方)也在此. Index.html 最终出去的唯一出口 Index_dev_combine.html 对开发使用的合并版本. Index_dev_simple.html 对开发使用的未合并未压缩版本 Index_fe_combine.html 对前端使用的合并版本 Index_fe_compress.html 对前端使用的开发合并版本 Ind
9、ex_fe_dev.html 对前端使用的未合并未压缩版本.,布道,在前端交付项目文件后, 目前后端需要唯一处理的文件是 mock.js (api.js 是属于共管). Mock_fe.js 是前端模拟的本地地址 Mock.js 后端只需要修改次部分即可,布道,目前还在做 Manger Controler 管理层，管理各个控制器和显示器 Message queue 请求队列化，可以按需请求或者阻止请求. Websocket 推送&接受 进一步的减少对服务器端的polling请求. 同时相应也会更快 中间层处理. 可以应对SEO的需求, 以及拓展全局session等.,我们还可以做,前端发布体系
10、 前端发布系统 前端资产区,前端发布系统,资源文件和项目所属彻底隔离 前端单独发布 每一层，PM 与 QA都可以单独介入,前端发布系统,Before,After,前端发布系统,建立相应数据库, 数据库里应该描叙: 发布资源对应的产品（新的产品如若需要使用老的资源，也应该在此提交登记，数据库中才会有相应的记录） 资源能够对应到相应的开发人员。方便调试。 按此开始整理之前的产品与平台 开发们未来调试, 在本地可能也需要建立一个对应的 将相应文件替换 的解决方案. 即, 本地也可以实现展示时 转化成真实的js 同时也应该确保在本地为了三个服务端能够保持同步效果, 应该对于上面的 static/webapp 地址 绑定相应的host 来解决相关问题.,我们还可以做,Node 中间层，提供 Route Template render Socket & data receiver & data & sender API 中转站 Auth & Token & Session,我们还可以做,泛前端的展示业务 图形处理 静态页面处理 模板批处理,结语,与淘宝开放平台一起，与其他各家ISV一起，在促进产品百花齐放的同时，提高产品的品质，开发效率，最终的成果能够反映到行业上，得到某些认识点的提高！ 前端之路，任重道远。,Q&A,Q&A Thanks！,
