自己要遵循的编程规范总结

自己要遵循的编程规范总结

一、文件目录规范

• 文件夹命名

  • src 下第一层文件夹：统一小写字母
  • 组件和类文件夹：统一大驼峰
  • 其他文件夹或文件：小驼峰或中划线（一个项目中遵循统一的规范）

• 文件目录组织结构

  • 公用组件放置在 src 的 components 目录下。业务组件放置在相关业务模块的 components 下。

  • 一个业务模块的目录结构。

    business // 业务模块文件夹

    config // 配置文件夹

    index.js // 首页 index.vue 文件中需要的配置项（相关不需要逻辑处理的数据或配置）

    components // 业务相关组件

    Componet1 // 组件 1

    config.js // 组件 1 的配置文件
    index.vue // 组件 1 的首页

    index.vue // 业务模块首页

二、vue 文件书写规范

• import 导入顺序
• npm 包、子组件、工具函数、api 接口、变量

• templete 中

  • Html 结构

    • 遵循每一个小模块都使用 div 进行包裹，结构清晰，方便样式书写。
    • 元素 attribute 顺序。（is、v-for、v-if、v-else、v-show、v-cloak、v-pre、id、ref、key、v-model、v-on、v-html、v-text）

  • 类名（最多拼接四个单词）

    • 不使用单个单词命名，尤其是常见的单词。如：header，content，footer，text 等等。
    • 根类名：为 vue 文件的命名，如果是 index.vue 页面则为上层文件夹的名称，每个单词用中划线进行连接。
    • 一级类名：缩写根类名拼接模块描述。如：根类名为 expert-manage。则筛选头部命名为 em-sift。
    • 二、三、四等级别的类名：根类名和一级类模块描述缩写+各级模块描述缩写（除当前模块）+当前模块描述。如：
      二、三、四、五级描述分别为，operate、left、btn、enter。则二、三、四、五级类名分别为：ems-operate、ems-o-left、ems-ol-btn、ems-olb-enter。
    • 最多五级类名，再多就需要考虑优化结构了
  • 变量
    • 使用小驼峰命名。
    • 优先使用双引号进行包裹。
  • v-for 不要和 v-if 同时写在同一个标签上。
  • 例子

    <!-- 专家管理 -->
    <div class="expert-manage">
    	<!-- 筛选模块 -->
    	<div class="em-sift">
    		<!-- 筛选模块操作部分-->
    		<div class="ems-operate">
    			<!-- 操作部分左侧 -->
    			<div class="ems-o-left">
    				<!-- 左侧按钮 -->
    				<div class="ems-ol-btn">
    					<!-- 确认 -->
    					<div class="ems-olb-enter">确认按钮</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    

• script 中

  • 配置项书写顺序

    • el、name、components、directives、filters、mixins、props、data、computed、watch、生命周期、methods
    • methods 中
      • 方法的书写顺序。初始化调用的事件、根据页面上触发事件的空间排布（从左往右、从上往下）相关依赖方法依次往下 排列。
    • 通过页面直接触发的方法。直接动作+目标：如：点击搜索（获取列表数据）可命名为：clickSearchBtn / getListData。但是 我们应该使用直接的动作+目标来命名。应该使用第一种，而不是第二种。原因如下：
      • 在 clickSearchBtn 中我们可以处理一些额外的逻辑，比如防抖，逻辑判断等等。如果这些操作逻辑放到 getListData 这个方法中，很明显是不合适的。
      • 第二种适合实现获取数据列表方法的命名。

• style 中

  • 属性书写顺序

    • 首先：布局定位属性: display / position / float / clear / visibility / overflow(建议 display 第一个写，毕竟关系到模式)

    • 其次：自身属性: width / height / margin / padding / border / background

    • 然后：文本属性:color / font / text-decoration / text-align/ vertical-align / white-space / break-word

    • 最后：其他属性(CSS3 ) : content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient…

  • 结构书写

    • 和 dom 结构的书写尽量保持一致。
    • 特殊的样式写在顶部，便于查找和修改。

三、js 文件书写规范

• 优先使用单引号。
• 变量命名
  • 形式：小驼峰
  • 规则：

    名词变量（直接拼接）。如：专家姓名（expertName）、列表数据（listData）
    状态变量（is+形容词/名词）。如：是否冻结（isFreeze）、是否正在加载（isLoading）

• （接口）函数命名
  • 形式：小驼峰
  • 需要加上统一的 Api 的后缀
  • 命名规则：动作 + 目标 + 具体方面 + Api。例如：获取（动作）专家管理（目标）列表（具体房名）数据接口（Api），命名为：getExpertManageListApi。
  • 动作描述汇总：

    添加：add
    删除：delete
    取消：cancel
    获取/查询/查看：get
    修改/更新：set
    导出：export
    上传：upload
    下载：download
    判断：judge

  • 具体方面描述汇总

    列表：list
    详情：detail
    信息：message
    数据：data

• 常量
  • 避免出现魔鬼字符串。
  • 使用全大写加下划线命名的方式。如：订单取消状态（OEDER_CANCEL_STATUS）
• 语句书写
  • 上一个 if 有返回，则不应该再使用 else if 或 else。而是应该再写一个 if。
  • 在有大量判断时，不要使用 switch case。应该使用对象的 key：value 来进行映射。

四、其他规范

• 注释
  • 每一个文件的最上方使用块级注释说明文件的作用和功能。表述：** + [组件 | 页面 ] + [配置]
  • 行注释上方需要加空行。紧连着上一层结构的不需要。
  • data 中的变量使用行尾注释。
  • 方法中拥有完整逻辑的单行语句使用行尾注释。
  • 方法中说明一段代码的意思，使用单行注释，且上方需要空行。