EFS前端开发规范

借鉴启蒙老师的开发规范，根据当前项目做适当修改调整，整理项目开发规范

1：文件夹及文件的命名

• 按文件夹分隔路径，文件名统一小写
• 连词驼峰式命名
  例: pageNotFound.wpy
• 注意标准英文单词
• 单数代表详情、复数代表清单/列表
  例:item表示商品详情 items代表商品列表
• 文件夹内含有同类型文件时，建议用英文复数样式表规范
  例:images、components、pages

2：CSS命名规范

基本命名

• 所有class或id的命名全部使用小写字母，复合词以 - 分隔；禁止使用例如： “.loginNav”，“.loginPage”，“#contentPage” 等驼峰命名方式进行命名。

• 对于放到component层，或者单独独立出来的一个模块，最外层class或者id的命名，一定要以“efs-”开头。例如： “.efs-tips-mask”，“.efs-tips”，“.efs-list”等。

书写规范

2.1. Css代码书写时，选择器的第一个元素一定是以“efs-”加项目标识开头方式命名的。例："efs-mini-"、"efs-pos-"

2.2. Css代码书写时，选择器的第一个元素一定是这一部分模块的最外层class或者id。

/* good css below */
    .efs-tips * {...}
    .efs-tips span {...}
    .efs-tips title {...}
    .efs-tips .tips-hd {...}
    ......
    
/* bad css below */
    * {...}
    span {...}
    title {...}
    .tips-hd {...}
    ......

2.3. Css代码书写时，对于每一个模块的书写，统一都要增加注释，注释方式统一为：“/* */”这种方式。

/* good css below */
    /* tips css start */
    .efs-tips .tips-hd {...}
    .efs-tips .tips-hd .hd-title {...}
    .efs-tips .tips-hd .hd-more {...}
        /* tips warn */
    .efs-tips.warning {...}
        /* tips del */
    .efs-tips.del {...}
    ......
    /* tips css end */
    
/* bad css below */
    .efs-tips .tips-hd {...}
    .efs-tips .tips-hd .hd-title {...}
    .efs-tips .tips-hd .hd-more {...}
    .efs-tips.warning {...}
    .efs-tips.del {...}
    ......

    // tips css
    .efs-tips .tips-hd {...}
    .efs-tips .tips-hd .hd-title {...}
    .efs-tips .tips-hd .hd-more {...}
    // tips warn
    .efs-tips.warning {...}
    .efs-tips.del {...}
    ......

2.4. Css代码书写时，选择器中组成的元素个数，尽量不要超过3个。

/* good css below */
    .efs-list .list-hd {...}
    .efs-list .list-hd .hd-title {...}
    .efs-list .list-hd .hd-more {...}

/* bad css below */
    .efs-list .list-hd .list-content .hd-title {...}
    .efs-list .list-hd .list-content .list-btn .hd-title {...}

2.5. Css代码书写时，样式书写顺序和事例如下：
1. 位置属性(display, float, position, top, bottom, left, right, z-index等)
2. 大小(width, height, padding, margin)
3. 文字系列(font, line-height, color, text-align, letter-spacing等)
4. 背景(background, border等)
5. 其他(animation, transition等)

/* good css below */
    .efs-tips {
        position: fixd;
        top: 0;
        z-index: 1001;
        color: #fff;
        background-color: #fff;
        border-radius: 3px;
    }
/* bad css below */
    .efs-tips {
        border-radius:3px;
        top:0;
        position:fixd;
        z-index:1001;
        color:#fff;
        background-color:#fff;
    }
    .efs-tips {
        z-index:1001;
        top:0;
        position:fixd;
        border-radius:3px;
        color:#fff;
        background-color:#fff;
    }

2.6. Css代码书写时，选择器和'{'之间留一个空格，属性和属性值之间留一个空格，注意ESLINT对齐检测。

/* good css below */
    .efs-tips {
        width: 100px;
    }

/* bad css below */
    .efs-tips{width:100px;}
    .efs-tips {width: 100px;}
    .efs-tips { width:100px; }

2.7. [建议] 微信小程序中统一使用 rpx代替px布局（font-size例外）。

/* good css below */
    .efs-tips {
        width: 200rpx;
    }

/* bad css below */
    .efs-tips{width: 100px;}

• 注意：在以“efs-”开头方式命名时，使用时一定要先进行一次全文检索，防止重名。

3：JS命名规范

命名

3.1. [强制] 变量 使用 驼峰命名法。示例如下：

let loadingModules = {};

3.2. [强制] 常量 使用 全部字母大写，单词间以下划线分隔。示例如下：

let HTML_ENTITY = {};

3.3. [强制] 函数 使用 驼峰命名法。示例如下：

function stringFormat (source) {}

3.4. [强制] 函数的 参数 使用 驼峰命名法。示例如下：

function hear (theBells) {}

3.5. [强制] 类 使用 驼峰命名法，并首字母大写。示例如下：

function TextNode(options) {}

3.6. [强制] 类的 方法 / 属性 使用 驼峰命名法。示例如下：

function TextNode(value, engine) {
    this.value = value;
    this.engine = engine;
}

TextNode.prototype.clone = function () {
    return this;
};

[强制] 枚举变量 使用 Pascal命名法，枚举的属性 使用 全部字母大写，单词间下划线分隔 的命名方式。

示例：

let TargetState = {
    READING: 1,
    READED: 2,
    APPLIED: 3,
    READY: 4
};

[强制] 命名空间 使用 Camel命名法。

示例：

equipments.heavyWeapons = {};

[强制] 由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。

示例：

function XMLParser() {
}

function insertHTML(element, html) {
}

let httpRequest = new HTTPRequest();

[强制] 类名 使用 名词。

示例：

function Engine(options) {
}

[建议] boolean 类型的变量使用 is 或 has 开头。

示例：

let isReady = false;
let hasMoreCommands = false;

[建议] 函数名 使用 动宾短语。

示例：

function getStyle(element) {
}

[建议] Promise对象 用 动宾短语的进行时 表达。

示例：

let loadingData = ajax.get('url');
loadingData.then(callback);

[建议] JS书写规范。

• 不要有多余的空行，不要有多余的空格（ESLINT检测规范）
• tab缩进默认2字符（ESLINT检测规范）
• JS代码中不要出现 " " ，用 ' ' 代替
• JS代码中不要出现 ;
• JS运算符( || && == ===)前后留一个空格
• for循环的写法 ;后留一个空格 < = >符号前后留一个空格
  示例：

for (var i = 0; i < this.list.length; i++) {
  if (this.list[i].orderId === this.selectList[index].orderId) {
    this.list.splice(i, 1)
  }
}

• if else的写法
  示例：

// 没有if else关联的两个if
if (month >= 1 && month <= 9) {
    month = "0" + month
}
if (strDate >= 0 && strDate <= 9) {
    strDate = "0" + strDate
}
// if else
if (month >= 1 && month <= 9) {
    month = "0" + month
} else if (strDate >= 0 && strDate <= 9) {
    strDate = "0" + strDate
} else {
    strDate = "0" + strDate
}

[建议] 字符串拼接规范。

• 推荐使用数组的join()方法替代字符串直接拼接
• +和 ' ' 前后留1个空格

let str = [
    '<div class="img-box">',
        '<img src="' + window.imgCtx + '/' + dataJSON.$attrObj.data('shareurl') + '" alt="">',
        '<i class="icon-del"></i>',
    '</div>'
].join(''))

[建议] JS注释规范。

示例：

    /** 删除弹出框html
     * @auth: ***
     * @param  {[string]} id [传入对应操作对象]
     * @param  {[string]} msg [传入对应的提示信息]
     * @param  {[string]} title [提示标题]
     * @param  {[function]} callback [传回对应绑定事件]
     */
    delHtml: function (id, msg, title, callback) {
        
    }

#PS:特别感谢启蒙老师的谆谆教诲，学到了很多东西，也少走了很多弯路，在此致以最诚挚的敬意！