如何写出难以维护的js代码?
以下内容纯属娱乐,请勿当真。
起因
如何写出一堆又臭又长,动不动undefined,no function,嵌套7、8层小括号的代码?
实际上,就我对js的开发经验来说,js本身就是一个十分难以维护的语言,这与他出生时设计简陋,也是编写js库的开发人员不怎么遵守规范导致的。导致这些问题的是js自身的特性:
- 语法检查不严格
- 类中成员是动态的,它不一定会存在
- 没有确定的类型,所以没有语法提示
以前经常说,js就是一坨shi
发展
基于以上的几个特性,结合近来发展火热的框架,在这里列举一些编写令人深恶痛绝的编写方式。以下内容都是我从接手的项目中得到的启发,句句属实,没有故意编造的成分。
-
永远不要使用 async/await
一定要写成异步的,不要写成同步的。这样性能比较好
-
多使用回调函数
能用then就then,代码一定要写在then或者catch里面。这样代码结构清晰
-
多使用lambda,然后里面写很长一段函数,多个参数直接不要回车换行
示例:
myfun((xx,xx)=>{ //千万不要换行,紧凑 return get(xxx)},(xx,xx)=>{ //写上大概60+行 })
-
在某个函数之中悄悄注册事件
事件的注册不要集中写在某个函数或者某个文件内,写在一起看起来太复杂,拆分下去,在不知不觉中完成了功能,又减轻了负担。
-
在某些函数内多写debugger
虽然这个地方不需要debugger,但是多让同事在这个地方缓缓。休息会也是极好的。
-
多log一些无意义的日志
-
函数名变量名在开头标上下划线_
这是为了防止命名冲突
比如什么_page ,_ _par,
-
函数名尽量短
控制在1个字母或者两个字母,这是为了简洁
t(), gl() pk()等
-
把函数在某个地方挂到全局对象的protoType上
比如调用了a函数,a函数里会把b函数挂载到this上。然后通过this来调用b
这个目的是为了保证调用顺序,必须先调用a再调用b(虽然没有这个必要)
-
多嵌套,能在一个小括号内写完的不要出这个小括号
对于什么axios,什么promise,全部写在then里面。
如果then里面还有then,那就继续写在里面的then。
像什么弹窗确认,确认后的逻辑继续往里套
如果有if switch,继续往里面套。一个小括号能写完的不要单独多开一行。
问就是简洁
-
参数一定要经过多个方法才能获取到
以vue和vuex为例。
有个方法想要获取param,首先要过滤arr数组,过滤的条件来自getXxx方法。
arr线:
arr数组从哪来?从参数传递过来。
参数从哪来?从b方法调用时传递。b方法调用的参数从哪来?b方法中调用了c的某个函数拿到。
c的数据从哪来?从vuex中取出。
vuex中的数据从哪来?有多个途径,有时是直接调用接口获取,有时是某个方法的map、或者find的结果,设置进去。
诸如此类。虽然没有必要,但是一定要这么写,从而保证调用的顺序是 a->b->c。
必须满足某个条件才可以调用。此处注意,千万不能写注释说明这个参数的来源。因为只可意会不可言传。
-
多用$给方法起名
虽然我这个不是核心方法,但是这个方法很重要,所以加上$,并且名字要短。
$g()
$t()
$v()
-
对于vue,数据尽量从多层组件传递过来
大体逻辑类似11。多用prop进行传递。b的参数来自于b的兄弟a的子组件中的子组件的子组件的某个选择框
-
能不写注释就不写注释
即使一定要写注释,一定要简略。
对于获取某某部分的数据,注释写成 “获取数据”。参数的来源不要写明。
这样可以简洁明了。
-
如果这个变量在这个对象中可能不存在,不要判断
dddd,不懂的说了也没必要。
obj对象可能有kich 属性,也可能没有,不需要判断。真正的程序员都是直接调用的。
对函数同理。this.kich() 不要判断有没有,反正我使用的时候它存在即可。也不要说明在哪声明这个方法,相信同事一定能发现。
-
多用三元运算符以及熔断
熔断就是 && ,把他和三元表达式混合在一起。直接return。多套几层小括号。
聪明人一眼就能看出来,不需要说明。
-
利用异步的特性编写代码
有些属性就是需要异步才能获取,把这个些属性存储为全局变量。
使用时务必直接从全局变量中取出,不要判断有没有,用就完了。真男人从不磨磨唧唧
-
隐藏的bug不需要写声明
与断点推荐的文章同理。
比如一个生命周期里必须要先调用a,再调用b,也可以先调用b再调用a,但是会出现一个百度都搜索不到的bug(真实存在),报错信息又很少。a b 逻辑上没有关联,只是加载顺序导致的页面崩溃
这个时候不要写声明,直接先调a,然后让b延迟一秒再执行。
setTimeout(()=>{ //调用b b(); },1000) a();
只要你的同事不优化,就没问题,一旦尝试优化,就会报错。
这是告诫同事:没事别乱改