起因公司比较小，人员较少，开发的规范不统一，在本人接手项目后发现该项目极难维护与领导沟通订下此开发规范，供大家参考
开发规范
接⼝规范
全部采⽤模块化⽅式声明接⼝，⽂件命名按照模块区分，⽂件命名⽅式参照JS命名规则
例：
api/
| - common.js
| - index.js
| - dashboard.js
vue 的项⽬中，⽬录存放于 src/api 如果没有 api ⽂件夹⾃⾏创建
接⼝书写规范,注释参照JS函数注释
/**
* @description: 接口描述
* @param {*} 参数描述
* @return {*}
*/
export const demo = params => {
return getAxios(
{
url: "/demo",
params
}
);
};
禁止在组件中平铺接口调用地址，接口必须统一管理(为了方便后期维护)
// 在组件中
axios({
url:'/demo',
method:'get'
})
如需按照模块导出请复制以下代码并在api目录下创建index.js
const ctx = require.context('', true, /\.js$/)
const api = {};
for (const key of ctx.keys()) {
if (key !== './index.js') {
let attr = key.replace(/\.\//g,'');
attr = attr.replace(/(\.js)/g,'');
api[attr] = ctx(key)
}
}
export default api;
命名规范
项目命名
全部采用小写方式， 以下划线分隔。
例：my_project_name
目录命名
参照项目命名规则；
有复数结构时，要采用复数命名法。
例：scripts，styles，images，data_models
vue 的项目中，components 下的组件目录名，使用大驼峰命令
例：LeftBar
JS 文件命名
参照项目命名规则。
例：account_model.js
CSS, SCSS 文件命名
参照项目命名规则。
例：retina_sprites.css
CSS 规范
命名
-
类名使用小写字母，以中划线分隔
-
id 采用驼峰式命名
-
scss 中的变量、函数、混合、placeholder 采用驼峰式命名
/* class */
.element-content {
...;
}
/* id */
#myDialog {
...;
}
/* 变量 */
$colorBlack: #000;
/* 混合 */
@mixin centerBlock {
...;
}
JavaScript 规范
变量命名
-
标准变量采用驼峰式命名
-
'Android'在变量名中大写第一个字母
-
'iOS'在变量名中小写第一个，大写后两个字母
-
常量全大写，用下划线连接
-
构造函数，大写第一个字母
-
jquery 对象必须以'$'开头命名
var thisIsMyName;
var AndroidVersion;
var iOSVersion;
var MAX_COUNT = 10;
function Person(name) {
this.name = name;
}
// not good
var body = $("body");
// good
var $body = $("body");
注释
单行注释
-
注释单独一行的情况下，注释的//后面要跟一个空格
-
注释如果和代码同一行，代码分号结束后，要跟一个空格，注释的//后也要跟一个空格
例：
// 调用函数
foo();
var maxCount = 10; // 这是一个变量
多行注释
多行注释使用下面这种形式：
/**
* 代码注释1
* 代码注释2
*/
多行注释建议在以下几种情况使用：
-
难于理解的代码段
-
可能存在错误的代码段
-
浏览器特殊的 HACK 代码
-
业务逻辑强相关的代码
函数注释
复杂的函数，所有类，都必须进行函数注释，函数注释使用业界统一的规范，方便后续使用 jsdoc 生成文档。
例：
/**
* 获取任务的名称
* @param id {Number} 传入需要获取名称的人物id
* @return {String} 返回的姓名
* @author shi 2015/07/21 可以不写
* @version 1.1.0 可以不写
* @example 示例代码，可以不写
*/
function getTaskName(id) {
let name = "test";
return name;
}
