引子
大家好，我是HoMeTown，从我成为一个职业切图仔至今，满打满算差不多有5年了，想给自己写一个备忘录，针对每个技术，总结一下我在开发中遇到的需要注意的事项，并分享给大家，共勉 GitHub地址。
HTML
- 根据目的使用
合适的标签，可以有效的改善SEO，其他小伙伴也更容易理解你写的HTML结构。 - 合适的位置使用a标签、设置img标签的alt属性、role属性、label属性来提高性能与访问性。
CSS
- 不要写额外的
没用的CSS属性。即使你写的这个CSS对页面没啥影响，也有可能对你后来新加的元素产生一些奇奇怪怪的副作用。 - 相邻元素之间使用
margin，父子元素之间使用padding。 - 使用CSS框架时，最好搞清楚他最后会转换成什么样的CSS，有可能会出现属性冲突，我个人比较喜欢Winicss和CssModule一起使用。
- 一定不要忘记写
最后的分号，不然光排查这个问题就会很久。
JavaScript
有机会最好去了解一下JavaScript的历史（《JavaScript高级程序设计》里就有提到），可以加深对前沿技术的理解。
万变不离其宗，一定要搞明白JavaScript，不论是React、Vue、Next、TypeScript，到最后，他都会转为JavaScript，交给浏览器去执行。
- 变量尽可能使用
const/let来缩小变量作用域，尽量不要使用var声明变量。 - 不要重复使用一个
临时变量。 - 不要随意的写一些
单词简写，就算名字长点也没关系，把一些有效信息塞进变量名称里，最好通过读变量名就知道这个是干啥的。 - 注释里写一些不能从代码中了解到的
背景和原因，最好简单简洁的陈述。 - 不要在一行代码中处理一项以上的逻辑，
分开行处理。 - if、switch、for保持
浅嵌套，不要超出2个嵌套，如果业务逻辑不允许，请单独拿出来一部分处理。 - 必要时考虑 else的分支是否可以直接用
提前return来结束。 - 一定要了解用于处理异步的 .then 和 async/await。
- 每一个API一定要写清楚每个参数的作用是什么，这个API返回了什么，用在什么地方。
- 熟悉http
请求和响应的基本options.
包管理器
- npm虽然是nodejs使用库的包管理器，但是也能在web项目中使用。
- 能用yarn就用yarn，使用方式差不多，但是性能和版本控制都要好于npm。
- 尽量不要使用cnpm，你不知道他会在版本控制中出现什么问题（package-lock）
TypeScript
"strict: true" 最好开启严格模式。- 原则上不使用
any。 - 像编写设计文档一样写代码，最好在注释中描述清楚
类型的含义和作用。 - 如果你有一个需要很长时间才能解决的ts error，先使用any或者禁用这部分错误，Ts可以提高质量和开发效率，但是咬死坚持，绝对也没啥好处，
永远不要搞错目标和手段。 - 如果设置tsconfig.json中的baseUrl: ‘.’，那么import路径会变成从根目录开始的相对路径，更容易理解，推荐这样配置。
- 许多库现在基本都有TypeScript的类型定义文件，
npm install --save-dev @types/库名安装使用。
安全
- 不要在浏览器端存储
隐私信息和API密钥，可以选择硬编码在JavaScript代码中，或者加到env里，原则上应该保存在服务端。 预防XSS，设置字符类型和字符长度限制，如果url字符串是以https/http开头，一定要检查！防止注入SQL与script代码！预防CSRF，使用JWT进行身份验证！- 尽量不要连接免费wifi的时候登录你们自己的网站，去了解一下DNS的工作原理，你会发现这是一个很危险的行为。
- 谨防网络钓鱼电子邮件。
- 不要忽视操作系统和应用程序的更新，有可能他修复了一些不方便说的安全漏洞。
- 最好不要使用一个密码，尤其是生日，去了解一下密码管理器。
Vue
- 原则上一定要记得在 style标签上写上
scoped，防止样式污染。 - 其实没有必要一直使用Vuex，
其他状态管理工具也可以多看看。 - 不要对Vue的源码有太执着的想法，毕竟人家一个团队那么多人，不是你的小脑子就能看完的，了解
基本的思想即可。 - 尝试在Vue中使用hooks。
- 在vue2中修饰符 .sync可以使子组件能够修改父组件的数据，快速达到v-model的效果。
- 可以试试component组件的
is属性，用来做组件的动态切换。 - 图片、css的引用在字符串最前面加上
“~”。 - 表单的校验最好直接使用正则，少写逻辑代码。
- 合理使用
slot进行插槽，你会发现会少很多propsdata。 - 合理使用计算属性。
- 合理使用watch。
React
性能优化
- 看看浏览器中的
Performance和Network，你可以发现瓶颈在哪。 - 主要原因得看问题，具体问题具体解决。
- 不要发生不必要的渲染。
- 不要有长延迟API。
- 下载数据量不要过大。
- 有没有可能是后端或者网络的问题？
生命周期
一个类组件的生命周期大致可以分为3个阶段：
- Mounting，显示组件之前。
- UpDating，显示组件和更新状态时。
- Unmounting，组件销毁卸载时。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-up2EvHZs-1667297888149)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/59f7ee5ec6a946e7bba31103532a2b88~tplv-k3u1fbpfcp-watermark.image?)]
一个函数式组件可以通过钩子useEffect实现与类组件相同的生命周期。
重绘组件的条件
组件设计
- 不要添加太多的props。
- 随着项目扩大，业务代码复杂会给组件管理带来很大的挑战，一定要写清楚组件的作用。
- 实际上很难对组件进行一个100%的精准划分，好的组件需要灵活的考虑规则，只要与项目其他组件的设计风格以及想法一致即可，原则上一定要区分展示组件和逻辑组件。
Hooks
useState
- 执行seState函数后，并不会立即反应状态，你可以在重新渲染后使用更新后的状态。
- 引用类型变量 更新内容可能不会引起重新渲染。
- 如果想从当前状态生成更新的状态，使用setState的回调函数。
useEffect
- 在第二个参数中适当的设置变量，避免不必要的渲染或者无限渲染。
- 考虑一下是否真的需要使用useEffect，如果你可以用常规的api实现。
useContext
- 更新Context时，Provider下的组件会出现不必要的渲染。
渲染模式
- CSR（客户端渲染），初始渲染很慢，但是所有元素都是在客户端构建的，但是由于空的html，对SEO很不利。
- SSR（服务端渲染），服务端返回渲染好的页面，返回HTML。
- SSG（静态站点生成），内容构建后无法动态修改，不利于频繁更新网站。
写接口
- 切记！无论什么时候，从用户的角度出发，明确使用API的目的，
永远是机器来靠近人，而不是人去匹配机器。 - 接口名称尽量短一点，但是不要瞎省略，比如
/user -> /u - 不要使用大写字母，只能使用小写！
- 使用正确的HTTP方法，
GET、POST、PUT、DELETE。 - 在URL中学会用单复数形式表示名称。
- 资源名称一定是
名词，不要用动词。 - 数据格式基于JSON。
- 使用合适的相应状态码。
做人
- 着急的活完成了一定要向上报告！
- 分清楚
事实和意见！ - 不是天才，就做一个努力点的普通人！
- 要善于与
人交谈！ - 想想竞争者的
优势？你为什么没有这个优势？可不可以有？ - 无论什么时候，想想有没有
双赢的方法？分出输赢很容易！ - 多为大局着想，学会为未来做准备，而不是手头的任务。
- 提问或者讨论问题的时候，请不要浪费别人的时间，不要忘记感恩，学会尊重!
爱情
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GdtlqhKU-1667297888150)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d6fe46d863f4e969f3338ba7e03e752~tplv-k3u1fbpfcp-watermark.image?)]
写在最后
如果有任何错误和建议，请随时发表评论。
我会持续维护这篇文章。
如果你有补充，也欢迎提交PR！给个Star！GitHub地址
下次见~ 我的朋友，我是HoMeTown👨💻，➕我VX，💊你进群，这是一个大家共同成长、共同学习的社群！在这里你可以：讨论技术问题、了解前端资讯、打听应聘公司、获得内推机会、聊点有的没的。
👉 vx: hometown-468【单独拉你】
👨👩👧 公众号：秃头开发头秃了 【关注回复“进群”】
🤖 Blog：HoMeTown’Blog【点开看看】
高赞好文