首页 > 其他分享 >js前端编码规范

js前端编码规范

时间:2023-11-08 17:48:38浏览次数:40  
标签:语句 编码 函数 前端 js 使用 import 强制 2.5

1、编码风格

  1.1 强制两行缩紧

  1.2 强制统一以分号结束语句

  1.3 强制逗号分隔多行结构,始终加上最后一个逗号

  1.4 推荐使用大括号包裹代码块

  1.4.3 强制不适用空代码块

  1.5 强制空格风格

  1.6 推荐文件末保留一行空行;在块末和新语句间插入一行空行

  1.7 推荐单行最大字符数100(字符串、正则、模版字符串除外)

  另:参考文件最大行数:1000;函数最大行数:80

 

2、变量声明

  2.1 强制使用const和let声明变量

  2.1.3  一条声明语句声明一个变量(更易追加新的声明语句&进行单步调试)

  2.1.4  强制声明的变量必须被使用

  2.1.6  参考哪里使用,哪里声明

  2.1.9  强制禁止连续赋值

  2.2 原始类型

  2.2.1  强制不要使用new Number/Sting/Boolean,会导致变量变成object类型

  2.2.2  推荐类型转换 Number() 或parseInt()、Sting()、!!

  2.2.3  强制字符串优先使用单引号

  2.2.1  推荐模版字符串代替字符串拼接

  2.2.1  强制禁止不必要的转义字符

2.3 数组

  2.3.1  强制使用字面量创建数组:[]

  2.3.3  推荐使用扩展运算符…处理数组

  2.4  对象

  2.4.1  强制使用字面量创建对象

  2.4.2  强制使用对象属性和方法的简写语法

    eg: const atom = {

        value,

        addValue(value) {

          return value + ‘anything’;

        }

      }

  2.4.3  参考将对象的简写属性写在一起

  2.4.4  强制对象的属性名不要用引号包裹,除非包含特殊字符

    更加简洁,也有助于语法高亮和一些JS引擎的优化

  2.4.5  强制优先使用:访问对象的属性

    []仅应用在访问动态属性名或者包含特殊字符的的属性名时被使用

  2.4.6  推荐使用扩展运算符…处理对象 

  2.4.7  推荐使用对象解构获取对象属性

  2.4.9  强制不要直接在对象上调用Object.prototypes上的方法

  这些方法可能会被对象上的属性覆盖,导致错误

  建议直接使用Object.prototype.xxx, 而不是直接使用 对象.xxx

  2.5  函数

  2.5.1  强制不要用Function构造函数创建函数

    使用new Function创建函数会像eval()方法一样执行字符串,带来安全隐患

  2.5.2  强制不要在块中使用函数声明(function xxx),在非函数块中,不要使用函数声明

  2.5.3  参考使用函数表达式替代函数声明

    这样可以保证函数不能在定义前被调用

    函数声明会被提升到当前作用域的顶部,因此函数可以在声明语句前就被调用

    会影响代码的可读性与可维护性

  2.5.4  强制使用箭头函数代替匿名函数

  2.5.6  强制不要将函数参数命名为arguments

  2.5.7  强制不要使用arguments对象

  2.5.2  推荐使用默认参数语法(参数赋值默认值)

  2.5.9  推荐有默认值的函数需要放到参数列表的最后

    否则你将无法享受到默认参数的便利,只能通过传undefined触发参数使用默认值

  2.5.10  推荐不要修改函数参数

    不要修改引用类型的参数,这可能导致作为入参的原变量发生变化

    更不要给参数重新赋值,这可能导致意外的行为和内核优化的问题

  2.5.11  强制将立即执行的函数表达式用小括号包裹

  2.5.12 强制函数复杂度不应过高

    过高的复杂度意味着代码难以维护和测试,

    推荐:圈复杂度不超过10,认知复杂度不超过15

  2.5.13  参考函数的参数不应过多

    如果必须使用过多的参数,可以考虑用对象代替参数列表

  2.5.14  参考优先使用JS提供的高阶函数进行迭代运算

    减少直接使用for循环(for-in和foe-of)

    如使用map/some/every…来迭代数组;

    使用Object.keys()/Objet.values()/Object.entries()方法来迭代对象

  2.6  类

  2.6.1  推荐使用class语句声明类,而不是使用prototype

    class语句是ES6中引入的用于声明类的语法糖,更加简洁易维护

  2.6.2  推荐使用extends语句进行类的继承

    extends是用于原型继承的内建方法,不会破坏instanceof

  2.6.3  强制避免不必要的constructor

    ES6 class会提供一个默认的constructor

  2.6.4  强制正确地使用super方法

    子类的constructor中必须使用super(),且必须在this和super关键词前调用

    非子类的constructor中不能使用super()

  2.6.5  强制避免重复的类成员命名

    重复的类成员声明最终生效的将是最后一个

  2.7  模块

    2.7.1  推荐使用ES6 modules 而非其他标准的模块系统(import/export)

    2.7.2  强制不要用多个import引入同一模块

    2.7.3  强制import语句需要放到模块的最上方

    2.7.6  强制禁止引用自身/循环引用  

    2.7.8  推荐在模块导入之后保留一个空行

    2.7.9  参考import语句的排序

      import语句建议规则排序:

        先import第三方模块,再import自己工程里的模块

        先import绝对路径,再import相对路径

  2.8  操作符

  2.8.1  推荐使用严格相等运算符(=== / !==)

  2.8.4  强制避免嵌套的三元运算符

  2.8.5  强制避免不必要的三元表达式

  2.8.6  强制混合使用多种操作符时,用小括号包裹分组

  2.9  控制语句

  2.9.1  强制switch语句中的case需要以break结尾

  2.9.2  参考switch语句应包含至少3个条件分支

  2.9.4  参考控制语句的嵌套层级不要过深

  2.9.6  推荐for- in循环中需要对key进行验证

    使用for-in循环时,避免对象从原型链上继承类的属性也被遍历出来,

    因此保险的做法是对key是否是对象自身的属性进行验证

  2.9.7...

    待补充...

 

标签:语句,编码,函数,前端,js,使用,import,强制,2.5
From: https://www.cnblogs.com/lijinxiao/p/17817935.html

相关文章

  • 前端歌谣的刷题之路-第七十三题- 点击按钮隐藏按钮
     前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目......
  • 前端歌谣的刷题之路-第七十四题-直角三角形
     前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目......
  • vuejs3.0 从入门到精通——Element Plus 组件库
    ElementPlus组件库一、ElementPlus 基于Vue3,面向设计师和开发者的组件库。二、完整导入https://element-plus.org/zh-CN/guide/quickstart.html#完整引入 如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。//main.tsimport{createApp}from'vu......
  • 基础课-前端JS
    JAVAScript基础语法意义:让前端界面动起来;它是负责前端界面与用户之间的交互前端界面变化的思维导图:             触发            调用           运行用户进行操作------------>前端事件-----------......
  • JS 计算两日期时间相差多少天
    计算两日期时间相差多少天!functiongetDays(DateOne,DateTwo){ varOneMonth=DateOne.substring(5,DateOne.lastIndexOf('-')); varOneDay=DateOne.substring(DateOne.length,DateOne.lastIndexOf('-')+1); varOneYear=DateOne.substring(0,DateOn......
  • JS 获取几天后的日期格式
    functiongetDateStr(addDayCount,a){ vardd=newDate(); dd.setDate(dd.getDate()+addDayCount);//获取addDayCount天后的日期 vary=dd.getFullYear(); varm=(dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期,不足10补0 var......
  • JS 字符串操作
    JS字符串操作小结:concat()–将两个或多个字符的文本组合起来,返回一个新的字符串。 indexOf()–返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回-1。 charAt()–返回指定位置的字符。 lastIndexOf()–返回字符串中一个子串最后一处出现的索引,如果没有匹......
  • JSTL fmtformatNumber日期、 数字、货币格式化
    JSTLfmt:formatNumber日期、数字、货币格式化使用<fmt>标签应先导入<%@taglibprefix="fmt"uri="http://java.sun.com/jsp/jstl/fmt"%>其uri可在fmt.tld文件下 1、日期格式化<fmt:formatDatevalue=“${XXX.date}”pattern=“yyyy-MM-ddHH:mm:ss”/> value:要......
  • 纯前端实现录屏并保存视频到本地【转载】
    转载地址:https://mp.weixin.qq.com/s/ryAF9IXRsaPs01xSHG-AiA<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scal......
  • 前端工程狮
    现在移动互联网发展的这么快,前端开发领域也越来越广,前端早已经告别了切图崽的时代,在web端、移动端(安卓、IOS)、Watch、小程序、公众号开发、混合app开发都能看到前端开发工程师的影子。从狭义上讲,前端工程师使用HTML、CSS、JavaScript等专业技能和工具将产品UI设计稿实现成网......