vue开发规范

最新推荐文章于 2025-07-09 12:04:59 发布

原创最新推荐文章于 2025-07-09 12:04:59 发布 · 771 阅读

CC 4.0 BY-SA版权

文章标签：

H5规范
编号	事项	说明	备注	代码案例
1	代码规范	统一IDE使用EditorConfig插件控制缩进，保证代码的可读性
		统一使用markdown编写文档
		SVN提交需写明备注，列明当前代码修改项
		添加注释： 1.文件头部 2.含内注释 / / * @Title 模块名 * @Title 模块名 * @Auther 作者名 * @Params 参数组 * @Params 参数组 * @Des 描述 * @Des 描述 */ @Time 创建时间(如：2018/03/12) **/
		ES5/ES6使用规范	如const/let、箭头函数、变量解构
		命名规范：1.组件：xxxComponent 2.服务：xxxService 3.视图：xxx (按视图) 4.脚本：xxx(按功能) 5.组件对外暴露方法：xxx(按功能)	驼峰命名
		impot采用alias路径引入: 错误：import { PaintBoard } from './Canvas'; 正确：import { PaintBoard } from '@/service/CanvasService/Canvas';
2	文件/目录/配置规范	按功能/组件/视图分层，如组件、配置文件
		目录必须带README.md文件，此文件内可提供业务描述、案例DEMO演示或其它
		env环境配置表（/config/env.js）例：通过env暴露不同变量的值,如唱片店{{env.recordUrl}} 用：{{env.xxx}} 或 this.env.xxx （全局变量）
		API配置表（/config/api.js）例：GET_SONG_LIST: 'GET_SONG_LIST', //获取歌曲列表用：{{api.GET_SONG_LIST}} 或 this.api.GET_SONG_LIST（全局变量）
		语言包规范（参考案例:components/common/dialog/pay/index.vue）： 1.引入模块语言包：import langObj from "@/lang/components/pay"; 2.引入语言类型（computed）：...mapGetters([ 'lang']) 3.统一定义langObj语言变量（computed）： langObj(){ return langObj[this.lang] \|\| langObj["zh_CN"] } 4.视图使用：{{langObj.btnExchange}}
		默认样式库规范：默认样式总库：assets/style/system/index.scss 动画库：assets/style/system/common/animate.scss 工具库：assets/style/system/common/utils.scss（单个）工具总库：assets/style/system/common.scss（对外暴露，如视图引入）皮肤总库：assets/style/skins/index.scss
3	调试规范	阻塞调试	谷歌开发工具Perfomance
		IPC调试	谷歌开发工具Devtron
		内存调试	谷歌开发工具Memory
		渲染调试	谷歌开发工具Render
		调试控制台	谷歌开发工具console
		测试机器：
		音视频播放调试：
4	数据/资源规范	图片资源压缩裁剪
		所有点击请求，减少反复点击多次请求，降低服务器压力，如上报/领券
		SVG加载规范：待补充
		数据预加载，预渲染
		数据按需查询其数据，避免加载全部数据，如使用链表匹配
		图片/变量缓存机制，尽量避免重新生成或重绘
		网播资源使用nass盘(待实践)
		内存/资源回收，避免长期占用未释放: (1) 申明的对象/数组/实例 (2) vue data内定义的变量类型，如数组/对象/字符串回收方式：obj.clear() 或obj = null	旧版：在组件销毁时（destroyed方法）时回收新版：由于新架构采用整个视图存放内存的方式，同时使用vue的keep-live的状态监测，视图组件分activate（活跃）和deactivate（非活跃），内存通过deactivate钩子函数进行回收，仅销毁视图即可回收所有当前视图的内存，非组件内销毁
		Ipc使用规范,详见service/ipcService.js
5	事件规范	针对按钮，增加防抖策略，限制点击频率
		点击事件，@touchstart.stop.prevent.capture、@touchend.stop.prevent.capture	全局事件捕获
		点击事件，非滚动区域去掉非必要的默认事件，如event.preventDefault();event.stopPropagation() ，滚动区域使用passive	增加多余的事件（阻塞）损耗
		避免渲染频率比较高情况，减少使用计算损耗较大的方法,如：JSON.parse()、dom相关操作
		实例创建，应避免多次创建,同时实例应该不使用时回收，否则引起业务BUG以及内存占用
		vuex避免全局获取或更新值，如$store.state.xxx，尽量使用mapGetters、mapActions匹配获取	引起计算消耗
6	视图渲染/动画规范	避免动画使用背景，动画过渡，尤其是绘画面积大的情况
		避免在DOM层级过深的元素使用v-show,引起大面积重绘与回流
		避免过多使用SVG	引起渲染消耗
		避免过多使用box-shadow、transform、position(left/top/right/bottom)等样式，尤其渲染频率比较高的绘图情况	引起渲染消耗,阻塞
		避免重绘/重排，非当前数据更新,禁止再次重绘重排，特殊情况待定，实例如下：
		避免过多使用overflow，因其为块级格式上下文，会强制（重新）包围内容元素，触发BFC且此层重绘，导致其节点下重绘/回流，尤其渲染频繁比较多的块
		渲染面积与层重叠过多情况，可以考虑使用canvas合并成一个层渲染
		对渲染面积比较大的，如非需要，可暂时隐藏，避免视图上渲染
		针对点击切路由重绘视图情况，快速点击时，视图不需要重绘，如导航栏
		是否开启多线程(待定)
		webgl使用：html动画、游戏效果使用webgl渲染
7	UI/体验规范	遵循UI设计
		点触范围扩大	用户体验
		导航类/分类增加防抖机制，快速点击避免再做其它操作，如请求，渲染等	引起阻塞
		按钮类防止点透处理，如系统设置页，快速点击保存设置，进去语音页，而非主页
8	人员规范









9	文档规范


10	配置信息


11
11