前端规范

Mark_Kong
266 阅读7分钟

  1. 命名规范（英文-直译）

    1. 文件命名 文件夹/文件的命名统一用小写 保证项目有良好的可移植性，可跨平台 相关参考（www.ruanyifeng.com/blog/2017/0…
    2. 文件引用路径 因为文件命名统一小写，引用也需要注意大小写问题
    3. js 变量
      1. 变量 命名方式：小驼峰 命名规范：前缀名词 命名建议：语义化
        • 案例：
        // 友好
let maxCount = 10;
let tableTitle = 'LoginTable';
// 不友好
let setCount = 10;
let getTitle = 'LoginTable';
      2. 常量 命名方式：全部大写 命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词 命名建议：语义化
        • 案例：
        const MAX_COUNT = 10;
const URL = 'https://pro.qsx001.com';
      3. 函数 命名方式：小驼峰式命名法。 命名规范：前缀应当为动词。 命名建议：语义化
        • 参考：
        can: 判断是否可执行某个动作（权限）；函数返回一个布尔值，true：可执行；false：不可执行；
has: 判断是否含有某个值；函数返回一个布尔值，true：可执行；false：不可执行；
is: 判断是否为某个值；函数返回一个布尔值，true：为某个值；false：不为某个值；
get: 获取某个值；函数返回非布尔值；
set: 设置某个值；无返回值，返回是否设置成功或者返回链式对象；
load: 加载某些数据；无返回值或者返回是否加载完成的结果；
TODO-待添加
      4. 类、构造函数 命名方式：大驼峰式命名法，首字母大写 命名规范：前缀为名称。 命名建议：语义化
        • 案例
        class Person {
  public name: string;
  constructor(name) {
    this.name = name;
  }
}
const person = new Person('mevyn');
        公共属性和方法：跟变量和函数的命名一样。 私有属性和方法：前缀为_(下划线)，后面跟公共属性和方法一样的命名方式。
        • 案例
         class Person {
   private _name: string;
   constructor() { }
   // 公共方法
   getName() {
     return this._name;
   }
   // 公共方法
   setName(name) {
     this._name = name;
   }
 }
 const person = new Person();
 person.setName('');
 person.getName();
      5. css（class、id）命名规则 BEM class 命名使用 BEM 其实是块（block）、元素（element）、修饰符（modifier）的缩写，利用不同的区块，功能以及样式来给元素命名。这三个部分使用__与--连接（这里用两个而不是一个是为了留下用于块儿的命名）；
        • 命名约定的模式如下：
        .block{}
.block__element{}
.block--modifier{}
block 代表了更高级别的抽象或组件
block__element 代表 block 的后代，用于形成一个完整的 block 的整体
block--modifier代表 block 的不同状态或不同版本
        id 一般参与样式，命名的话使用驼峰，如果是给 js 调用钩子就需要设置为 js_xxxx 的方式

  2. 注释

    1. 单行注释
     // 这个函数的执行条件，执行结果大概说明
 dosomthing()
    1. 多行注释
      /*
   * xxxx  描述较多的时候可以使用多行注释
   * xxxx
   */
  dosomthing();
    1. 函数(方法)注释 参考 jsdoc
    @param: 参数名（参数类型）描述信息；描述参数信息；实例：@param name[String] 传入名称
@return: 描述返回值的信息；@return {Boolean}； 实例：true可执行，false不可执行
@author: 作者信息[附属信息：如邮件、日期]；描述此函数作者的信息；实例：@author 张三 2015/07/21
@version: @version XX.XX.XX；描述此函数的版本号；实例：@version 1.0.3
@example: @example实例代码；演示函数的使用；实例：@example setTitle('测试')

  3. 组件 每个 Vue 组件的代码建议不要超出 200 行，如果超出建议拆分组件 组件一般情况下是可以拆成基础/ui部分和业务部分，基础组件一般是承载呈现，基础功能不和业务耦合部分。 业务组件一般包含业务功能业务特殊数据等等

    1. UI组件/基础组件 开发的时候注意可拓展性，支持数据传参进行渲染，支持插槽 slot 设置有 mixin，mixin 中放了基础信息和方法
    2. 容器组件 和当前业务耦合性比较高，由多个基础组件组成，可承载当前页的业务接口请求和数据(vuex)
    3. 组件存放位置 ui 组件存放在 src/components/ 中 包含 xxx.vue 和 xxmixin.js 和 readme.md xxx.vue 表示 ui 部分 xxmixin.js 表示 js 部分
      • readme.md 中描述组件的基本信息
      @name: 组件名称；案例：筛选下拉框
@version: 版本；案例：v1.0.0
@updateTime: 更新日期；案例：2021.03.04
@describe: 使用场景描述；案例：搜索功能使用
@props: 参数；案例：['data']
@author: 作者；案例：Mark
      • 组件结构
      element-filter/index.vue
element-filter/mixinElementFilter.js
element-filter/readme.md
引用组件的时候 直接引入 mixinElementFilter.js 即可。在引用组件的页面可以对mixin里面的方法进行重构
      业务组件就放在业务模块部分即可
    4. 组件通讯 避免数据的分发源混乱，不建议使用 eventBus 控制数据，应使用 props 来和$emit 来数据分发和传送 同级组件的通讯一般会有一个中间容器组件作为桥梁 容器组件作为数据的接收和分发点
    5. 组件的挂载和销毁 通过v-if控制 <test-component v-if='componentActive'> </test-component> 通过is控制 <component is='componentName'> </component>
    6. 跨项目组件共用 公共组件存放位置中定时抽取共用次数多的组件 将他放在 git 版本库中，供下载引用

  4. codeReview

    1. 规则 所有影响到以往流程的功能需求更改发版前都需要 codeReview
    2. 执行者 每个前端有一个固定的 codeReviewer
    3. 反馈 每次 codereView 都需要有反馈，要对本次 codeReview 负责
      • 反馈内容例子
      功能：本次主要是修改了什么功能或者bug
模块：本次发版影响的模块
代码问题：codereview过程中发现的代码问题，比如代码性能，写法，代码风格等等
业务问题：比如发现了某某影响到其他模块的逻辑问题，如果没有发现就写。无

  5. git 规范

    1. 分支

      • 命名
       master: master 分支就叫master 分支，线上环境正在使用的，每一次更新master都需要打tag
 test: test分支就供测试环境使用的分支
 develop: 日常开发分支就叫develop 分支
 feature: 实验性分支，按 feature/name/version 这种命名规范来，后面有更好的命名规范咱们再改。version 表示当前迭代的版本号，name 表示当前迭代的名称
 hotfix: hotfix 分支的命名我们按 hotfix/name/version 这种来进行命名,verison表示这次修复的版本的版本号，name表示本次热修复的内容标题
 斜杠 的方式 在source-tree中有归类的作用

    2. git 提交模板

      • gitcommit_template 文件
       [部门][项目]:
 问题原因:
 解决方法:
 变更类别:
 适用机型:
 验证建议:
 关联变更项：
 任务 Id:
      • 设置模板的命令
       设置当前分支的提交模板
 git config commit.template [模板文件名]    
 例如：git config commit.template gitcommit_template

 设置全局的提交模板
 git config --global commit.template [模板文件名]    
 例如： git config --global commit.template  git commit_template

 设置文本编辑器
 git config -global core.editor [编辑器名称]  
 例如: git config -global core.editor vim

 选择你需要的相应设置然后你就可以提交你的文件了。
 提交代码
 git commit (git gommit 之前需要将没有加入代码库的 git add 进入代码库)
 git commit -a (这个可以提交多个代码文件)

 此时，你commit之后，就会用你设置的编辑器打开你设置的模板，然后按照你的格式添加相应的备注，保存

  6. 分享会 每两周至少执行一次，分享工作，生活各方面都可以

  7. Vue 组件结构

export default {
   // 不要忘记了 name 属性
   name: 'RangeSlider',
   // 组合其它组件
   extends: {},
   // 组件属性、变量
   props: {
      bar: {}, // 按字母顺序
      foo: {},
      fooBar: {},
   },
   // 变量
   data() {},
   computed: {},
   // 使用其它组件
   components: {},
   // 方法
   watch: {},
   methods: {},
   // 生命周期函数
   beforeCreate() {},
   mounted() {},
};
avatar
文章
阅读
粉丝