Skip to content

代码规范

HTML 规范

基础脚手架 PC

html
<!-- 统一使用HTML5的DOCTYPE -->
<!DOCTYPE html>
<!-- lang使用zh-CN,考虑设备兼容 -->
<html lang="zh-CN">
    <head>
        <!-- 页面编码使用UTF-8 -->
        <meta charset="UTF-8" />

        <!-- 采用IE=Edge, chrome=1 浏览器兼容模式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

        <!-- keywords,description 必须 -->
        <meta name="keywords" content="" />
        <meta name="description" content="" />

        <!-- title 必须 -->
        <title>Document</title>

        <link rel="stylesheet" href="index.css" />

        <!-- @author [yourname] | @design [designer name] | @pm [pm name] -->
    </head>
    <body>
        <!-- start 模块名称 -->
        <!-- end 模块名称 -->

        <script src="index.js"></script>
    </body>
</html>

基础脚手架 M 站

HTML
<!-- 统一使用HTML5的DOCTYPE -->
<!DOCTYPE html>
<!-- lang使用zh-CN,考虑设备兼容 -->
<html lang="zh-CN">
<head>
	<!-- 页面编码使用UTF-8 -->
	<meta charset="UTF-8">

	<!-- viewport -->
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

	<!-- keywords,description 必须 -->
	<meta name="keywords" content="">
	<meta name="description" content="">

	<!-- title 必须 -->
	<title>Document</title>

	<link rel="stylesheet" href="index.css">

	<!-- @author [yourname] | @design [designer name] | @pm [pm name] -->
</head>
<body>

	<!-- start 模块名称 -->
	<!-- end 模块名称 -->

	<script src="index.js"></script>
</body>
</html>

CSS 规范

scss
.
└── scss
    ├── _init
    │   ├── _init.scss      // 每个scss都需要引用这个文件,这个文件引用了下面两个文件
    │   ├── _mixin.scss     // 封装的一些辅助方法
    │   └── _variable.scss  // 全局用到的参数
    ├── global              // 全局样式
    │   ├── _acss.scss      // 原子化CSS
    │   ├── _reset.scss     // 样式重置
    │   ├── _base.scss      // 基础样式
    │   └── index.scss      // 这个文件引用了以上所有文件
    └── index
        └── index.scss

项目结构

- src
	- api			//	接口管理目录
	- assets		//	图片资源目录
	- common		// 	公共资源目录(函数库、请求封装)
	- components	// 	组件库

命名规范

组件命名:

​ 文件与组件命名保持一致,使用 PascalCase,即驼峰命名法,如 Timeline.tsx 为时间轴组件

页面命名:

变量命名:

常量-全大写+下划线,如:

https://github.com/Buddhas/ele-admin-vue/blob/master/ele-admin-vue/README.md

我认为移动端没必要和 ant design pro 硬绑定到一起,理由如下

(一)移动端

最原始版本的 ant design pro 不仅有权限,有国际化,有 ant design pro 有 pro table 等,还有与 umi ui 的结合,是软绑定观点,

如果说 ant design 是开源的 UI 框架,那么 ant design pro 更以阿里脚手架为核心的聚合产品,

他更适用于做后台,

两者有什么是同通的,权限,

用 umi 开发,已经很大程度上的规避掉原生开发的一些列问题,

约定式路由,

现在的重构版与紫菜的项目的区别在于

重构版用 hook 来写组件,样式用的是 sass,jqb design 用的也是 sass

紫菜用 class 类写组件,样式用 css in js,

像其他的,大多数都是看的懂的

随着版本的升级,pro 现在已经有 5 了,紫菜用的是 4,那是否为了新而追求新。共赢和咨询用的是 umi2,现在重构版的用的是 umi3,是否也要统一呢?

就像我现在去写惠选宝业务一样,让我写,一天就上手了,写的无非是业务逻辑和组件拼接,这些在原有页面已经有,找起来很方便。

而命名是个大问题,正如我下面所说,我们需要的是代码规范,而非项目统一,项目是没发统一的,

umi 的特点是强约束、配置化和约定化

强约束

React 框架 + TypeScript + Eslint + Prettier + 固定配置 + dva

你写的代码的格式,类型,写法都被限制

如果提高代码质量,

搭建 gitlab,上传至仓库,发布前需将代码给前端同事 review,既能提高自己的 review 代码的能力,也能找到一些明显的 bug