Skip to content

Latest commit

 

History

History
221 lines (199 loc) · 8.34 KB

开发规范.md

File metadata and controls

221 lines (199 loc) · 8.34 KB

github 分支创建规则以及使用

1.添加项目

  • git clone url 到本地添加项目文件
  • 目前分支共三种：main主分支，develop公共开发分支，feature_name个人开发分支(后期会有测试分支)
  • 进入本地 git pull -p 将所有远程分支拉取到本地

2.开发分支创建

  • git branch -all --- 查看所有分支包括本地和远程。
  • git checkout -b 分支名 --- 在本地创建并且跳到该分支
  • git checkout 分支名 --- 切换分支

3.分支代码提交

  • 将代码从工作区【添加】至暂存区 git add . (全部) / git add 文件路径 (部分)
  • 将代码从暂存区【提交】至本地分支 git commit -m "提交信息"
  • 将本地分支代码【推送】至远程分支 git push
  • 新建的本地分支第一次推送需要 git push --set-upstream origin feature_name,这样远程仓库就会出现你的分支
  • 推送本地分支代码和合并代码之前必须 git pull 拉取远程分支代码，有代码冲突必须先解决冲突才能进行推送或合并操作
  • feature分支与develop分支合并前，请一定需要把feature的commit合并，再与develop进行merge

开发规范类：

import 导入规范

  • npm 引入的相关包
  • 样式文件(.scss/.css)
  • js功能模块(.js)
  • 组件模板(.art)
  • 图标 静态资源类(.svg/.eot/.ttf/.woff)

HTML开发规范

  • 标签内属性书写位置优先级 （id > className > 事件属性 > src > alt > style > 其他，单字符属性放到最后 ）
  • 尽量不要写行内样式

CSS开发规范：

工程化组件化思想，每个样式文件对应各自的js代码模块，其他放入到公共部分。

一.样式书写先后顺序规范

    优先级从小到大，位置属性 > 盒子模型 > 文字系列 > 背景 > 其他
  • 1.位置属性（positon > display > float > z-index > top > right > left > bottom）
  • 2.盒子模型大小（box-sizing > width > height > padding > border > margin ）
  • 3.文字系列 （text-align > font > line-height > color >其他）
  • 4.背景 （background > 其他）
  • 5.其他（animation transition等）

二.缩写规范

  • 1.padding,boder,margin,font等等采用缩写.-->前三个尽量合起来写，四个参数 三个参数 两个参数等缩写
  • 2.小数点形式请采用缩写，例如 0.8 ---> .8
  • 3.RGB 等颜色能采用缩写的也要采用缩写 例如：rgb(255,255,255) ---> #fff
  • 4.长命名样式名称使用小驼峰。 例如：moduleXxx 或者使用横线 mfunsPlayer-module-xxx
  • 5.样式选择器尽量使用class选择器

三.常用命名规则

  • 1.使用英文命名不要使用拼音 一律小写，不要使用横线下划线等
    例：
    主体：main 头：header 内容：content/container 尾：footer
    侧栏：sidebar 包围：wrap 位置：left right center 标志：logo
    栏目 ：banner 标签：tag 列表：list 提示：tips 标题：title

  • 2.常见样式命名：
    例：
    主目录 index.css 模块 module.css 基本的 base.css 布局类 layout.css
    主题 theme.css 等等

四.注释的写法

  • 切勿使用/* */，因为会生成在css文件中 样式中添加中文注释如果报错，请在头部加入----> @charset "utf-8"; 指定编码格式

JS开发规范：

一.语法规范

  • 严格准守eslint
  • 尽量使用es6及以上语法
  • 使用小驼峰命名变量/函数/方法

二.代码书写规范

  • 尽量不使用var命名变量和常量，改用let和const
  • 表达式执行以及赋值 请使用|| && 或者三元运算符
   1 === 1 && a.b[(2 < 1 || 1 === 1)?"add":"remove"]()
  • 引用对象变量尽量使用解构赋值
 const obj = {a:{d:{e:1}},b:2,c:3}
 const {a:{d:{e}},b:B,c} = obj
 //此时声明e ,B ,c三个常量,其中e为三次解构常量，B为b的一次解构常量别名，c为一次解构常量
 console.log(e,B,c) //1,2,3
  • 条件分支
// 单行if语句请写在一行 
  if( 1 === 1) console.log(1);
 //如果一个方法中执行if-else语句可简写
 function test(bol = true) {if(bol) return 1;else return 0}
  • 使用es6语法对数组进行遍历、映射、增删改等操作
  • 监听鼠标移动、滚动事件时，回调函数需要进行防抖或节流处理，避免频繁调用
  • class类方法内部使用箭头函数，避免this指针丢失

模块规范

一.模块负责人

展开查看 

├── mfunsPlayer
├── Owner:rudiusu
├── src
│   ├── Owner: rudiusu
│   ├── js
|   ├── Owner: rudiusu
|   |   ├── advancedDanmaku
|   |   │   └── Owner: minteea
|   |   ├── api
|   |   │   └── Owner: rudiusu
|   |   ├── bar
|   |   │   └── Owner: rudiusu
|   |   ├── components
|   |   │   └── Owner: minteea
|   |   ├── contextmenu
|   |   │   └── Owner: rudiusu
|   |   ├── controller
|   |   |   └── Owner: rudiusu
|   |   ├── danmaku
|   |   |   └── Owner: rudiusu
|   |   ├── danmakuAuxiliary
|   |   |   └── Owner: minteea
|   |   ├── events
|   |   |   └── Owner: rudiusu,minteea
|   |   ├── fullscreen
|   |   |   └── Owner: rudiusu
|   |   ├── highEnergy
|   |   |   └── Owner: rudiusu
|   |   ├── hotKey
|   |   |   └── Owner: rudiusu
|   |   ├── index
|   |   |   └── Owner: rudiusu
|   |   ├── info-panel
|   |   |   └── Owner: rudiusu
|   |   ├── options
|   |   |   └── Owner: rudiusu
|   |   ├── player
|   |   |   └── Owner: rudiusu,minteea
|   |   ├── template
|   |   |   └── Owner: rudiusu,minteea
|   |   ├── thumbnails
|   |   |   └── Owner: rudiusu
|   |   ├── timer
|   |   |   └── Owner: rudiusu
|   |   ├── utils
|   |   |   └── Owner: rudiusu,minteea
|   |   └── videoColor
|   |       └── Owner: rudiusu
|   ├── css
│   ├── Owner: rudiusu
|   |   ├── components
|   |   │   └── Owner: minteea
|   |   ├── controller
|   |   │   └── Owner: rudiusu
|   |   ├── danmaku
|   |   │   └── Owner: rudiusu
|   |   ├── danmakuAuxiliary
|   |   │   └── Owner: minteea
|   |   ├── font-icon
|   |   │   └── Owner: minteea
|   |   ├── footBar
|   |   │   └── Owner: rudiusu
|   |   ├── fullscreen
|   |   │   └── Owner: rudiusu
|   |   ├── index
|   |   │   └── Owner: rudiusu,minteea
|   |   ├── loader
|   |   │   └── Owner: rudiusu
|   |   ├── menu
|   |   │   └── Owner: rudiusu
|   |   ├── modal
|   |   │   └── Owner: rudiusu
|   |   ├── panel
|   |   │   └── Owner: rudiusu
|   |   ├── player
|   |   │   └── Owner: rudiusu
|   |   ├── theme
|   |   │   └── Owner: minteea
|   |   └── video
|   |       └── Owner: rudiusu
|   |
|   ├── icon
|   └── Owner: rudiusu
|       └── fonts        
|           └── Owner: minteea
|
└── template
    ├── Owner: rudiusu
    ├── danmakuAuxiliary
    │   └── Owner: minteea
    ├── danmakuReportModal
    │   └── Owner: rudiusu
    ├── player
    │   └── Owner: rudiusu,minteea
    ├── slider-vertical
    │   └── Owner: minteea
    ├── slider
    │   └── Owner: minteea
    ├── video
    |   └── Owner: rudiusu
    └── videoColorModal
        └── Owner: rudiusu

二.模块开发守则

  • 1.项目各个模块由各自的Owner负责，一般情况不得变动
  • 2.若某个模块出现问题请直接联系Owner，非Owner不得私自改动
  • 3.当出现某个模块需要多名开发组成员共同开发时，请划分自己的代码区域，不要改动其他小伙伴的代码，更不要随意更改整体模块代码结构
  • 4.项目Owner对项目内模块有最终决定权