定义变量使用let ,定义常量使用const
使用export ,import 模块化
提供默认值
使用 type 属性校验类型
使用 props 之前先检查该 prop 是否存在
必须使用camel命名法
必须使用camel命名法
必须使用camel命名法
必须使用camel命名法
必须以下划线_开头
必须使用全部大写的下划线命名法,如IS_DEBUG_ENABLED
必须使用pascal命名法
必须使用pascal命名法
必须使用全部大写的下划线命名法
必须使用camel命名法
命名同时还需要关注语义,如:变量名应当使用名词
应当使用is、has等起头,表示其类型
应当用动宾短语
应当用名词
components
props
data
created
mounted
activited
update
beforeRouteUpdate
metods
filter
computed
Watch
动宾短语(good:jumpPage、openOrderInfoDialog)(bad:go、nextPage、show、open、login)
ajax方法以get、post 开头,以 data 结尾(good:getListData、postFormData)(bad:takeData、confirmData、getList、postForm)
事件方法(type-change、username-input)例如this.$on(‘item-click’,this.handleItemClick)
init、refresh 单词除外尽量使用常用单词开头(set、get、open、close、jump)
驼峰命名(good: getListData)(bad: get_list_data、getlistData)
使用data里的变量时请先在data里面初始化
props要制定类型
props改变父组件数据,基础数据类型用$emit
ajax请求数据用isLoading,isError变量
不命名多余数据,例如详情页的ajax数据,定义一个对象,不要每个字段都声明。
表单数据包裹一层form
不在mounted、created之类的方法写逻辑,取ajax数据。
在created里面监听Bus事件。
ajax要放在父组件里不要写在子组件里。
定义两种请求类型:GET(查询),POST(增,删,改)
路径命名规范:全部小写,禁止大写和下划线
错误示范:
http:/127.0.0.1/api/v1/content/wordList?id=1
http:/127.0.0.1/api/v1/content/word_list?id=1
显式的标志出是什么请求
显式标识动词:
新增:add
更新:update
删除:delete
查询:get
http://127.0.0.1/api/v1/content/getwordlist?wordId=1
http://127.0.0.1/api/v1/content/addword
http://127.0.0.1/api/v1/content/updateword
http://127.0.0.1/api/v1/content/deleteword
如果是批量修改:
http://127.0.0.1/api/v1/content/updatewords
禁止使用无意义的单词
例如:index,event,home
http://127.0.0.1/api/v1/content/index
http://127.0.0.1/api/v1/content/xxxxx
版本化
在api路由上增加版本号V* ,便于产品迭代或更换接口。
统一响应数据结构
服务端 Rest API 接口提供数据服务;
服务端提供规范的数据响应接口,方便前端解析;
前端与服务端约定响应数据结构如下:
数据结构编码如下:
● 分页类型结构数据结果规范
分页格式数据结构与统一响应数据结构规范一致,但在data类型数据结构中增加了分页相关的属性,详细的分页数据结构如下表。
接口请求分页相关参数规范
后端错误提示包括“后端主动检查”和“后端异常错误两种”,针对两种不通的提示,在显示方式和效果上存在差异。
主要指后端程序主动对数据进行合法性校验时,校验不通过时提示的异常信息,该异常信息由业务端判断给出具体错误提示,该类提示常用场景如:字段长度、字段类型、字段格式、唯一性等的合法性校验(具体显示样式以蓝狐最新版为准)。
● 情况一:一般性校验,前端就能完成,不需要请求后端数据的校验,比如数据长度、类型、格式等,校验规则及过程:
该类校验在前端提交前触发,前端一次性将所有内容校验完毕,对不符合项进行提示;
前端校验通过后提交后端进行校验,校验规则基本和前端保持一致;
后端校验时,如果遇到校验不通过时,直接返回前端结果,前端进行提示;
● 情况二:后端实时校验,需要后端数据验证并立即返回校验结果,比如用户名、单位名称等唯一性校验,校验规则及过程:
输入框失去焦点后,前端先对数据格式、类型等做基本规则校验;
前端校验通过后提交后端进行校验,后端对数据规则及查询结果进行匹配分析;
后端校验不通过时,直接返回前端结果,前端进行提示;
主要指后端程序执行时,因不可预知的问题出现异常时,由系统抛出的错误信息,该异常信息由统一异常处理程序拦截预处理,并将错误码及异常信息向上抛出,前端接收到此类错误信息时,必须按统一提示风格和样式显示错误提示,提示内容需包含错误码(具体显示样式以蓝狐最新版为准)。
用来存放各功能所调用的接口,命名尽量与业务功能统一,方便识别。
用来存放项目中的公共配置项
● ccui.js用来存放所有引入ccui组件库的配置,可根据工程所需组件自行引入相应组件。
● globalComponents.js用来存放需要全局挂载到vue对象或者window对象上的公用方法。
● table-list.js用来定义项目中在Local Storage中缓存表格数据的表名。
● zh-ch.js用来定义项目中提示语配置文件。
用来存放项目中的公用组件,search-component.js是高级搜索自定义组件专用。
用来存放公共过滤器
modules/common.js用来存放公共过滤器,不可更改,用来ccui小组统一维护,如果有项目中需要的特殊过滤器,需在modules文件夹重新建立文件,并在index.js导出过滤器。
用来存放多页签功能中提取出的公共方法。
用来存放项目中静态路由
modules/common.js用来存放如:404,305等公共路由,如其他项目中还需要别的路由分组请自行在modules中建立文件
用来存放所有页面文件
用来存放架构级的页面,各工程一般不需要自行更改。
用来存放各工程业务级的页面。
● 表单控件都要加title用来显示过长的placeholder内容
● 时间控件,默认允许输入。
● 身份证号,限定18位,超过不能输入
● 手机号,限定11位,超过不能输入
● 邮政编码,限定6位,超过不能输入
● 商家(公司)名称长度80个字符,店铺名称最长是30个字符
● 如有表单验证报错,页面要滚动到第一条报错的控件位置
● 提示要统一按demo工程实现。
● 对数据进行操作后(保存、删除等),弹窗确定后,操作完成前,不应允许对其他按钮进行操作,
● 进行所有导致数据变化的操作后,应有统一样式的提示信息,应该用CCUI的message组件的ccui自定义组件,成功绿底,报错红底,页面居中,成功持续3s。报错要手动关闭 如:新增修改保存、删除、冻结禁用停用等都需要提示,提示文字根据产品和ui规定显示。
● loading分为两种,要在页面渲染之后再消失:
页面加载列表loading,白色背景无文字,用于页面初始加载列表,详情时,或者列表搜索时的loading;
引起数据变化的loading,黑色小框背景有文字,如(保存、提交、审批、删除等),其中的文字是可以根据操作不同自由发挥的,格式为"XX中,请稍候…"
● 发出ajax时要把让按钮失效,ajax返回结果后再激活。
● 带tab的页面中点击tab按钮时,如果tab按钮相当于高级搜索的进一步搜索的,高级搜索的内容不要清空。反之要清空高级搜索内容。
● 都页面滚动
● 底部翻页组件跟着表格下面,只要有1条数据就要有分页组件,无数据时不显示分页组件
● 表格控件的高度,由用户选择的每页多少条记录来决定
● 身份证,手机号,邮编和其他固定长度的字段应设置固定长度,开发页面时要做到所有字段长度都心中有数,遇到不清楚长度的字段可以问后端写接口的同学或先关产品人员。
● 表格同时还要至少要保留一列不设宽度。不设宽度的列应选择内容较多而不确定长度的列,不设宽度的列应至少有一个不许隐藏,序号和操作列应设置宽度。
● 各字段宽度整理【无特殊需要按下面默认】
● 要保留搜索控件和高级搜索输入的内容
● 返回列表页后之前点击过的行应该高亮显示
● 返回时列表页要有缓存
● 如果在详情页进行了删除操作,如果删掉的是最后一页的唯一一条,返回时要跳转上一页
● 返回时要刷新列表页
● 如果在编辑页进行了删除操作,如果删掉的是最后一页的唯一一条,返回时要跳转上一页
● 分页组件样式不要自己私自修改,如有需求由CCUI统一修改
● 所有的表格页面都要把用户选择的分页条数缓存
● 被截断的字符串上鼠标悬停后显示要统一用浏览器原生title
● 一般情况下文字居左,金额类及数量类居右。
● 列表页进新增,编辑,详情页,新增,编辑,详情页不需要缓存。
● 列表页进新增页,新增页点返回到列表页需要缓存,点保存到列表页不需要缓存。
● 列表页进编辑页,编辑页点返回到列表页需要缓存,点保存到列表页不需要缓存。
● 列表页进详情页,详情页点返回到列表页需要缓存。
● 缓存修改方式请参照样板工程doc文件夹里《列表缓存.docx》文档
● 分页显示条数与当前页数刷新页面需保存当前状态,修改方式请参照样板工程doc文件夹里《分页显示条数与当前页数缓存.docx》
代码注释在一个项目的后期维护中显的尤为重要,所以我们要为每一个被复用的组件编写组件使用说明,为组件中每一个方法编写方法说明,以下情况务必添加注释:
● 公共组件使用说明;
● 各组件中重要函数或者类说明;
● 复杂的业务逻辑处理说明;
● 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述;
● 注释块必须以/(至少两个星号)开头/;
● 单行注释使用//。
普通方法一般使用单行注释 // 来说明该方法主要作用
● 模板库中仅能通过修改css来修改组件的布局,组件的样式不合适要在CCUI组件库中修改。
● 页面样式通过scope私有化(模块化),不要对全局造成污染。
● 模板库中的组件的颜色、字体、大小等基础属性都要通过CCUI库来定义,不能在scope中修改。
● 命名要跟功能相关,不要跟业务相关。
.purchase-box{} - /* 不推荐: 命名和具体业务相关 /
.breadcrumb-box{} - / 推荐: 表达功能 /
.contract-detail-info{} - / 不推荐: 命名和具体业务相关 /
.detail-info{} - / 推荐: 表达功能 */
● 规则命名中,一律采用小写加中划线的方式,不允许使用大写字母或 ;
● 以小写字母开头,不能以数字和“-”、“”开头;
● 命名避免使用中文拼音,应该采用更简明有语义的英文单词进行组合;
● 不允许通过1、2、3等序号进行命名;
● 避免class与id重名;
● 不要在id上设置样式,要设置在class上。
使用有意义的或通用的ID和class命名:ID和class的命名应反映该元素的功能或使用通用名称,而不要用抽象的晦涩的命名。
反映元素的使用目的是首选;
使用通用名称代表该元素不要表示特定意义;
使用功能性或通用的名称可以更适用于文档或模版变化的情况。
ID和class命名越简短越好,只要足够表达涵义。这样既有助于理解,提高代码效率
#yee-1901 {} - /* 不推荐: 无意义 /
.button-green {}.clear {} - / 不推荐: 与样式相关 /
#gallery {}#login {}.video {} - / 推荐: 特殊性 /
.aux {}.alt {} - / 推荐: 通用性 */
● 页头:header
● 页面主体:main
● 页尾:footer
● 内容:content
● 导航:nav
● 侧栏:sidebar
● 栏目:column
● 页面外围控制:wrapper
● 左右中:left right center
● 导航:nav
● 主导航:main-nav
● 子导航:sub-nav
● 顶导航:top-nav
● 边导航:sidebar
● 左导航:left-sidebar
● 右导航:right-sidebar
● 菜单:menu
● 子菜单:sub-menu
● 标题:title
● 摘要:summary
● 标志:logo
● 广告:banner
● 登录:login
● 登录条:login-bar
● 注册:register
● 搜索:search
● 标题:title
● 报表:report
● 详情:detail
● 表单:form
文章摘至:https://www.yuque.com/zhumoshimowangzhu/uhm5mo/ok1zu7?