前端JS代码规范

前言

下面这几点将工作中所踩的一些坑简单整理了一下,团队几个人开发,一些默契就比较重要,可以提高开发效率和代码的可读性

命名,编码和注释

命名

A.文件夹命名:文件夹、文件的命名与命名空间应能代表代码功能,可读性强,如hub B.函数和变量命名: 具有意义的驼峰命名,如hubList; 变量函数名禁止使用关键字和保留字,禁止重新定义(不能重名)或定义不用 C.常量:大写字母,如HUBLIST

编码

采用统一的缩进方式排版代码。缩进为2个ASCII空格,句末必须用分号结尾(待定,vue就无分号)

注释

A单行注释

B多行注释

C.Js代码注释console.log和debugger再提交 D.重要函数或者类等都要添加头描述

字符串拼接

应使用数组保存字符串片段,使用时调用join方法。避免使用+或+=的方式拼接较长的字符串,每个字符串都会使用一个小的内存片段,过多的内存片段会影响性能

例一:

例二:会影响性能

ES6的使用

变量声明:

Let:不存在变量提升问题;不能重复声明

常量声明:

Const:原理是内存地址不可变

箭头函数:

A.有函数名

B.无函数名

C.箭头函数使用注意的问题: This指向定义者,内部无arguments对象,不能new(因为箭头函数的this就是指向定义本身),函数里面不要有太多的return D.函数的形参不超过7个,超过用数组,调用时实参和形参对应 E.不能有重复的返回 F.在循环内部声明函数慎用,因为是循环执行完成函数调用才会执行 G.Return后面不要写代码,并且不封装成if…then…else…

导入和导出

使用import和export,只能位于代码顶部和顶部,如果代码中部需要按需导入文件使用require

解决地狱回调问题

A.方法一

B.方法二

C.promise解决多个ajax或定时器调用数据依赖问题

1.promise里面不存在ajax和定时器

var data1=12;
  Promise.resolve().then(
    function(){data1=24})
  .then(function(){
    console.log(data1);
  })

2.存在定时器

var data2=54;
let _this=this;
  Promise.resolve().then(function(){
    return new Promise(function(res,rej){
        setTimeout(() => {
        data2=36
        console.log(data2)
        console.log(_this)
        res()
        return data2;
      }, 10);
      })
  }).then(function(){
    console.log(data2)
  })

在定时器里面设置res(),res执行啦,才会执行then(),如果对应的ajax也可以做类似的封装 promise里面的this并不指向vue,所以需要在外面缓存

3.axios封装的promise 可以在axios里面设置flag,用watch监听,值返回再执行下面的代码,并设置Flag为false

If,for…in,for…of和的使用

A.能用三元运算符就用,减少if的嵌套,第一个花括号位于一行的结束

B.减少多余条件判断,如果是函数返回if里面和外面返回相同的数据类型

C.If…else if…else多个条件时以else结尾,因为符合防御性编程规则 D.NaN不应该用于比较,应该是判断是否是数字 E.Switch…case使用在至少有三个判断值,case不可省,每次case必须用break跳出 F.for…of遍历数组和字符串

可以使用break,return(一个循环一个),continue不使用,降低代码可读性 G.for…in遍历对象 For…in遍历对象包括所有继承的属性,所以如果只是想使用对象本身的属性需要做一个判断

总结

欢迎大家补充和修正!大家圣诞节快乐.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS面试之对象(2)

    new的作用: 1.创了一个新对象; 2.this指向构造函数; 3.构造函数有返回,会替换new出来的对象,如果没有就是new出来的对象

    火狼1
  • 如何写出一个惊艳面试官的 Promise【近 1W字】 前言源码1.Promise2.Generator3.async 和 await4.Pro

    1.高级 WEB 面试会让你手写一个Promise,Generator 的 PolyFill(一段代码); 2.在写之前我们简单回顾下他们的作用; 3....

    火狼1
  • JS面试之数组的几个不low操作(3)

    本文主要从应用来讲数组api的一些骚操作; 如一行代码扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等; 上面这些应用场景你可以用一行...

    火狼1
  • JavaScript基础学习--07函数的传参、重用、价格计算

    Demos:   https://github.com/jiangheyan/JavaScriptBase 一、函数传参      1、参数=js数据类型  ...

    用户1148399
  • 前端工作面试经典问题(超级全)

    本文包含了一些用于考查候选者的前端面试问题。不建议对单个候选者问及每个问题 (那需要好几个小时)。只要从列表里挑选一些,就能帮助你考查候选者是否具备所需要的技能...

    前朝楚水
  • Netty ByteBuf原理剖析

    JDK为了解决网络通信中的数据缓冲问题,提供了ByteBuffer(heap或者直接内存缓存)来解决缓存问题,通过缓冲区来平衡网络io和CPU之间的速度差异,等...

    luoxn28
  • 吴恩达深度学习中文版笔记:人脸识别和神经风格转换

    大数据文摘
  • 使用归因模型前,要先填上这8个坑!

    仲志成,iCDO原创志愿者 在互联网数据领域,归因模型常被提及。如何用对数据,如何真正让归因模型产生价值,作者为我们总结了8个坑。让我们一起来看看自己有没有落入...

    iCDO互联网数据官
  • 如此浅显易懂的零拷贝

    显然,从上面得知本机直接内存的分配不会受到Java堆大小的限制,但这里要注意直接内存也是物理内存的一部分,也受到真实内存的限制,所以当直接内存占用过多时,使Ja...

    晚上没宵夜
  • BFS+剪枝查找目标转推流节点

    需求:在各个国家都有可能部署转推流节点,因此需要高效快捷的查找到离推理地点最近的一个目标转推流节点。

    职场亮哥

扫码关注云+社区

领取腾讯云代金券