[baidu web frontend_conference_2010.10]_[fe-com_baidu]
DESCRIPTION
The slide of theTRANSCRIPT
![Page 1: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/1.jpg)
百度前端基础平台分享
雷志兴 / berg百度FE
@cnberg
10年10月30日星期六
![Page 2: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/2.jpg)
前端通用组解决百度前端通用和基础性的问题
10年10月30日星期六
![Page 3: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/3.jpg)
• 百度前端现状• 前端基础平台• 开发框架• 开发、测试平台• 文档管理
前端基础平台
10年10月30日星期六
![Page 4: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/4.jpg)
FEWeb Front-End R&D
web前端研发
10年10月30日星期六
![Page 5: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/5.jpg)
FE
PM
RD
QA, OP ...
10年10月30日星期六
![Page 6: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/6.jpg)
•搜索产品•社区产品•商业产品
众多产品线
10年10月30日星期六
![Page 7: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/7.jpg)
与不同的后端交互
•C•php
• java
10年10月30日星期六
![Page 8: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/8.jpg)
遇到了一些麻烦
• 切换和沟通成本增加• 重复建设• 成功实践的推广难度加大
10年10月30日星期六
![Page 9: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/9.jpg)
前端基础平台
10年10月30日星期六
![Page 10: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/10.jpg)
0 100
在过去
10年10月30日星期六
![Page 11: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/11.jpg)
0 10030
拥有基础平台
10年10月30日星期六
![Page 12: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/12.jpg)
• 基础库
• 开发、测试平台
• 前端资源管理
• 文档管理
10年10月30日星期六
![Page 13: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/13.jpg)
1. 基础库
10年10月30日星期六
![Page 14: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/14.jpg)
单一职能的基础方法
ui、效果控件业务逻辑套件
产品线具体逻辑
Javascript代码分层
base
component
app
10年10月30日星期六
![Page 15: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/15.jpg)
base
component
app
单一职能的基础方法
ui、效果控件业务逻辑套件
产品线具体逻辑
Javascript代码分层
10年10月30日星期六
![Page 16: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/16.jpg)
百度产品线特征
• 需求多样化• 部分产品线性能要求高• 产品线之间存在前端调用、交互• 结构复杂的遗留系统
10年10月30日星期六
![Page 17: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/17.jpg)
设计思路
• 易于封装、扩展• 安全,避免冲突• 按需装载
10年10月30日星期六
![Page 18: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/18.jpg)
实现方案
• 最少暴露 -只在当前作用域下新增一个变量
• 安全无害 - 不扩展原生对象和托管对象
10年10月30日星期六
![Page 19: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/19.jpg)
• 函数级别的需求选择• 自动管理依赖• 代码选择器和辅助工具获取最小代码集
实现方案
10年10月30日星期六
![Page 20: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/20.jpg)
core
extra
核心方法
扩展方法
10年10月30日星期六
![Page 21: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/21.jpg)
base
component
app
单一职能的基础方法
ui、效果控件业务逻辑套件
产品线具体逻辑
10年10月30日星期六
![Page 22: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/22.jpg)
fx
ui
...
特效组件
UI组件
其他组件
10年10月30日星期六
![Page 23: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/23.jpg)
百度产品线特征
• 需求多样,单个组件相对简单• 性能要求高• 加载最小化
10年10月30日星期六
![Page 24: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/24.jpg)
设计思路
• 高性能,安全可靠• 按需组合控件特性• 易封装,可重用
10年10月30日星期六
![Page 25: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/25.jpg)
实现方案
• 采用字符串拼接创造控件• 不持有DOM节点
• 通过插件机制来解耦控件• 组合和行为使重用最大化
10年10月30日星期六
![Page 26: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/26.jpg)
UIBase
dialogbutton
draggable
table ...
stateable
...
alert
confirm
modal
keyboard
...
行为
插件
派生
10年10月30日星期六
![Page 27: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/27.jpg)
简单可依赖的基础库
10年10月30日星期六
![Page 28: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/28.jpg)
2. 开发、测试平台
10年10月30日星期六
![Page 29: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/29.jpg)
前端开发中的常见操作
10年10月30日星期六
![Page 30: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/30.jpg)
java -‐jar yuicompressor.jar myfile.js
10年10月30日星期六
![Page 31: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/31.jpg)
拼合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日星期六
![Page 32: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/32.jpg)
完成开发后删除代码中的console.log
10年10月30日星期六
![Page 33: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/33.jpg)
提交测试前将模块集成为模板
10年10月30日星期六
![Page 34: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/34.jpg)
前端开发过程中的一些常见失误
10年10月30日星期六
![Page 35: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/35.jpg)
线上图片写成了线下地址
10年10月30日星期六
![Page 36: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/36.jpg)
js中的中文未unicode编码导致部分页面乱码
10年10月30日星期六
![Page 37: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/37.jpg)
HTML标签未正确闭合
10年10月30日星期六
![Page 38: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/38.jpg)
百度前端
• C语言模板,性能强劲却功能有限
• 多人分工,模块化开发要求高• 代码放在服务器上后,才能查看效果
10年10月30日星期六
![Page 39: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/39.jpg)
设计思路
• 自动优化、检测前端资源• 增强模板功能• 定制性强• 跨平台运行
10年10月30日星期六
![Page 40: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/40.jpg)
实现方案
• 提供预处理模板• 用户自定义工作流• 提供插件机制• 插件以子程序形式存在
10年10月30日星期六
![Page 41: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/41.jpg)
前端资源
优化
分发
检测
集成
线下地址检查jslint检查页面、模板检查
JS、CSS、HTML压缩图片压缩CSS sprite自动化
编译预处理模板
上传到服务机自动替换地址静态文件引用添加时间戳
10年10月30日星期六
![Page 42: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/42.jpg)
工作流
10年10月30日星期六
![Page 43: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/43.jpg)
自动处理前端开发中的机械劳动
10年10月30日星期六
![Page 44: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/44.jpg)
3. 文档管理
10年10月30日星期六
![Page 45: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/45.jpg)
使用MS office/wiki
管理开发、接口文档?
10年10月30日星期六
![Page 46: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/46.jpg)
MS Office
• 文档更新,无法保证所有副本更新• 需要学习繁琐的排版操作• 无法得知与历史版本间的差异• 无法聚合、检索
10年10月30日星期六
![Page 47: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/47.jpg)
wiki
• 一旦离线,所有文档将不可用• 在线编辑体验差• 扩展困难
10年10月30日星期六
![Page 48: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/48.jpg)
本地编写代码10年10月30日星期六
![Page 49: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/49.jpg)
在线查看文档10年10月30日星期六
![Page 50: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/50.jpg)
• 语法简单
• 使用本地编辑器
• HTML展示,不需要专有软件
• 永久URL,看到的总是最新版本
• 使用svn存储,多人合作、diff、更新方便
10年10月30日星期六
![Page 51: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/51.jpg)
创造一种给前端工程师最方便的文档编辑和管理方式
10年10月30日星期六
![Page 52: [Baidu web frontend_conference_2010.10]_[fe-com_baidu]](https://reader030.vdocuments.site/reader030/viewer/2022012312/54bd88cb4a7959d4438b4610/html5/thumbnails/52.jpg)
基础平台没有最好,只有最适合
10年10月30日星期六