前端学习建议
前端的一个小小的学习建议（基础篇）
🐾 首先你们从大一就可以开始学习前端的相关知识，我觉得太棒了 ，因为我是一路摸索滚打才慢慢找到路子的，并且基本比你们晚一年的时间投入学习的，所以对你们抱有很大的期待，我其实水平也不算特别高，但也有一些自己的学习想法和思考，希望能给大家带来点帮助！👊
📝 基础
建议的是在mdn官网跟着学习一系列
html
基本必学，启蒙之一，最不可以缺少的
css
这是我个人感觉使用最难的部分了，感觉语法什么的还行，但是真正做项目的时候会发现，太难啦！！！！我css还需继续加强，我们共同努力👊
scss
ts - js
一些css的基础用法得熟练，不然你会不快乐并且效率很低的
记住CSS的数据类型
读懂CSS的语法
多动手练习
JavaScript
这个是特别重要的，是前端的逻辑，学习难度也是最大的
跟着教程来学，多运用、敲案例
📝 多看大佬博客文章或者书籍
几位大佬的链接博客：
书籍推荐：（恰逢双11，平时上水课也可以看看）
《JavaScript高级程序设计（第3版）》红皮书
《JavaScript权威指南 》犀牛书
《CSS权威指南》
📝 资源and网站：
计算机基础：
计算机网络基础：
算法和数据结构：
数据库 ：
Linux：
- 穷佐罗的 Linux 图书
- [中国科技大学的 Linux 图书](
前端：
后端：
推荐看的前端进阶学习路线的文章（可以参考）
现在真的要用点时间来缕一缕喔现在的学习路线了（我可是要做一个全栈程序员！！！）
学习类
前端
3大件，怎么说呢，已经是有基础的了，那么就速度过一遍啥的。《 1周 》
图解算法：–备战一下蓝桥杯这些
CSS 笔记、建议与指导https://github.com/chadluo/CSS-Guidelines 【看一下，写一下】
现代 JavaScript 教程https://zh.javascript.info/ 【补补缺失的或者不懂的】
看《ECMAScript 6 入门教程》 《 http图解 》《1周》
快速过一下TypeScript的官方文档 框架学习 《2周》
TypeScripthttps://zhongsp.gitbooks.io/typescript-handbook/content/
Vue.js 技术揭秘 https://github.com/ustbhuangyi/vue-analysis
设计学习 《1周》
写给大家看的设计书（第4版）
设计一下使用以下figma
简单学一下这个两个框架 《2周》
Angular入门教程https://angular.cn/start
熟悉常用的前端构建工具Webpack、Grunt
后端：
Node.js学习，用Node.js写 《1.5周》
七天学会 Node.jshttp://nqdeng.github.io/7-days-nodejs/
简单的使用java写一份接口 ，总结接口，前端再渲染（借助ai自己玩一下）《1.5周》
使用python爬虫 + 写接口**《3周》**数据库用mongoDB
数据库
了解Nacos
小程序：
微信小程序的学习：《3周》
微信小程序开发资源汇总https://github.com/justjavac/awesome-wechat-weapp
uniapp的学习《3周》
工程：
git 《1周》
有书
猴子都能懂 Git 入门 https://backlog.com/git-tutorial/cn/
Nginx**《1周》**
运行环境**《1周》**
图解浏览器的基本工作原理https://zhuanlan.zhihu.com/p/47407398
探索类：
1.
首先，前端开发流程：
需求评审
一般在做需求评审时，PRD里只有交互稿，尚未有视觉稿。需要在评审结束并达成一致后，再输出视觉稿。
1、需求分析：
2、涉及渠道/环境：
- App：App原生页面、App内嵌H5、App内嵌小程序。
- 小程序：技术栈视角：小程序原生页面、小程序内嵌H5、App内嵌小程序。
- 普通H5：微信H5、M站（即普通浏览器环境）
- B端：运营管理平台等等
3、 可行性分析：是否有技术上的实现难点，是否有其他的依赖条件。
4、 数据来源：哪些是调接口，哪些是做成可配置，哪些是前端写死；可配置的部分，是前端读取，还是接口读取然后返给前端。提示：可配置的灵活性与风险正相关。（前后端之间的沟通）
5、 异常流设计：容错、容灾、兜底、降级、回退机制、风险可控。prd一般只写了正常流的逻辑，异常流往往需要研发同学配合做全盘考虑。
6、需求变更：如有需求不明确、改需求、加需求、砍需求、加时间、改时间、加人力等等，需要提前预判风险。
视觉评审
1、进度跟进：视觉稿是分批交付，还是一次性给到？这是要首先考虑的。
按照历史经验，前端项目进度的延误，有一半的概率依赖于视觉稿的进度；因为一个新页面的开发，前端有30%~50%的工作在做页面构建。
2、视觉稿的文件格式：
Sketch 原型设计软件：.sketch 格式。一般用来画视觉稿。
Figma 原型设计软件：.fig 格式。
Axure 原型设计软件：：.rp 格式。Axure 一般用来画交互稿。如果是输出高保真的视觉稿，推荐用 Sketch 或 Figma。
Photoshop 软件： .psd 格式。专门做图片处理。当然，有些CP外包人员的技能单一，喜欢用PS输出视觉稿。
Adobe Illustrator 软件（简称AI软件）：.ai格式。制作矢量图。
Adobe After Effects（AE） 软件：.aep 格式。制作动画。
Figma 是最近比较火的全平台原型设计软件
【划重点】交付视觉稿时，需要视觉同学输出“带尺寸标注”的视觉规范文件。
3、检查需求：是否覆盖需求和交互设计中的全部设计点。
4、检查视觉规范：
- 样式和配色，是否符合页面和产品的整体风格。
- 尺寸规范：移动端的视觉稿宽度是750px。
- 排版、对齐、一致性。推荐阅读书籍《写个大家看的设计书》，了解基本的设计原则。
- 字体：字号大小（一般是12px以上，特别小的是10px以上）、字重（注意bold属性值为700），以及有哪些特殊字体。尤其要注意字体的版权问题。
5、哪些图是前端构建，哪些图是写死图片资源，哪些是可配置；可配置的图中，需要把每个元素做拆解，这个元素是合并到背景图中，还是单独切图，还是读取数据。
6、切图格式：png（透明格式）、jpg
切图的图片大小，不要太大。移动端的大图（比如幕帘弹窗的背景图）建议不超过50kb，小图建议不超过20kb。图片在上传之前，可以先在 https://tinypng.com/ 上进行压缩。
7、复杂图形、动画的实现难度和实现方式，技术评估。详见接下来要讲的「技术选型」。
排期评估
1、排期一般包含这几个要素：
- 开发时间：视觉构建时长、接口文档（接口协议）交付时间、前后端联调时间、自测时间
- 转体验时间
- 转测时间
- 上线时间（以及，需确认业务投放时间）
2、评估排期时，要根据视觉稿排期，不要根据交互稿排期。这是首先要强调的。一个新页面的开发，前端有30%~50%的工作在做页面构建。 只看交互稿的话，无法评估真实的开发工作量。
3、前端开发工作包括：概要设计、视觉构建、逻辑代码、前后端联调、自测、转体验。每一项都要单独拆解后评估时间，加在一起就是整体的排期。
4、排期时，要考虑其它的依赖因素：比如视觉稿延期、需求不明确、接口进度、测试进度，当然最重要的是上线进度。紧急项目，经常是根据上线时间倒推开发排期。
5、即将进入开发阶段后，与测试部门协调测试资源，确认转测时间；大型项目&重点项目，需要在需求评审阶段，提前知会测试部门，让其预留时间。
6、如果自己有在并行开发其他项目，则排期时需要给自己预留 buffer。并行开发两个项目是家常便饭；但，这个项目在测试时，往往很难抽身去做别的项目，因为会一直被测试童鞋牵制。
7、开发排期：如果开发排期有变更，需要立即周知其他相关人员，尤其是要评估测试排期的风险。测试排期比开发排期 更难变更。
技术选型
技术选型千变万化，百家争鸣。这里需要列出你所在部门的常用技术选型，并非市面上的技术栈罗列。
1、页面开发框架：
（1）多端页面：（小程序原生页面、H5）
- Taro 框架（基于 React技术栈）
注2：有些业务，一开始只做H5，后来迭代时，要求做小程序原生页面。这一点也要纳入需求评估。
（2）H5页面：Vue.js 框架、React 框架
（3）App端：
- Android端开发语言：Kotlin（新）、Java（老）
- iOS端开发语言：Swift（新）、Objective-C（老）
（4）B端开发，UI框架：
- React 技术栈：Ant Design（简称Antd）
- Vue 技术栈：Element、Ant Design Vue
- 较简单的CSS响应式框架：Bootstrap
（5）Node.js后端开发框架：
- Koa：新一代 Node.js 框架。
- Egg.js：Egg 是在Koa基础上进一步封装的企业级Web开发框架。
- Express：比较老的Node.js 框架。
2、CSS预处理器：SASS
3、复杂图形、动画的实现难度和实现方式，技术评估：
- gif 动图：尽量不用。因为文件太大，且效果模糊。
- CSS3 动画：适合简单的、有规律的动画。举例：摆动的鱼、京喜工厂
- Canvas：Canvas 动画、小程序分享图采用 Canvas 绘制
- 3D动画：WebGL（Three.js 是 WebGL 的综合库）常见案例：太阳系
- 游戏框架：Cocos 引擎
概要设计
- 需求背景及资源
- 风险评估
- 技术选型
- 项目结构设计
- 主要功能点逻辑设计
- 可扩展可复用设计
- 依赖接口
- 工作量拆解和排期
开发环节
1、代码设计：
（1）目录结构设计、代码风格
（2）公共组件、工具类设计：确保可复用、高内聚低耦合的原则。哪些可以复用京喜平台的公共组件，哪些需要自己单独写 components、utils。
（3）弹窗设计：如果一个页面有多个弹窗，建议先设计一个抽象的弹窗基类。设计弹窗时，需要考虑的是：
- 设计原则：易扩展、复用性强
- 避免重复代码
- 避免同一时间出现多个弹窗
- 弹窗的位置要严格居中（不能因为屏幕尺寸的大小变了，导致弹窗位置不居中）
- 处理滚动穿透这个顽疾。
2、视觉构建：
（1）后端在开发接口时，前端做视觉构建；视觉构建完成后，前端根据接口文档的定义，通过 mock 数据的方式调接口，写前端逻辑；待接口开发完成后，可进入前后端联调阶段。
（2）建议前端童鞋学会自己切图，可控程度更高，也能减少沟通成本。学会基本的 PS、Sketch操作就行，做一名合格的前端切图仔。
（3）对于规则的样式和动画，建议用代码实现，而不是图片。图片会降低页面的打开性能，且大屏都显示效果比较模糊。
（4）切图的尺寸要求：100%宽度以 750px 为准。
（5）像素级还原视觉稿：推荐使用 Snipaste 截图软件，按F1截图，F2贴图，然后调整贴图的透明度为50%，将贴图与前端页面进行像素级比对。
3、业务逻辑实现：
（1）建议先用思维导图，梳理业务逻辑，再着手写代码。思维导图有利于理清逻辑、事后复盘、高效给他人讲解，一目了然。重要的是思想，而不是用哪一款工具更酷。
（2）在调用接口时，要明确前端自己的安全边界：假设接口字段异常时，前端需要有自己的降级措施，不能完全依赖和信任字段，导致让页面直接白屏、交互异常、甚至挂掉。
（3）除了完成产品要求的业务逻辑之外，还要时刻考虑异常流的设计和容灾。
（4）很多前端童鞋在做需求时，有个习惯是不喜欢细看prd，只对着交互稿和视觉稿进行开发。这样做虽然省事，但有三道手续不能少：
- 开发前，一定要再和产品童鞋过一遍prd细节；
- 开发过程中，随时和产品童鞋反复沟通确认；
- 开发到80%时，自己对照prd，只字不差地阅读，看看是否有遗漏的地方。
4、非功能性需求。业务代码写完后，还有很多细节需要打磨。比如：
- 不同渠道的分享场景
- 文案配置检查：运营配置端要做校验；是给产品运营用的，配置要尽量人性化。
- 添加埋点：曝光上报、点击上报、呼吸上报
- 监控上报、测试上报、badjs上报
- 重复代码精简
- 去掉 console.log、debugger 等多余的代码
- 图片、字体等静态资源压缩
- 常见的性能优化：骨架屏（按需）、图片懒加载、图片预加载、防抖节流、长列表滚动到可视区域动态加载
- 用户体验完善：返回定位、滚动穿透
- 屏幕适配
- 小程序代码瘦身
- 容灾演习
5、代码提交：
- 先 git pull，再 git push，减少代码冲突。
- commit粒度要尽量细
- commit之前，一定要diff代码，确认每一行改动，以免提交不必要的改动。
- Commit Message 常用格式：feat、fix、docs、merge
- 如合并代码时遇到冲突，一定要先解决完冲突后再提交代码。如冲突部分涉及到其他人的代码，一定要找到对应同学一起解决。
6、自测：
- 对照prd，查漏补缺。
- 在真机上体验页面，而不是在模拟器上。
- 写一部分测试用例，加快后续的测试进度。前面梳理的思维导图，其实就是测试的最佳素材。
