工作中踩坑是不可避免的，但是很多人都踩过的坑你们就没必要再踩了，因为我们已经把它们填平了。
两个项目同一个仓库
很多前端图一时的省事，可能会把两个或多个项目维护在同一个仓库中，比如同时拥有 PC 和 M 两端的项目，PC 和 M 分别被部署到不同的分支上。
可能造成的影响：
- 切换分支时 node_modules 冲突（假如各端使用的技术栈再不同更糟糕）
- 线上监控报错无法定位到来自哪端（我们的监控平台是按照项目纬度分配 id 的）
- 代码行数不容易统计（代码统计工具只会统计默认分支）
上面三种情况我们都遇到了，印象最深的是第一条，记得有一天晚上上线出了问题，倒腾了一宿才定位到是不同分支的 node_modules 冲突影响的，害得领导也跟着熬了个通宵。 所以还是建议大家老老实实的多建几个仓库吧。
锁定 npm/node 包版本
几乎现在所有的前端项目都需要安装 npm 包，npm 包里包含着大量的第三方库，而这些第三方库，很多都是一直在迭代的。
体现在项目里，主要集中在 package.json 这个文件：
{
"axios": "^0.21.1",
"eslint": "^7.27.0",
}
其中符号 “^” 代表着你安装包时第三方依赖的版本号有可能发生变化，一变化就有可能出错，当然大部分包应该都会考虑向下兼容的，但是还是不可避免因为个别包邮问题导致你的项目出现报错。
所以建议大家都把 package-lock.json 或 yarn.lock 一并提交到代码库中，这两个文件可以锁定所有第三方依赖的版本号，就会确保你项目的稳定性。
说完了 npm 包版本，再看看 node 版本。
好多项目由于历史原因，或者是由于使用了新技术的原因，导致 node 版本不能太随意。
在这里分享个技巧吧，你可以把项目需要的 node 版本维护到 .nvmrc 中，当其他人启动项目前只需要执行 nvm use 就可以使用 .nvmrc 里的版本号了，避免因为定位 node 版本号浪费时间。
num use # 注意后面不需要加版本号
IE 时间格式
很多项目可能还需要支持 IE，比如政府的项目，再比如银行的项目，毕竟 Windows 还是被公认非常稳定安全的。
那么在 IE 中存在很多兼容性问题，这个大家也都知晓，不仅是 CSS 还是 JS！
这里想跟大家分享的是 JS 中关于时间格式的一个兼容性问题。
“YYYY-MM-DD” 这种时间格式在 IE 中是不支持的，IE 只支持 “YYYY/MM/DD” 格式，所以大家如果遇到这种时间格式记得做下转换。
限制输入文字个数
日常开发中，很难避免有文本框或者文本域，尤其是一些后台管理系统。
文本框/域都有 max-length 属性，用来限制输入内容的字数。
开发过程中，如果 PRD 中没有明确的指明最多多少位，研发童鞋肯定不会加这个属性的。
前端不加，后端也不加，草草上线。
也许你很幸运，线上没有出现问题，也没有收到任何用户投诉，但确实我这里有个活生生的案例。
我们兄弟团队有个管理端项目，前后端都没有控制文本框的输入字数，结果有个用户就在其中一个文本框中输入了一段篇幅很长的文字，导致数据库崩了，研发童鞋持续修复了大概半个小时才恢复。
随后，部门领导发话让大家都检查下自己手头中的项目，该加限制的都加上。
所以屏幕前的你也需要提高这种风险意识，别等出来再上心，到那时性质就不一样了。
为你的项目接入监控
一个好的项目（负责人）都会考虑为项目增加监控的，如果你们团队有实力打造自己的监控平台更好，没有的话也可以考虑使用第三方的，比如百度或者阿里云的。
监控平台的优势有很多，这里主要说两点：
- 提前预警错误（比如白屏，资源加载错误，网络请求超时等），避免造成客诉
- 性能指标统计，方便持续进行性能优化
在以前，我们团队不太重视这一块，自从有了下面这个教训，大家才都陆续重视并接入了监控平台：
记得有个项目，线上突然出现了一段时间的白屏（大概十几分钟），收到了 10+ 客户的投诉，后端研发先紧急回滚了前端版本，发现白屏好了，确定是前端最近上线的新版本有问题，事后前端进行了项目复盘，必须接入监控平台。试想如果提前接入了监控平台，就很有可能早于客户发现白屏问题。
所以，为了自己项目的良好运行，建议大家都接入监控平台。另外，外链脚本也加上 crossorigin 属性，包括业务脚本，也包括第三方脚本，示例如下：
<!-- 增加 crossorigin 属性，可以捕获到外链脚本内的错误，注意浏览器兼容性哈 -->
<script crossorigin src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
慎用 !important
这里主要说的是组件开发，或在业务项目中，或在组件库中。
开发一个组件，样式是不可或缺的一部分。在组件内部写样式时，不建议使用 !important，否则用户将无法从外面覆盖样式，因为 !important 的优先级太高了。
优先级顺序可参考：.a < .a.a < !important
所以在组件内部需要提高样式优先级时，建议使用 .a.a 的形式，这样也不影响用户从组件外覆盖样式。
最后，我想说的是，每一个坑都是一笔财富，希望大家遇到后都要总结下来！！！
