浅谈前端开发流程规范

目录构建规范

---

• 命名原则
  - src：源代码
  - img：图片资源
  - js：javascript脚本
  - dep：第三方依赖包
  - 注意：不使用复数
  • 根目录（root）结构按职能划分
    • src：源代码
    • doc：文档
    • dep：第三方依赖包
    • test：测试
  • 根据业务逻辑进行文件夹的划分
    • common：公共资源
    • public/static：静态资源
    • component 组件
    • view/tpl 模板文件
  • 总结
    • 以上目录开发规范有两种使用途径
      • 使用前端工程化工具（如webpack、gulp等进行手动打造）
      • 利用框架提供的脚手架工具进行修改

前端命名规范

---

• 1.css命名规范
  • BEM规范
    • Block Element Modifier，定义了一种css class的命名规范，每个名称及其组成部分都是存在一定的含义。
    • 由拉丁字母, 数字, -组成css的单个名称
  • OOCSS规范
    • Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码。 OOCSS是以面向对象的思想去定义样式，将抽象和实现分离，抽离公共代码。
    • 将重用的东西当做一个对象来看， 然后将不同的属性 放到另一个类名去
  • 1.javaScript编写规范
    • jslint
    • eslint

开发文档书写规范

---

• 1.html规范
  • 标签上属性顺序建议如下：
    • class（高可复用、应在第一位）
    • id、name（尽量少使用id）
    • data-*
    • src、for、type、href、value、placeholder、title、alt、aria-*、role、required、readonly、disabled
    • id/class命名规则：BEM、OOCSS、SMACSS
    • 注释（尽量使用英文）
• 2.css规范
  • 属性顺序
    • 位置->大小->文字系列->背景->其他
    • 位置：position、top/right/bottom/left、z-index、display、flaot etc
    • 大小：width、height、padding、margin etc
    • 文字系列：font line-height letter-spacing color text-align ect
    • 背景：background、border etc
      • 其他：animation、transition etc
    • 尽量少使用选择器（css3选择器）
    • 属性使用简写属性
• 3.js规范
  • 语言规范
    • 声明变量尽量使用let，少使用var
    • 优先使用箭头函数
    • 使用模板字符串取代连接字符串
  • 分号的使用
    • 代码每一句以分号结尾
  • 块内函数声明
    • 不在块内声明一个函数

    •  if（x）{
           function（）{}
       }
      

      必要时，使用函数表达式初始化变量

        if（x）{
           let fn = function（）{}
        }
      

  • 循环/遍历
    • forEach
    • map
    • filter
    • every
    • some
    • for-in
    • for-of
    • for
    • while
    • do-while
  • 函数命名规范
    • 可以使用数字、字母、下划线、美元符
    • 不允许数字开头
    • 不能使用关键字和保留字
    • 见名知意
    • 驼峰命名
      • 普通函数->小驼峰
      • 构造函数->大驼峰
  • 常量名命名规范：必须使用全部大写的下划线命名法
  • 私有（保护）成员命名规范：
    • 必须以下划线揩油
  • 枚举的属性：
    • 必须使用全部大写的下滑写命名法
  • var、let、const应该放在function已经进入函数的时候
  • 回调函数命名规范：
    • 统一使用promise函数，回调成功的参数统一为res（response），错误参数为err

    let callback = new  Promise((resolve, reject) => {
       if (/* 异步操作成功 */){
           resolve(value);
       } else {
           reject(err);
       }
    });
    
    callback.then((res) => {
       console.log('成功回调！', res);
    }).catch((err) => {
       console.log('失败回调！', err);
    });
    

    • 引号规范
      • js中使用反引号（``）或是单引号（‘’），不在使用双引号（“”）
    • 函数默认值
      • 函数默认值写在其他参数后面