某互联网公司前端JS代码规范

2023-11-15

JavaScript编程规范

1.概述

    目的:

      规范开发部员工在项目开发过程中的JavaScript编码,进而提高系统性能及代码的可读性,降低维护的难度。

    适用范围:

      使用JavaScript语言开发的所有人员。

2.排版规范

1)      程序块采用缩进风格编写,缩进的空格数为4个,且不要使用TAB键。

说明:

避免使用不同的编辑器或阅读程序时,因TAB键所设置的空格数目不同,而造成程序布局不整齐。

2)      在特定的位置加上空格。

说明:

在特定的位置加上空格有助于代码的可读性,以下位置需要加上空格:

l  算数运算符前后(除累加、递减符)。

l  赋值运算符前后。

l  控制语句关键字之后。(else、catch关键字的前后)。

l  对象初始化的每个属性名的“:“号后。

l  所有“,“号后。

3)     在函数体的开始、类的定义,以及程序块中的语句,需要加上必要的缩进。

说明:

函数和if、for、do、while、switch、case中语句的需要加缩进较长的语句、表达式或参。

示例:

functiondoSomething() {

var a;

}

for (...){

doSomething;

}

4)     较长的语句、表达式或参数要分成多行书写。

说明:

长表达式要在低优先级操作符处划分新行,操作符放在新行之首,划分出的新行要进行适当的缩进。单行不能超过160个字符。

示例:

if (status == 1

&& (isDelete == null || isDelete ==0)) {

    doSomething;

}

window.open(‘Contract!edit.do’, ‘win_contract_edit’,

‘height=1000,width=600,top=0,left=0');

5)     一行只写一条语句。

说明:

不允许把多个短语句写在一行中.

示例:

var status = 0;

var data = {};

6)     if,for,do,while,case,switch,default等语句自占一行,且执行语句都要被包含在{}。

说明:

不允许在只有一行执行语句的情况下省略{}。

示例:

if (status = 1) {

    doSomething;

}

7)     语句必须以“;”号结尾。

说明:

不允许在语句结束后省略“;”号。

示例:

doSomething;

8)     确定不再使用的代码要删除。

说明:

保留不再使用的代码容易在阅读代码的时候对阅读人产生误导,不方便代码阅读。

3.注释规范

1)     全局变量注释。

格式:

    /** 变量的含义、作用 */

说明:

    方便代码阅读及维护。

示例:

/**表单状态 */

var formStatus;

2)     方法注释。

格式:

/**

 * 方法描述、作用

 *@param 参数说明

 *@returns 返回值说明

 */

说明:

方便代码阅读及维护。

示例:

/**

 * 示例方法

 *@param arg示例参数

 *@returns 示例返回值

*/

function doSomething(arg) {

    returnresult;

}

3)     逻辑注释。

格式:

                     //注释内容

说明:

在关键字段和复杂逻辑处添加代码逻辑注释,如if、else、switch等语句。

示例:

//注释

if (status == 1) {

    doSometing;

}

4)     注释与所描述内容进行同样的缩排。

说明:

可使程序排版整齐,并方便注释的阅读与理解。

示例:

/**

 * 示例方法

 *@param arg示例参数

 *@returns 示例返回值

 */

function doSomething(arg) {

    //注释

    returnresult;

}

5)     注释应与其描述的代码相近,对代码的注释应放在其上方或右方(对单条语句的注释)相邻位置。

示例:

    //定义新增状态

    var statusNew = 0;

    或

    var statusNew = 0;//定义新增状态

6)     对关键变量的定义和分支语句(条件分支、循环语句等)必须编写注释。

说明:

这些语句往往是程序实现某一功能的关键所在,良好的注释能帮助维护者更好地理解程序,有时甚至优于看设计文档。

示例:

    //如果为新增状态

    if(status = statusNew){

       doSomething;

    }

    //遍历某某数组,进行什么处理

    for(vari = 0; i < arr.length; i++) {

       doSomething;

    }

7)     边写代码边注释,修改代码同时修改相应的注释,以保证注释与代码的一致性;不再有用的注释要删除。

8)     注释的内容要清楚、明了,含义准确,防止注释二义性。

说明:

错误的注释不但无益反而有害。

9)     从代码的业务功能、业务意图层次上进行注释。

说明:

注释的目的是解释代码的目的、功能和采用的方法,帮助读者理解代码的业务实现。

示例:

如下注释意义不大。

// 如果状态等于1

if (status === 1)

而如下的注释则给出了业务层面有用的信息。

// 如果是草稿状态

if (status === 1)

 

4.命名规范

命名法:

说明:

    统一命名法有利于代码的可读性,便于维护。

命名法定义:

1、驼峰式:doSomething

2、帕斯卡式:MyObject

3、下划线式:STATUS_NEW

命名约定:

序号

命名对象

命名法

示例

1

全局变量

驼峰式

var contractStatus;

2

函数名

驼峰式

function doSomething(firstArg) {

    doSomething;

}

3

参数名

驼峰式

4

局部变量

驼峰式

var dataTable;

5

对象

帕斯卡式

function Person(name)  {

    this.name = name;

}

6

常量

下划线式

var STATUS_NEW = 0;

1)   方法、变量、常量、参数名不超过50字符。

说明:

如果函数名过长时,可采用以去掉元音字母的方法或者以行业内约定俗成的缩写方式缩写函数名。

2)   不实用无意义的方法、变量、常量、参数名。

说明:

属性名使用意义完整的英文描述。

示例:

    规范:

                            var contractStatus;

                     不规范:

                            var a;

3)   含有集合意义的属性命名,需要包含其复数的意义。

示例:

varusers;

varuserList;

4)   各种名称,尽量使用英文单词,减少拼音的使用。

5.编程规范

1)   一个html文件对应一个javascript文件,文件命名与html文件相同。

说明:

在需要进行javascript实现页面逻辑的时候,建立一个与html文件同名的.js文件,若有公用的处理逻辑,应提取到公用的.js中。

2)   禁止在html文件中进行javascript编程。

说明:

若需要接收服务器参数,可以在html中添加javascript代码使用变量接收,但逻辑代码必须写在.js文件中。

3)   一个函数仅完成一件功能,即使简单功能也应该编写方法实现。

说明:

使方法的功能明确化,增加程序可读性,方便维护。

4)   用括号明确表达式的操作顺序,避免使用默认优先级。

说明:

防止阅读程序时产生误解,防止因默认的优先级与设计思想不符而导致程序出错。

示例:

if(条件1 || 条件2 && 条件3)

需写成

if(条件1 || (条件2 && 条件3))

5)   避免使用不易理解的魔术数字,用有意义的常量来替代。

说明:

便于阅读及后期维护。用常量来定义。

示例:

    if(status === 0)

    需写成

    //新增状态

    var statusNew = 0;

    if(status === statusNew)

6)   不要将不同目的的语句,合并成一行。

说明:

便于阅读及后期维护,并且减少编码错误。

              示例:

                     将

var a = b, b = 0;

写成

var a = b = 0;

                     实际上两个表达式的含义是不同的,后者的意思是:

                            var b = 0;

                            var a = b;

7)   所有变量都在使用之前先定义。

说明:

由于javascript的并不强制变量使用前必须定义,但是javascript会将未定义的变量作为全局变量,使得其对于任何一个代码块都是用的。

              示例:

                     规范:

                            var a = 0;

                     不规范:

                            a = 0;

8)   不做大量的html字符串拼接。

说明:

在js中拼接大量的html字符串再动态嵌入html文件中,该做法使得代码可读性及可维护性极差。

              示例:

                     不规范示例:

                     var html = ‘<div id=”div_parent”><div id=”div_child”>……</div></div>’

                     建议大篇幅的html字符穿可以预先写在html文件中隐藏,需要时直接获取该html进行克隆,修改属性后使用。

9)   尽量不写复杂的算法逻辑(比如复杂的递归算法)。

说明:

由于javascript是在客户机上执行,且用户所用的浏览器对脚本的处理能力也不同,复杂的算法可能使得浏览器卡死甚至崩溃。

              示例:

                     不规范示例:

                            function func(arg1){

                                   if(条件1){

                                          doSomething;

                                   } else {

                                          func(arg);

                                   }

                            }

10)  不是用与html节点对象ID属性相同的js变量名称。

说明:

         IE浏览器不支持。

              示例:

                     不规范示例:

                            html:

                                   <input id=”userName” />

                            js:

                       var userName;

11)  不使用模态窗口。

说明:

         统一使用window.open()方法。

12)  尽量使用jquery编程。

说明:

         使用jquery编程会避免一些兼容性问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

某互联网公司前端JS代码规范 的相关文章

  • 仿中国婚博会微信小程序

    仿中国婚博会微信小程序 app json pages pages index index pages cash cash pages marry marry pages community community pages me me pag
  • VUE项目中的全局格式化时间过滤器

    自定义格式化时间 一 问题 这是一个后台管理系统中的商品列表页 其中的时间这一项在调用接口后会发现是以毫秒来计算的 这样当然是不行的啦 要换算成我们日常使用的2020 04 07 17 13 这样的时间格式 二 解决办法 1 打开项目中的m
  • 【每日一练】79—CSS实现扫描二维码动画

    二维码的应用越来越普通 加个好友 付个款 做个核酸 想去一个地方 还要扫个场所码 总之 需要二维码的地方越来越多 因此 在这样的大环境里 如何让你的码与众不同 引人注意 就显得非常重要 今天我们就来练习一个二维码的动画效果 具体效果如下 看
  • 多维数组变成一维数组

    这个问题来源于一个朋友曾经问过我的问题 当时是一个二维数组变成一维数组 后面我想整理一下 整理一个多维 并且是不定维的数组 一 二维数组变成一维数组 1 遍历数组 将元素一个个放入新数组 结果 如果元素不是数组 将会报错 下面是改良版 这样
  • js制作简单的轮播图

    实现原理 首先定义一个div 设置width和height 然后在这个div里面再定义一个div2 该div的宽度为父div的宽度的n倍 其中n表示图片的张数 在这个div2里面放置需要进行轮播的所有图片 设置每张图片的宽度为一个最外层父类
  • JS 变量提升和函数提升

    变量提升 这里介绍一个变量提升提升的经典案例 for var i 0 i lt 10 i setTimeout gt console log i 1000 这里打印是10个10 因为在执行第一个setTimeout时 Js不会等待1秒后再去
  • 组织关系图谱

    div style width 100 height 800px div
  • koa使用之node.js 文件加密与解密

    利用node js的crypto模块实现文件加密解密 代码 加密函数 param text 需要加密的内容 param key 秘钥 returns Query 密文 function encode text key var secret
  • $emit传递参数

    emit传递一个参数时 子组件代码 let data name 王五 age 50 this emit change data 父组件代码
  • js给json对象增加、删除、修改属性

  • postMan使用技巧

    使用postMan调试接口 一些接口要实现登录才能访问 即要还token才能访问 一般登录后 拿到token才复制到其他接口下添加token变量 如些复制感觉是挺麻烦的 这时我们可以设置postman的全局变量 操作如下 添加调试环境和全局
  • js数组相加相减函数

    数组相减 reduceArray arr1 arr2 for var i arr1 length 1 i gt 0 i var a arr1 i for var j arr2 length 1 j gt 0 j var b arr2 j i
  • js 手机、邮箱、身份证格式验证

  • 微信小程序之map地图规划路线以及显示距离

    有个问题 在选择公交路线 包含步行和公交 时 怎么才能让不同的路线显示不同的颜色 ps 有个方式 自己写坐标解压往后的存入新数组 把步行时的数据标注下 有什么简单的方法呢 自定义函数文件 自动获取定位信息 function getLocat
  • crypto-js md5加密和解密

    直接上代码 import CryptoJS from crypto js const encodeFactor zq87dopenf67eg 加密 export function encrypt txt var key CryptoJS e
  • js读取jpg图片扩展信息,处理二进制数据

    js 读取图片扩展信息 将图片转为ArrayBuffer var http new XMLHttpRequest http onload function if this status 200 this status 0 console l
  • React class组件、react-hook函数组件分别实现五子棋

    react class类组件 react hook函数组件分别实现五子棋 前言 使用create react app脚手架简单搭建 不用安装其他依赖 纯 js css实现 这里就只是简单的说明目录结构和思路 具体的代码实现请转到 Githu
  • react(craco)移动端使用postcss-px-to-viewport自适应布局

    Craco 使用postcss px to viewport devDependencies craco craco 6 4 3 xianzhengquan postcss px 2 vw 0 0 1 postcss 8 3 0 peerD
  • hooks实践总结

    何为hooks 在React中hook是指不编写 class 的情况下使用 state 以及其他的 React 特性 而Vue3也推出了具有相同功能的组合式API 如果你用过Vue3就会知道在 setup 中你应该避免使用 this 因为h
  • JS实现成才网注册系统(网页数据验证)

    主代码

随机推荐

  • java定时器Timer的使用

    在JDK库中Timer类主要负责计划任务的功能 也就是在指定的时间开始执行某一个任务 Timer类的主要作用就是设置计划任务 但是封装任务的类的是TimerTask类 下面展示几个例子 在指定的日期执行一次某一任务 import java
  • C语言常用math函数

    算法笔记 第2章 fabs double x 对double型变量取绝对值 floor double x 和ceil double x 对double型变量进行向下取整和向上取整 pow double r double p 计算 r p r
  • 几种集中式管理框架比较

    最近因为项目管理上的需要 调研集中式管理工具 百度Disconf 携程Apollo 阿里ACM 三者都可以满足集中式配置 并提供监听 实时改变配置 关于3个框架的使用以及搭建请自行参考官方API文档 不再叙述 对比了3个框架的配置 如下 d
  • 精确时钟同步协议ptp/IEEE-1588v2协议-------(1)简介

    本文目录 1 从角色的角度来区分 2 从时钟类型的角度来区分 2 1 在IEEE 1588 2002中定义了普通时钟 OC ordinary clock 和边界时钟 BC boundary clock 这二种类型的时钟 2 2 在IEEE
  • 【neo4j】win10上利用neo4j-admin导入csv

    原因 我需要导入CN DBpedia到Neo4j中 包含900万 的百科实体以及6700万 的三元组关系 普通逐条插入可能速度太慢 所以要使用neo4j admin命令来进行导入 CN DBpedia原始数据直提供了txt格式的三元组数据
  • java系统增加查找算法详解

    题干 数学老师小y 想写一个成绩查询系统 包含如下指令 insert name score 向系统中插入一条信息 表示名字为name的学生的数学成绩为score find name 表示查找名字为name的学生的数学成绩 注意有些同学可能会
  • Rancher基础使用

    Rancher基础使用 安装 以下安装是在centos7 环境下 注意 生产环境建议在 Kubernetes 集群上安装 Rancher 因为在多节点集群中 Rancher Server 可以实现高可用 这种高可用配置可以提升访问下游集群的
  • 【流媒體】jrtplib—VS2010下RTP开源协议库JRTPLIB3.9.1编译

    流媒體 jrtplib VS2010下RTP开源协议库JRTPLIB3 9 1编译 SkySeraph Apr 7th 2012 Email skyseraph00 163 com 一 JRTPLIB简介 老外用C 编写的开源RTP协议库
  • matlab、C语言实现时域卷积运算

    背景 某次面试 岗位为音频算法 遇到了c语言实现卷积的编程题 当时不够精通c语言 写的程序比较垃圾 现在重新整理了一下 原理 卷积公式 matlab有自带的计算卷积的函数conv 根据公式 现编写实现卷积的函数并与自带函数做对比 关键点 假
  • 初步C++: g++: error: CreateProcess: No such file or directory

    问题 使用eclipse 环境 学习 c 出现如下错误 g error CreateProcess No such file or directory 经过百度查找 花了接近一天时间 始终找不到问题原因 今天下午出去上完 英语课回来的时候
  • 07-Java框架-SpringBoot整合MyBatis

    一 SpringBoot整合mybatis 1 1 添加依赖 创建springboot项目 添加依赖 编写启动类等 并在springboot依赖的基础上加入 mysql 和 springboot整合mybatis 的依赖 依赖对应关系参考官
  • Proxyee Down百度网盘高速下载器详细使用教程

    之前的Mac介绍毒了很多关于百度云提速的文章 但随着时间的推移 也都一一失效 今天再为大家带来一款百度云提速神器Proxyee Down 测试可以正常使用 速度也是非常的快 但不能保证所有资源下载正常 下面为大家整理详细的教程 希望大家可以
  • 更改jar包里的代码

    1 将class文件改成java文件 如果你的jar包中是包含源代码的 即包含java文件 请跳过此步 先将jar包通过winrar或者快压等解压缩软件将jar包解压缩 再通过一些专门的Java反编译工具将class文件转换为java文件
  • 如何将Android studio 的项目变成Lib工程,供项目使用

    最近公司项目比较松 在这里我优化项目时 突然想到就写一下关于项目怎么搞成lib包来给其他项目引用的过程 下面就是所有的步骤 说得很详细呢 1 先创建一个PersonLibDemo的一个Android项目 在这个项目创建一个类 方便测试在别
  • C#读写欧姆龙PLC数据omron 使用TCP/IP FINS协议

    很多自动化设备使用OMRON PLC来控制制造过程 如果有SCADA 数据系统需要获取PLC的数据 甚至控制制造过程的参数 如加热温度 切割长度等 这需要一个中间层来执行这个任务 这个类就是为这种需求而设计的 可以把它嵌入到你的应用中 让你
  • 计算机磁盘组织选项,电脑d盘怎么清理 选择常规选项然后点击磁盘清

    谈论到电脑 大家应该都了解 有人问电脑d盘如果满了怎么办 当然了 还有人想问电脑d盘满了 怎么清理 这到底怎么回事呢 事实上电脑里面的d盘怎么没有了呢 下面小编就会给大家带来电脑d盘怎么清理 下面就和大家分享一下吧 电脑d盘怎么清理 具体操
  • PageHelper.startPage的使用

    PageHelper startPage的使用 PageHelper是MyBatis的分页插件 它能够帮助我们快速且简洁的实现分页功能 传统的分页都需要我们程序员手动在sql语句里写LIMIT语句 而PageHelper这个插件能够帮助我们
  • 时序预测

    时序预测 MATLAB实现基于EMD LSTM时间序列预测 EMD分解结合LSTM长短期记忆神经网络 目录 时序预测 MATLAB实现基于EMD LSTM时间序列预测 EMD分解结合LSTM长短期记忆神经网络 效果一览 基本描述 模型描述
  • python 情感分析实例_基于Python的情感分析案例

    情感分析 又称为倾向性分析和意见挖掘 它是对带有情感色彩的主观性文本进行分析 处理 归纳和推理的过程 其中情感分析还可以细分为情感极性 倾向 分析 情感程度分析 主客观分析等 情感极性分析的目的是对文本进行褒义 贬义 中性的判 情感分析 又
  • 某互联网公司前端JS代码规范

    JavaScript编程规范 1 概述 目的 规范开发部员工在项目开发过程中的JavaScript编码 进而提高系统性能及代码的可读性 降低维护的难度 适用范围 使用JavaScript语言开发的所有人员 2 排版规范 1 程序块采用缩进风