当前位置: 首页 > Web前端 > HTML

JS前端开发规范

时间:2023-03-28 17:33:35 HTML

一般规范使用strict===始终使用===精确比较运算符,避免JavaScript在判断过程中强制类型转换带来的麻烦。this关键字仅用于对象构造函数、方法和集合闭包中。其语义常常具有误导性。它在前端训练时(大部分时间)指向全局对象,有时指向调用者的域(在eval中),有时指向DOM树中的一个节点(当使用事件处理绑定到HTML属性时),有时它指向一个新创建的对象(在构造函数中),有时它指向其他一些对象(如果该函数由call()和apply()执行和调用)。因为它很容易出错,所以将它的使用限制在:·在构造函数中·在对象的方法中(包括从它们创建的闭包)三元运算符使用三元运算符或return语句的赋值。在比较简单的情况下使用它,在复杂的情况下避免使用它。//badif(x===10){return'valid';}else{return'invalid';}//goodreturnx===10?'valid':'invalid'没有像eval一样使用eval()函数字面意思是魔鬼,使用eval()函数会带来安全隐患。eval()函数的作用是返回任意字符串,并把它当作js代码。使用ES6编码标准。使用let定义变量,使用const定义常量。静态字符串必须使用单引号或反引号,动态字符串使用反引号//badconsta='foobar';constb='foo'+a+'bar';//goodconsta='foobar';constb=foo${a}bar;constc='foobar';解构赋值//1.数组解构赋值constarr=[1,2,3,4];//badconstfirst=arr[0];constsecond=arr[1];//goodconst[first,second]=arr;//2.对象解构赋值//badfunctiongetFullName(user){constfirstName=user.firstName;constlastName=user.lastName;}//goodfunctiongetFullName(obj){const{firstName,lastName}=obj;}//bestfunctiongetFullName({firstName,lastName}){}使用扩展运算符(...)复制数组。constitems=[1,2,3,4,5];//坏的constitemsCopy=items;//好的constitemsCopy=[...items];当箭头函数需要使用函数表达式时,尽量使用箭头函数代替。因为这样更简洁,并且绑定了this//badconstself=this;constboundMethod=function(...params){returnmethod.apply(self,params);};//goodconstboundMethod=(...params)=>方法。应用(这个,参数);