前端代码规范

L-freeMan

已于 2024-05-06 15:08:11 修改

阅读量273

点赞数 6

文章标签：前端代码规范

于 2024-04-06 21:55:56 首次发布

本文链接：https://blog.csdn.net/weixin_52026514/article/details/137438987

版权

前言

随着团队人数的增加，每个人的代码编写喜好不同，代码风格也迥然不同。问题导致熟悉对方的代码时，我们需要浪费不必要的时间，所以总体一套代码规范，一能解决维护成本，也能提高代码质量，所以大家一起规范起来吧

命名规范

1) 项目命名

全部采用小写方式，以下划线分隔。
例：my_project_name

2 ) 目录命名

参照项目命名规则；
有复数结构时，要采用复数命名法。
例：pages, assets, directives, components, mixins, utils

3) javaScript 文件命名

参照项目命名规则。
例：account_model.js

4) CSS,less文件命名

参照项目命名规则。
例：retina_sprites.less

5 )HTML文件命名

参照项目命名规则。
例：error_report.html

6) 如果使用Vue或者React技术栈，组件Component命名

所有组件名字需要首字母大写，然后驼峰格式
例：CalendarList.vue

HTML

1) 语法

缩进使用soft tab（4个空格）；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线做分隔符；
不要在自动闭合标签结尾处使用斜线（HTML5 规范 指出他们是可选的）；
不要忽略可选的关闭标签;

<!DOCTYPE html>
<html lang="en-us">
    <head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <title>Page title</title>
    </head>
    <body>
        <img src="images/company_logo.png" alt="Company" />

        <h1 class="hello-world">Hello, world!</h1>
    </body>
</html>

2) 引入CSS, JS

<!-- External CSS -->
<link rel="stylesheet" href="code_guide.css">

<!-- In-document CSS -->
<style>
    ...
</style>

<!-- External JS -->
<script src="code_guide.js"></script>

<!-- In-document JS -->
<script>
    ...
</script>

css、less

相关的属性声明按右边的顺序做分组处理，组之间需要有一个空行。

.declaration-order {
    display: block;
    float: right;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    border: 1px solid #e5e5e5;
    border-radius: 3px;
    width: 100px;
    height: 100px;

    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    text-align: center;

    color: #333;
    background-color: #f5f5f5;

    opacity: 1;
}

注释

在对应方法名称上方表明该方法的作用

// 提交
function onSubmit() {
   return
}

多行注释

最少三行, '*'后跟一个空格，具体参照右边的写法；

建议在以下情况下使用：

难于理解的代码段
可能存在错误的代码段
浏览器特殊的HACK代码
业务逻辑强相关的代码

/*
 * one space after '*'
 */
var x = 1;

变量命名

标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）
'ID'在变量名中全大写
'URL'在变量名中全大写
'Android'在变量名中大写第一个字母
'iOS'在变量名中小写第一个，大写后两个字母
常量全大写，用下划线连接
构造函数，大写第一个字母
jquery对象必须以'$'开头命名

var thisIsMyName;

var goodID;

var reportURL;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {
    this.name = name;
}

// not good
var body = $('body');

// good
var $body = $('body');

null

适用场景：

初始化一个将来可能被赋值为对象的变量
与已经初始化的变量做比较
作为一个参数为对象的函数的调用传参
作为一个返回对象的函数的返回值

不适用场景：

不要用null来判断函数调用时有无传参
不要与未初始化的变量做比较

// not good
function test(a, b) {
    if (b === null) {
        // not mean b is not supply
        ...
    }
}

// good
var a = null;

if (a === null) {
    ...
}

undefined

永远不要直接使用undefined进行变量判断；

使用typeof和字符串’undefined’对变量进行判断。

// not good
if (person === undefined) {
    ...
}

// good
if (typeof person === 'undefined') {
    ...
}