From 36a63f31d610d26741dcfca5bc2d80bafd75327f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BC=8D=E4=BF=8A=E6=BB=A8?= <540965117@qq.com> Date: Mon, 13 Jun 2022 19:41:27 +0800 Subject: [PATCH] =?UTF-8?q?update:=20=E5=89=8D=E7=AB=AF=E5=BC=80=E5=8F=91?= =?UTF-8?q?=E6=B5=81=E7=A8=8B=EF=BC=88=E8=AF=A6=E5=B0=BD=E7=89=88=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...46\345\260\275\347\211\210\357\274\211.md" | 61 ++++++++++--------- 1 file changed, 32 insertions(+), 29 deletions(-) diff --git "a/17-\345\211\215\347\253\257\347\273\274\345\220\210/01-2022\345\271\264Web\345\211\215\347\253\257\345\274\200\345\217\221\346\265\201\347\250\213\345\222\214\345\255\246\344\271\240\350\267\257\347\272\277\357\274\210\350\257\246\345\260\275\347\211\210\357\274\211.md" "b/17-\345\211\215\347\253\257\347\273\274\345\220\210/01-2022\345\271\264Web\345\211\215\347\253\257\345\274\200\345\217\221\346\265\201\347\250\213\345\222\214\345\255\246\344\271\240\350\267\257\347\272\277\357\274\210\350\257\246\345\260\275\347\211\210\357\274\211.md" index 0510d0a43..6dadc9e34 100644 --- "a/17-\345\211\215\347\253\257\347\273\274\345\220\210/01-2022\345\271\264Web\345\211\215\347\253\257\345\274\200\345\217\221\346\265\201\347\250\213\345\222\214\345\255\246\344\271\240\350\267\257\347\272\277\357\274\210\350\257\246\345\260\275\347\211\210\357\274\211.md" +++ "b/17-\345\211\215\347\253\257\347\273\274\345\220\210/01-2022\345\271\264Web\345\211\215\347\253\257\345\274\200\345\217\221\346\265\201\347\250\213\345\222\214\345\255\246\344\271\240\350\267\257\347\272\277\357\274\210\350\257\246\345\260\275\347\211\210\357\274\211.md" @@ -27,9 +27,9 @@ 数据来源：哪些是调接口，哪些是做成**可配置**，哪些是前端写死；可配置的部分，是前端读取，还是接口读取然后返给前端。提示：可配置的灵活性与风险正相关。 -异常流设计：容错、容灾、兜底、降级、回退机制、风险可控。prd一般只写了正常流的逻辑，异常流往往需要研发同学配合做全盘考虑。 +异常流设计：容错、容灾、兜底、降级、回退机制、风险可控、边缘场景。PRD一般只写了正常流的逻辑，异常流往往需要研发同学配合做全盘考虑。 -6、需求变更：如有需求不明确、改需求、加需求、砍需求、加时间、改时间、加人力等等，需要提前预判风险。 +4、需求变更：如有需求不明确、改需求、加需求、砍需求、加时间、改时间、加人力等等，需要提前预判风险。 ### 视觉评审 @@ -56,14 +56,14 @@ - 样式和配色，是否符合页面和产品的整体风格。 - 尺寸规范：移动端的视觉稿宽度是750px。 -- 排版、对齐、一致性。推荐阅读书籍《写个大家看的设计书》，了解基本的设计原则。 +- 排版、对齐、一致性。推荐阅读书籍[《写给大家看的设计书》](https://m.douban.com/book/subject/3323633/)，了解基本的设计原则。 - 字体：字号大小（一般是12px以上，特别小的是10px以上）、字重（注意bold属性值为700），以及有哪些**特殊字体**。尤其要注意字体的版权问题。 5、哪些图是前端构建，哪些图是写死图片资源，哪些是可配置；可配置的图中，需要把每个元素做拆解，这个元素是合并到背景图中，还是单独切图，还是读取数据。 6、切图格式：png（透明格式）、jpg -切图的图片大小，不要太大。移动端的大图（比如幕帘弹窗的背景图）建议不超过50kb，小图建议不超过20kb。图片在上传之前，可以先在 https://tinypng.com/ 上进行压缩。 +切图的图片大小，不要太大。移动端的大图（比如幕帘弹窗的背景图）建议不超过50kb，小图建议不超过20kb。图片在上传之前，可以先在 https://tinypng.com/ 上进行压缩。 7、复杂图形、动画的实现难度和实现方式，技术评估。详见接下来要讲的「技术选型」。 @@ -84,9 +84,9 @@ 5、即将进入开发阶段后，与测试部门协调测试资源，确认转测时间；大型项目&重点项目，需要在需求评审阶段，提前知会测试部门，让其预留时间。 -6、如果自己有在并行开发其他项目，则排期时需要给自己预留 buffer。并行开发两个项目是家常便饭；但，这个项目在测试时，往往很难抽身去做别的项目，因为会一直被测试童鞋牵制。 +6、如果有其他并行开发的项目，需要在排期时给自己预留 buffer。并行开发两个项目是家常便饭；但，这个项目在测试时，往往很难抽身去做别的项目，因为会一直被测试童鞋牵制。 -7、开发排期：如果开发排期有变更，需要立即周知其他相关人员，尤其是要评估测试排期的风险。测试排期比开发排期 更难变更。 +7、开发排期：如果开发排期有变更，需要立即周知其他相关人员，尤其是要评估测试排期的风险。测试排期比开发排期更难变更。 ### 技术选型 @@ -136,7 +136,7 @@ - 风险评估 - 技术选型 - 项目结构设计 -- 主要功能点逻辑设计 +- 主要功能点逻辑设计 - 可扩展可复用设计 - 依赖接口 - 工作量拆解和排期 @@ -155,7 +155,8 @@ - 避免重复代码 - 避免同一时间出现多个弹窗 - 弹窗的位置要严格居中（不能因为屏幕尺寸的大小变了，导致弹窗位置不居中） -- 处理滚动穿透这个顽疾。 +- 处理滚动穿透这个顽疾 +- 维护好z-index，不要滥用 2、视觉构建： @@ -169,6 +170,8 @@ （5）**像素级还原视觉稿**：推荐使用 [Snipaste](https://zh.snipaste.com/) 截图软件，按F1截图，F2贴图，然后调整贴图的透明度为50%，将贴图与前端页面进行像素级比对。 +（6）如果项目维护了一套全局的css样式文件，建议熟记几个常用的class类名，提高效率同时减少编写重复的样式代码。 + 3、业务逻辑实现： （1）建议先用**思维导图**，梳理业务逻辑，再着手写代码。思维导图有利于理清逻辑、事后复盘、高效给他人讲解，一目了然。重要的是思想，而不是用哪一款工具更酷。 @@ -177,11 +180,11 @@ （3）除了完成产品要求的业务逻辑之外，还要时刻考虑异常流的设计和容灾。 -（4）很多前端童鞋在做需求时，有个习惯是不喜欢细看prd，只对着交互稿和视觉稿进行开发。这样做虽然省事，但有三道手续不能少： +（4）很多前端童鞋在做需求时，不习惯细看PRD，只对着交互稿和视觉稿进行开发。这样做虽然省事，但有三道手续不能少： -- 开发前，一定要再和产品童鞋过一遍prd细节； +- 开发前，一定要再和产品童鞋过一遍PRD细节； - 开发过程中，随时和产品童鞋反复沟通确认； -- 开发到80%时，自己对照prd，只字不差地阅读，看看是否有遗漏的地方。 +- 开发到80%时，自己对照PRD，只字不差地阅读，看看是否有遗漏的地方。 4、非功能性需求。业务代码写完后，还有很多细节需要打磨。比如： @@ -190,12 +193,12 @@ - 添加埋点：曝光上报、点击上报、呼吸上报 - 监控上报、测试上报、badjs上报 - 重复代码精简 -- 去掉 console.log、debugger 等多余的代码 +- 利用打包插件去掉 console.log、debugger 等多余的代码， - 图片、字体等静态资源压缩 - 常见的性能优化：骨架屏（按需）、图片懒加载、图片预加载、防抖节流、长列表*滚动*到可视区域动态加载 - 用户体验完善：返回定位、滚动穿透 - 屏幕适配 -- 小程序代码瘦身 +- 小程序代码瘦身，分包加载 - 容灾演习 5、代码提交： @@ -208,13 +211,13 @@ 6、自测： -- 对照prd，查漏补缺。 +- 对照PRD，查漏补缺。 - 在真机上体验页面，而不是在模拟器上。 - 写一部分测试用例，加快后续的测试进度。前面梳理的思维导图，其实就是测试的最佳素材。 ### 产品体验 -1、在真机体验，而不是在模拟器上。最好是 iOS和 Android 都要对比体验。 +1、在真机体验，而不是在模拟器上。最好是 iOS 和 Android 都要对比体验。 2、体验时，记录整理各种 todolist： @@ -253,7 +256,7 @@ review顺序： 转测邮件的基本元素，包括但不仅限于： -- prd链接、视觉稿链接 +- PRD链接、视觉稿链接 - 页面链接 - 项目相关人员 - 数据配置系统 @@ -369,6 +372,7 @@ review顺序： - 语义化标签：`
`、`
` 、`