雷志兴百度前端基础平台与架构分享.ppt
,百度前端基础平台分享,雷志兴/berg,百度FE,cnberg,10年10月30日星期六,前端通用组,解决百度前端通用和基础性的问题,10年10月30日星期六,前端基础平台,百度前端现状 前端基础平台,开发框架,开发、测试平台 文档管理,10年10月30日星期六,FE,Web Front-End R&D,web前端研发,10年10月30日星期六,PM,FE,RD,QA,OP.10年10月30日星期六,众多产品线,搜索产品 社区产品 商业产品,10年10月30日星期六,与不同的后端交互,10年10月30日星期六,Cphpjava,遇到了一些麻烦,切换和沟通成本增加 重复建设,成功实践的推广难度加大,10年10月30日星期六,前端基础平台,10年10月30日星期六,在过去,010年10月30日星期六,100,拥有基础平台,010年10月30日星期六,30,100,基础库,开发、测试平台,前端资源管理,文档管理,10年10月30日星期六,1.基础库,10年10月30日星期六,Javascript代码分层,10年10月30日星期六,appcomponentbase,产品线具体逻辑ui、效果控件业务逻辑套件单一职能的基础方法,Javascript代码分层,10年10月30日星期六,appcomponentbase,产品线具体逻辑ui、效果控件业务逻辑套件单一职能的基础方法,百度产品线特征,需求多样化,部分产品线性能要求高,产品线之间存在前端调用、交互 结构复杂的遗留系统,10年10月30日星期六,设计思路,易于封装、扩展 安全，避免冲突 按需装载,10年10月30日星期六,实现方案,最少暴露 只在当前作用域下新增一个,变量,安全无害 不扩展原生对象和托管对象,10年10月30日星期六,实现方案,函数级别的需求选择 自动管理依赖,代码选择器和辅助工,具获取最小代码集,10年10月30日星期六,10年10月30日星期六,coreextra,核心方法扩展方法,10年10月30日星期六,appcomponentbase,产品线具体逻辑ui、效果控件业务逻辑套件单一职能的基础方法,10年10月30日星期六,fxui.,特效组件UI组件其他组件,百度产品线特征,需求多样，单个组件相对简单 性能要求高 加载最小化,10年10月30日星期六,设计思路,高性能，安全可靠 按需组合控件特性 易封装，可重用,10年10月30日星期六,实现方案,采用字符串拼接创造控件 不持有DOM节点,通过插件机制来解耦控件 组合和行为使重用最大化,10年10月30日星期六,UIBase派生,buttondraggablestateable.,dialog插件行为,tablealertconrmmodalkeyboard,.,.10年10月30日星期六,简单可依赖的基础库,10年10月30日星期六,2.开发、测试平台,10年10月30日星期六,前端开发中的常见操作,10年10月30日星期六,java-jar yuicompressor.jar myfile.js,10年10月30日星期六,拼合CSS sprite图片,.rc-block1.tl,.rc-block1.tr,.rc-block1.bl,.rc-block1.br,background:url(/home/bg.gif);height:3px;,overflow:hidden;width:3px;,.rc-block1.tl,background-position:-4px-57px;,.rc-block1.tr,background-position:-7px-57px;float:right;,10年10月30日星期六,完成开发后,删除代码中的console.log,10年10月30日星期六,提交测试前,将模块集成为模板,10年10月30日星期六,前端开发过程中的,一些常见失误,10年10月30日星期六,线上图片写成了线下地址,10年10月30日星期六,js中的中文未unicode编码,导致部分页面乱码,10年10月30日星期六,HTML标签未正确闭合,10年10月30日星期六,百度前端,C语言模板，性能强劲却功能有限 多人分工，模块化开发要求高,代码放在服务器上后，才能查看效果,10年10月30日星期六,设计思路,自动优化、检测前端资源 增强模板功能 定制性强,跨平台运行,10年10月30日星期六,实现方案,提供预处理模板,用户自定义工作流 提供插件机制,插件以子程序形式存在,10年10月30日星期六,检测,线下地址检查jslint检查页面、模板检查,前端资源,优化集成分发,JS、CSS、HTML压缩图片压缩CSS sprite自动化编译预处理模板上传到服务机自动替换地址,静态文件引用添加时间戳10年10月30日星期六,工作流,10年10月30日星期六,自动处理,前端开发中的机械劳动,10年10月30日星期六,3.文档管理,10年10月30日星期六,使用,MS ofce/wiki,管理开发、接口文档？,10年10月30日星期六,MS Ofce,文档更新，无法保证所有副本更新 需要学习繁琐的排版操作,无法得知与历史版本间的差异 无法聚合、检索,10年10月30日星期六,wiki,一旦离线，所有文档将不可用 在线编辑体验差 扩展困难,10年10月30日星期六,本地编写代码,10年10月30日星期六,在线查看文档,10年10月30日星期六,语法简单,使用本地编辑器,HTML展示，不需要专有软件 永久URL，看到的总是最新版本,使用svn存储，多人合作、diff、更新方便,10年10月30日星期六,创造一种,给前端工程师最方便的,文档编辑和管理方式,10年10月30日星期六,基础平台,没有最好，只有最适合,10年10月30日星期六,!anksberg,10年10月30日星期六,
