前言
之前在工作室分配给学弟一个任务:做一个网上报名的应用,做完后上传到仓库后,我review了一下,发现了不少问题,我也经历过这个阶段,所以我通过这篇文章总结了一些问题。
声明变量问题🙈
let
和const
都是ES6新增的变量声明方式,而不少人会对其进行滥用,但是let
和const
两者的使用也需要进行斟酌。
其实用一句话就能概括出使用let
和const
的场景:正常情况下可以使用let
声明,而如果你想要禁止这个变量二次赋值,就可以使用 const
,下面我们来看看真正实际的例子,这是学弟写的一个基本的表单接口的获取内容部分,他使用let
声明变量,为了存放表单内容,而目前场景没有更改表单的需求,我为了禁止这个变量二次赋值或者修改可以使用const
来声明。
function get() { // 获取表单内容,后面发送数据 let ano = document.getElementById('ano').value let name = document.getElementById('name').value let phone = document.getElementById('phone').value // 发送数据 } 复制代码
function get() { // 获取表单内容,后面发送数据 const ano = document.getElementById('ano').value const name = document.getElementById('name').value const phone = document.getElementById('phone').value // 发送数据 } 复制代码
而如果我们获取数据后想对其进行二次修改吗,那么我们可以使用let
,而二次修改视情况也分为两种,一种是立即修改,比如修改类型,则可以使用const
赋值的时候完成修改,一种是条件修改,根据一些条件来进行修改,所以还是那句话:**正常情况下可以使用let
声明,而如果你想要禁止这个变量二次赋值,就可以使用 const
**✌️
那我们为什么要这么细致地去使用let
与const
呢?这样做可以让代码整体的规范变得更好,让开发变得流畅。
判断封装问题📚
涉及到表单,那肯定需要判断表单是否合规,我看了学弟的这个地方的代码,我拿一个表单作一个例子
function email() { let email = document.getElementById('email').value let emailtip = document.getElementById('emailtip') if (myreg.test(email)) { emailtip.innerText = '' email_one = 1; } else { emailtip.innerText = '输入内容不合法' email_one = 0; } } 复制代码
上面这段判断输入内容是否合规的代码,是先获取邮箱内容,在将内容进行一个邮箱的判断,并为一个事先声明好的变量赋值,最后通过变量来判断是否合规,看过这段代码后,我吐槽到还是没有彻底地掌握函数的应用啊
function email() { let email = document.getElementById('email').value let emailtip = document.getElementById('emailtip') return myreg.test(email) // 布尔值 } 复制代码
我优化了一下,利用函数的返回值,将值给到函数,再将提示内容错误的显示与隐藏的逻辑封装成另一个函数,抽出具体函数的功能,分工明确,即讲判断值与执行分开来做。
类型使用问题😵
这位学弟的代码中包括了一些判断,而我看到这一大串的判断后,我就觉得不简单
if (lose_one == 1 && phone_one == 1 && email_one == 1 && home_one == 1 && number_one == 1) 复制代码
这里使用==
判断等于画蛇添足,在基于上面的优化判断逻辑后利用函数返回值,我们就可以将其转换成下面这种形式,来进行一个合法判断。
if (email()&&phone()) 复制代码
而且,在js
类型的使用上我们需要注意,布尔值和数字的0
和1
要分开使用,尽量做到各司其职!!!