开发文档

前端开发规范

创建于 2023-06-02 / 最近更新于 2023-06-02 / 4629
字体: [默认] [大] [更大]

基础

  1. table采用4个空格
  2. 标签层级对齐
  3. 所有取名使用英文、请勿使用拼音

html

  1. class/id及属性自定义命名使用小写、多个单词使用横杠区分( - )、见名取意
  2. form name命名使用小写、多个单词使用下划线区分( _ )、单标签闭合前面使用空格分开
  3. 属性之间使用空格分开、属性值使用双引号包裹
  4. 不同业务写好注释合理换行、避免变成一大坨
  5. 列子如下:
<div class="am-text-center goods-info" data-goods-id="10" data-goods-title="商品名称">
    <p class="goods-title">商品名称</p>
    <p class="goods-price">¥100</p>
</div>

<form>
    <input type="text" name="name" value="" />
    <input type="text" name="goods_title" value="" />
</form>

css

  1. 样式写在对应css文件中,标签选择器及多级选择器使用空格分开
  2. 选择器结尾使用空格花括号换行中
  3. 样式冒号与样式值使用空格分开
  4. 列子如下:
.hello .sub {
    color: #f00;
    font-size: 20px;
}

js

  1. js写在对应js文件中,标签选择器及多级选择器使用空格分开
  2. 选择器结尾直接换行再花括号
  3. 方法命名单词首字母大写、参数默认值和多个参数使用空格分开
  4. 变量名称小写、多个单词下划线区分( _ )、变量与等于左右使用一个空格分开
  5. 列子如下:
// 选择器
$('.hello .sub').on('click', function()
{
    console.log(1)
});

/**
 * 方法名称
 * @author  Devil
 * @version 1.0.0
 * @date     2020-09-02
 * @desc     方法的详细描述或使用方式
 * @param   {[string]}   name            [名称]
 * @param   {[int]}        age               [年龄]
 * @param   {[string]}   hello_world   [测试字符串]
 */
function HelloWorld(name, age = 0, hello_world = '默认值')
{
    // 商品价格
    var goods_price = 100;
    // 商品名称
    var goods_title = '商品名称';
    // 商品编码
    var code = 200;
    console.log(name, age, hello_world);

    // 循环测试
    var data = [100, 200, 300];
    for(var i in data)
    {
        console.log(1)
    }
}

注释

  1. 注释写在上方、//注释使用空格分开、闭合注释内容头尾使用空格分开
  2. 列子如下:
// 注释信息
var name = 'devil';

/* 注释信息 */
.hello .sub {
}

<!-- 注释信息 -->
<div>
    <p>hello world</p>

    <!-- 测试模板引擎写法、注释信息 -->
    {{if $age > 18}}
        <p>成年人</p>
    {{else /}}
        </p>未成年人</p>
    {{/if}}
</div>
17 人点赞过