资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/前端JS代码规范

前端JS代码规范

zhiwei / 2372人阅读

摘要：缩进为个空格句末必须用分号结尾待定就无分号注释单行注释多行注释代码注释和再提交重要函数或者类等都要添加头描述字符串拼接应使用数组保存字符串片段，使用时调用方法。

前言

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

命名,编码和注释 命名

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遍历对象包括所有继承的属性,所以如果只是想使用对象本身的属性需要做一个判断

总结

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

idc机房托管 云服务器 前端规范 前端规范文档 代码规范 代码规范考试

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90431.html

相关文章

  • 从 1 到完美，写一个 js 库、node 库、前端组件库

    摘要：从到完美，写一个库库前端组件库之前讲了很多关于项目工程化前端架构前端构建等方面的技术，这次说说怎么写一个完美的第三方库。使用导出模块，就可以在使用这个库的项目中构建时使用功能。 从 1 到完美，写一个 js 库、node 库、前端组件库 之前讲了很多关于项目工程化、前端架构、前端构建等方面的技术，这次说说怎么写一个完美的第三方库。 1. 选择合适的规范来写代码 js 模块化的发展大致有...

    rollback 评论0 收藏0

  • 从 1 到完美，写一个 js 库、node 库、前端组件库

    摘要：从到完美，写一个库库前端组件库之前讲了很多关于项目工程化前端架构前端构建等方面的技术，这次说说怎么写一个完美的第三方库。使用导出模块，就可以在使用这个库的项目中构建时使用功能。 从 1 到完美，写一个 js 库、node 库、前端组件库 之前讲了很多关于项目工程化、前端架构、前端构建等方面的技术，这次说说怎么写一个完美的第三方库。 1. 选择合适的规范来写代码 js 模块化的发展大致有...

    xiaolinbang 评论0 收藏0

  • 前端资源系列（4）-前端学习资源分享&前端面试资源汇总

    摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

    princekin 评论0 收藏0

  • 构建前端项目

    摘要：解决思路服务器端渲染服务器端和前端公用同一个应用，然后通过构建工具及配置，确定哪些组件需要再服务器端渲染，那些组件需要再客户端渲染。服务器端渲染，由框架与构建工具配合，并依据一定的项目结构和编码方式，共同运行。 分离 为什么需要 前后端分离、web服务器与static服务器分离: 前端与后端耦合 (需求) 自动化、工程化的构建前端的代码 (基础条件) 模块化、组件化，项目共享代码 (...

    mindwind 评论0 收藏0

  • 前端、HTML+CSS+JS编写规范（终极版）

    摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...

    jsyzchen 评论0 收藏0

  • 前端、HTML+CSS+JS编写规范（终极版）

    摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...

    _Dreams 评论0 收藏0

发表评论

登陆后可评论

0条评论

zhiwei

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<