前端新人入职后，在开发时需要知道的代码优化的小技巧

最新推荐文章于 2023-04-23 00:45:46 发布

一笑若安

最新推荐文章于 2023-04-23 00:45:46 发布

阅读量585

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/Vivian_Mair32/article/details/127486301

版权

一些考虑点：

再写组件的时候，一定不是只是简单的用if..else..来区分不同的情况；而是要找到组件中的共同点，然后封装；对于一些有一点区别的（大小样式），可是通过 ：class="starIcon"

通过改变类来区分不同的样式。

不要太着急，有空闲的时候多看看前辈的代码，学习他们封装的方法，对自己的代码学着优化；拿到一个需求的时候，不要急得开发；需要花一天的时间去整理所用到的方法，思路，不懂就问；从而减少bug量。
在命名的时候，不能直接根据UI的图片来命名，而是要对应该标签所对应的功能来定义，写代码的时候要注意方便之后的维护，不止自己能看懂代码，还要方便后人快速了解整个代码；如 teamInfo,starTitle等
在开发页面的时候，不应只看到此页面的效果图，许多数据都是会发生变化的，要根据完成的业务功能的角度去考察问题，简化代码，减少if --else--的使用，可以用三目、switch、或者先进行数据简化处理，再调用。
最重要的是考虑极值，当为0的情况，当为无穷的情况。换行的处理等等；
接口尽量不能多次调用，会影响性能，要想好解决方案；性能优先级（接口>代码块>其他），前两者重复写的时候，需要找找方案，规避，从而提高性能
谨记：不要大段复制粘贴，对于一些复用的逻辑，要增加判断开关，加入开关来使用，减少代码的冗余，提供代码的维护性；
let self = this，的使用问题，因为promise里用了 then（res=>({})）这里用的是箭头函数，所以不会改变this的指向，因此this还是指向全局变量。

箭头函数内部的this是词法作用域，由上下文确定。此时this在箭头函数中已经按照词法作用域绑定了。很明显，使用箭头函数之后，箭头函数指向的函数内部的this已经绑定了外部的vue实例了.
对于系统优化的需求，拿过来的时候应该花大量的时间去思考方案，而不是在写也页面的时候一步步报错，一步步改，这样性能和时间成本都效率很低。
任何一个需求都要从意义出发，不能光实现页面效果，一切逻辑都要符合业务逻辑；
如果需求说的是UI沿用系统的某个组件。那么就不要去改这个样式，直接沿用就行。
vue项目多利用双向绑定，：style来实现top值得切换。
对于低版本兼容的transform是这样写的：treasureBox.style.webkitTransform = 'rotate(35deg)';

common.$("msg_rule").style['-webkit-transition'] = '0.3s';
每一次修改代码之后都要更新一些最新的时间，以便防止版本冲突和缓存的问题。并且对readMe.md文件作修改，包括（版本号，PRD,功能优化说明）
对于无论是普通h5活动还是vue项目，如果是要适配epg的，在完成之后都要及时上盒子进行验证，多次验证。
每个新的提示弹窗等，都要确认好出现的时机，不能随便写，要注意逻辑。