浅谈应用架构
TRANSCRIPT
浅谈应用架构
前端分享
我们曾经为应用架构做过的努力
• 架构小组的各种工作是应用架构的铺垫• Codereview 规范• 蚂蚁搬家
• 我们应该心存敬畏，不是对未来，是对过去
• 文件目录结构
应用架构——天职
应用架构——天职
• CodeReview
• 四个维度
- 视觉交互
1. 按钮状态齐全（ -1 ）
2. 背景图合并（ -1 ）
3. 链接、文字颜色统一规划（ -1 ）
4. 文字行高统一规划（ +1 ）
5. 列间距、块间距统一（ -1 ）
6. 不存在明显的空白区（ -1 ）
7. 不同浏览器下高度、间距、留白一致（ +1 ）
8. 兼容：双倍边距（ -1 ）
9. 兼容： li 定高内浮 +4px 底距 （ -1 ）
10.兼容：垂直方向边距折叠（ -1 ）
11.（ img ）与文字同行（ -1 ）
应用架构——天职
• CodeReview
• 四个维度
- 前端代码
1. target=_blank ，新开空白窗口（ -1 ）
2. 不兼容的 js 写法， oncontentchange （ -1 ）
3. append 在 DOMReady 之前执行（ -1 ）
4. onDOMReady 嵌套（ -1 ）
5. 避免使用 eval （ -1 ）
6. js 死循环导致内存溢出，典型的 <img onerror=“”/>（ -1 ）
7. 粗心大意疏忽问题（ -1 ）
8. CSS|grid 层或 block 层以下才能使用 mt8 这种零碎的 class 名（ -1 ）
9. CSS| 不允许使用标签级别的样式定义，比如： img{display:block}（ -1 ）
10.CSS| 避免使用 id 选择符定义样式（ -1 ）
11.…
应用架构——天职
• CodeReview
• 四个维度
- 模板代码
1. 预览页面不得出现 velocity模板变量名（ -1 ）
2. css 文件有通过宏写入到 head 里，页面独立 js 文件放页底（ -1 ）
3. 同一功能模板 control控件由一个变成两个，修改成本 X2（ -1 ）
4. 生成新的产品线模板 control（ +1 ）
5. 对 grid或 block 以下内容切割静态位（ +1 ）
6. 整理了历史遗留的问题页面（ +1 ）
7. 请求使用 form 表单作为容器，杜绝了请求地址写死在 js 里（ +1 ）
8. 使用产品线统一的翻页宏（ -1 ）
9. …
应用架构——天职
• CodeReview
• 四个维度
- 文件结构
1. 破坏了架构师设计的文件结构（ -1 ）
2. 每个页面都有唯一的 css/js 文件和产品线统一的 css/js 文件（ -1 ）
3. 明显的功能块未做成独立的文件（ -1 ）
4. 竭尽所能的抽象出功能块（ +1 ）
5. Css和 js 相对应文件命名一致（ -1 ）
6. Js/css 文件重复或同一功能的不同版本（ -1 ）
7. 每个文件顶部或代码片断中都有清晰的注释（ +1 ）
8. …
应用架构——天职
• 执行力
谢谢！