【前端】开发的基本操守

你作为一名合格的前端开发,必须做到这些基本常识。

【前端】开发的基本操守

by img MicroAnswer Create at:Mar 27, 2021 5:15:05 AM 

Tags: javascript 开发

你作为一名合格的前端开发,必须做到这些基本常识。


作为前端开发者,所产出的东西是直接面向用户、接触用户的,如果这个环节出了问题,即便整个项目做得多么的完美,用户的直观感受就是问题一大堆。所以,一些基本的前端开发者必须要有的操守不得不有一个总结了。

本文内容为并非以偏概全,涵盖的观点也并不适用于所有的场景,遇到实际情况,还是要以实际场景出发,规则是人定的,但并非一成不变的。

一、界面

没事别动不动就提示就Alert。 Alert是警告,一般程序不是执行出错的情况下,不要弹东西出来。即使你有一个警示含义的提示信息,你最好也把它放在页面上以另一种迎合主题的颜色去警示用户。

少弹出Loading。 遇到耗时的操作时,不要直接一个loading提示出来,让用户直接进入傻等状态。按了一个按钮进行数据请求,你就让你的按钮变成disabled的,并设置按钮文案内容为"处理中"等提示,而非一个弹出来的加载提示。再者,加载一个列表数据的时候,本身一开始没有数据是界面上那么大块空白没地方放一个loading提示吗,也尽量不要弹出个加载来。

过多考虑。 作为程序员,你其实不用考虑太多界面应该怎么摆放东西这件事,想好这个界面主要要表达什么,然后需要由什么东西引入或介绍你的主要内容。只要保证:主要的元素稍大,稍浓,稍明显,次要的元素稍小,稍浅就好了。

统一。 就像穿衣服一样,浑身上下超过3种颜色就显得有点那啥了。程序界面一样,上一个界面各种不同的颜色的文字或按钮,下一个界面又是不同的文字和按钮颜色。各个界面内边距参差不齐,字体大小忽大忽小。这些往往会无形中降低观感。

提供帮助。 你的程序做的再简单,有些地方可能用户也不明白有什么作用。适当的摆放一个小问号"?"告诉用户这些功能怎么用,有什么用是一个很好的做法。

符合操作顺序。 任何事情都是一步一个脚印,先做什么再做什么,程序的流程顺序必须清晰,否则你得写一本软件使用说明书了。

确认。 高危操作,需要确认。而确认就涉及提示,这和第一点不冲突,你可以把提示直接显示在界面上询问,也可以弹出提示询问。但切记,删除、修改是必须要经过二次确认的。

二、逻辑

输入判断。 界面上有一个手机号码输入框,就意味着:判断是否有内容,判断是否是合法的手机号,输入框仅能输入手机号码会出现的字符。这些事情是必须要做的,必须要写在代码里的。不能随随便便就提交输入的内容了。

验证码。 无论是手机验证码还是邮箱验证码,你都必须在通过一次发送验证后倒计时。否则你遇到一次轰炸(有人恶意狂刷)就代表你里破产不远了。更有甚者,你还需要加入图像验证码才能发送手机验证码。有时候不是防小人,而是防机器人。你觉得叫你选择红绿灯是在让你帮忙识别图像,而我觉得是它在识别你是不是机器人。

状态保持。 我本来在A界面输入数据好好的,一个电话中断了我,再回来我就得再输入一遍,这样的程序没有人想用。如果你的框架支持在离开时保持数据,请务必利用好这个特性,因为下次恢复时你就可以把数据再显示出来。如果没有这样的特性,你甚至应该在用户每次有了输入变化时保存这些数据到一个能够持久保存的位置。都是为了在下次恢复时能够再次回显数据,以避免再次输入,毕竟程序就是给人创造便利的。

可取消性。 尽管你程序运行很快,也离不开网络卡的时候,如果用户在被一个loading挡了十多秒后还没反应,用户是希望能够取消这个loading的,但大多数loading不提供取消按钮,这让人很无耐。除了这类,任何时候的耗时操作你都应该提供取消逻辑。

安全。 说前端无安全。对于特别特别6的人来说,可能是对的,但这世界上6的人通常比5的人要少的。一些基本的数据遮挡必须要有。手机号,验证码,卡号,卡密,虽然不是像密码那样隐私,但也是属于个人信息,能密文传输,要密文传输。

失败重试。 程序是死东西,有时候重试能解决的问题,为什么我们不直接帮人重试了。

复杂而不乱。 有人说前端没有逻辑,那这种人一定不是做前端的。前端逻辑结构设计得好,往往会给界面调整及升级空间带来极大的便利。前端必然涉及多个界面,那些代码是用于全局的,那些代码是仅限某个页面的,你要分清楚。不要在A界面用的代码在B界面你想用了又要为如何调用它而发愁。你应该事先想到什么是应该提到全局的逻辑,什么是各自使用的逻辑。

多了解。 你只有在知道更多原理的情况下才能更好解决问题。否则你抄的代码即便运行了都是不可维护的,甚至你自己不知道如何维护。

Full text complete, Reproduction please indicate the source. Help you? Not as good as one:
Comment(Comments need to be logged in. You are not logged in.)
You need to log in before you can comment.

Comments (0 Comments)