前言

为了符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

项目架构

一、命名规范

1) 文件命名: 全部采用小写方式，以下划线分隔。如：my_project_name.html
2) 目录命名: 参照项目命名规则；有复数结构时，要采用复数命名法。如：pages,assets,components,utils
3) css命名:
- class使用小写字母，以中划线分隔
- id 采用驼峰式命名
- scss 中的变量、函数以中划线分隔命名
4) js命名:
- 标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）
- 常量全大写，用下划线连接
- 构造函数，大写第一个字母
- jquery对象必须以'$'开头命名
5) 组件命名: 全部采用首字母驼峰式命名

二、代码规范

HTML代码规范

1) html5声明类型 <示例1-1>
2) 编码统一为utf-8 <示例1-2>
3) 非特殊情况下css文件必须在<head>...</head>之间引入，选择link方式引入
4) 根据HTML5规范引入CSS和JS时不需要指明type <示例1-4>
5) 尽可能减少标签嵌套,避免使用过度复杂的HTML结构
6) boolean属性不需要声明取值的属性 <示例1-6>
7) 属性书写顺序 <示例1-7>
8) 属性超过三个或单个属性超出50字符强制换行 <示例1-8>
9) 在页面中尽量避免使用style属性,即style=”„”
10) 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title; <示例1-9>
11) 给区块代码及重要功能加上注释

示例代码

1-1:
<!DOCTYPE HTML>;

1-2: 
<meta charset="utf-8"/>

1-4:
<link rel="stylesheet" href="style.css">

1-6:
<input type="text" checked>

1-7:
v-if, v-for,wx:if,wx:for,wx:for-item,wx:for-index,wx:key
class
id
name
data-*
src,for,type,value,max-length,max,min,pattern
placeholder,title,alt
aria-*,role
required,readonly,disabled
style
Onclick, bindtap,@click

1-8:
<input
   class="layui-input"
   type="text"
   name="title"
   value="{:input('title')}"
   placeholder="请输入规格名称"
   autocomplete="off"
/>

1-9:
<img src="img.png" alt="图片">

2.CSS代码规范

1) 统一编码utf-8
2) 命名以中划线分割
3) 嵌套最多不超过5层
4) 属性书写顺序 <示例2-4>
5) 每一块及功能注释

2-4:
属性顺序
    定位
    盒模型
    自身属性
    字体排版
    视觉样式
    其他

.declaration-order {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    display: block;
    float: right;

    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;
}

详细信息: alloyteam.github.io/CodeGuide/#…

3.JAVASCRIPT代码规范

1) 变量采用驼峰命名
2) 通过解构方式获取数据
3) Vue或小程序中所有变量在data中初始化并备注
4) Vue或小程序生命周期初始化that供全局使用
5) 使用promise方式解决回调
6) 每句必须以分号结尾
7) 代码结构明了,加适量注释,提高函数变量重用率

4.代码注释

1.html注释：注释格式，'--'只能在注释的始末位置，不可置入注释文字区域；
2.css注释: 注释格式/*注释*/;
3.JavaScript注释: 单行使用‘//单行注释’，多行注释使用/*多行注释*/

注释示例

作者注释:@author <name> [<emailAddress>]
/**
 * @author yussicahe <yussicahe@gmail.com> 
 */

变量注释
let data = ‘’; // 备注

方法注释
/**
 * @func
 * @desc 计算两个数值的和
 * @param {number} a - 加数a
 * @param {number} b - 加数b
 * @returns {number} 返回a和b的和
 * @example
 * add(1, 2);    // 返回3
 */
function add(a, b) {
    return a + b;
}

详细参考: yuri4ever.github.io/jsdoc/

前端代码规范

前言

项目架构

一、命名规范

二、代码规范

HTML代码规范

示例代码

2.CSS代码规范

3.JAVASCRIPT代码规范

4.代码注释

注释示例