前端开发规范

基本命名准则

  1. 贴合业务
  2. 简介、语义化、能够英文释义
  3. 项目保持一种命名方法,命名方式可以有多种

常用命名方法

  1. PascalCase 命名法:所有单词的首字母都大写 如 HelloWorld
  2. camelCase 命名法:驼峰命名 如 helloWorld
  3. 下划线 命名法:如 hello_world
  4. kebab-case 命名法:如 hello-world

Vue项目命名

  1. 项目名 推荐使用 短横线命名
  2. 自定义指令 推荐单个单词,如果需要多个单词 推荐驼峰命名
  3. 组件命名 推荐 PascalCase 命名 注意要和项目保持一致
    1. 公共组件应该以 The 前缀命名,以示其唯一性。
components/
|- TheHeading.vue
|- TheSidebar.vue
    1. 私有组件名应该以父组件名作为前缀
components/
|- TodoList.vue
|- TodoListItem.vue
    1. 模版中组件名
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/><!-- 在 DOM 模板中 -->
<my-component></my-component>
    1. 组件名应该完整,不应该简写
    2. 注意 组件名应该多个单词
  1. Props命名
    1. 定义Props 推荐camelCase
props: {greetingText: String
}
    1. 使用Props 推荐 kebab-case
<WelcomeMessage greeting-text="hi"/>
  1. Store
    1. module 推荐使用 camelCase
    2. mutation 推荐使用 PascalCase
    3. state 推荐使用 camelCase
    4. getters 推荐使用 camelCase
  1. 常量 推荐全部使用大写+下划线
const MAX_COUNT = 100
  1. 特殊变量
    1. iOS 第一个字母小写其他两个大写
    2. Android 第一个大写其余小写
  1. Boolean变量
isShow:是否显示
isVisible:是否可见
isLoading:是否处于加载中
isConnecting:是否处于连接中
isValidating:正在验证中
isRunning:正在运行中
  1. 函数命名
    1. 推荐使用 camelCase命名
    2. 原生事件 "on" 开头
    3. 自定义事件 "handle" 开头
onSubmit // 提交表单
handleClick
  1. 上下文this引用只能使用 _this、that
  2. HTML
    1. alt标签不为空
  1. CSS
    1. 尽量使用缩写属性
    2. 值 "0" 不需要添加单位
  1. 路由命名
    1. path:路径使用 kebab-case
    2. name:使用 PascalCase 注意不要重复
{path: '/news-detail',name: 'NewsDetail ,component: ()=>import('@/pages/news-detail/'), meta: { title: '详情' }
}

注释

  1. 单行注释必须独占一行 // 后跟一个空格
  2. 文档化注释 /** */ 参考 JSDoc

函数

  1. 优先使用箭头函数
  2. 函数默认值写在其他参数后面
  3. 函数参数最多三个,三个以上可以采用对象形式
  4. 函数私有属性可以 使用 $_ 前缀
    const demo = ()=>{$_name = '我是私有变量';
    }
  5. 如果是公用函数 需要添加 jsdoc 注释,包含参数、返回值等信息。

Git提交规范

  1. 代码少量多次提交
    1. 可以多个 commit 一起 push
    2. 禁止多代码一起提交
  1. 参考 vue 规范
    1. feat 增加新功能
    2. fix 修复问题/BUG
    3. style 代码风格相关
    4. perf 优化/性能提升
    5. refactor 重构
    6. revert 撤销修改
    7. test 测试相关
    8. docs 注释
    9. chore 依赖更新/脚手架配置修改
    10. ci 持续集成

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/16096.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1004. 最大连续1的个数 III

题目描述&#xff1a; 主要思路&#xff1a; 刚看到这个问题首先想到的是二分答案&#xff0c;二分长度&#xff0c;然后利用滑动窗口判断是否可以达成。 class Solution { public:bool find(int x,vector<int> nums, int k){int now0;for(int i0,j0;i<nums.size();…

根据端口号查找服务位置

已知服务的IP和端口&#xff0c;查找该服务所在位置 1、打开命令提示符&#xff08;CMD&#xff09; WINR快捷键打开运行对话框&#xff0c;输入CMD&#xff0c;打开命令行。 2、找到对应的PID或程序名称 输入netstat -ano|findstr 端口号&#xff0c;找到对应的PID&#…

解决:h5的<video>在移动端浏览器无法自动播放

并不是所有的移动端浏览器都无法自动播放&#xff0c;下载谷歌、火狐、edge等都可以正常播放&#xff0c;目前发现夸克浏览器无法自动播放。即autoplay属性失效。 <video autoplay"autoplay"></video> 可能移动端有移动端的策略&#xff0c;但解决夸克…

企业数字化转型失败率达80%,面临哪些挑战?应该如何规划?

随着数字化在社会的飞速发展&#xff0c;人们的生活工作娱乐等方方面面都已经被数字化占领&#xff0c;数字化所衍生出的数字经济更是成为高速增长的国民经济支柱&#xff0c;而数据作为“副产品”也成功进化为第五大生产要素&#xff0c;发挥出巨大的价值&#xff0c;变成了个…

白盒测试和黑盒测试的区别是什么?

前言 曾言道“黑猫&#xff0c;白猫&#xff0c;只要能抓住老鼠就是好猫”。我们的测试亦是如此&#xff0c;不管是黑盒测试还是白盒测试&#xff0c;只要能测试出来bug&#xff0c;可以找出问题所在&#xff0c;保障软件质量就是好的测试方法。 对于刚入门的软件测试小白来说…

Vue2封装自定义全局Loading组件

前言 在开发的过程中&#xff0c;点击提交按钮&#xff0c;或者是一些其它场景总会遇到Loading加载框&#xff0c;PC的一些UI库也没有这样的加载框&#xff0c;无法满足业务需求&#xff0c;因此可以自己自定义一个&#xff0c;实现过程如下。 效果图 如何封装&#xff1f; 第…

算法刷题Day 50 买卖股票的最佳时机III+买卖股票的最佳时机IV

Day 50 动态规划 123. 买卖股票的最佳时机III 前两道题的结合&#xff0c;需要更多位置来记录状态 class Solution { public:int maxProfit(vector<int>& prices) {vector<vector<int>> dp(prices.size(), vector<int>(5, 0));dp[0][1] -price…

cicd实验

系列文章目录 文章目录 系列文章目录一、1.2. 二、安装并使用1.安装gitlab2.//Jenkins安装3. 总结 一、 1. 2. 二、安装并使用 需要三台服务器一台安装gitlab 192.168.169.10 第二台负责 安装jenkins 192.168.169.20 第三台是负责业务 192.168.169.30 1.安装gitlab yum in…

SpringBoot使用PropertiesLauncher加载外部jar包

启用SpringBoot的PropertiesLauncher 使用SpringBoot的PropertiesLauncher可以优先加载外部的jar文件, 这样可以在程序运行前替换jar包, 官方文档: Launching Executable Jars 使用演示 建立一个SpringBoot工程, 工程中依赖一个叫自定义的utils包, 版本是1.0.0, 通过http接口…

dolphinscheduler switch+传参无坑版

dolphinscheduler 的前后传参有较多的坑&#xff0c;即便是3.0.5版本仍然有一些bug 下面是目前能无坑在3.0.5版本上使用的操作 前置任务 在界面上设置变量和参数名称 跟官方网站不一样&#xff0c;注意最后一行一定使用echo ${setValue(key$query)}的方式&#xff0c;注意引…

Flowable-服务-Http任务

目录 定义图形标记XML内容界面操作 定义 Http 任务不是 BPMN 2.0 规范定义的官方任务&#xff0c;在 Flowable 中&#xff0c;Http 任务是作为一种特殊的服务 任务来实现的&#xff0c;主要调用Http服务使用。 图形标记 由于 Http 任务不是 BPMN 2.0 规范的“官方”任务&…

C# 快速写入日志 不卡线程 生产者 消费者模式

有这样一种场景需求&#xff0c;就是某个方法&#xff0c;对耗时要求很高&#xff0c;但是又要记录日志到数据库便于分析&#xff0c;由于访问数据库基本都要几十毫秒&#xff0c;可在方法里写入BlockingCollection&#xff0c;由另外的线程写入数据库。 可以看到&#xff0c;在…

使用fegin调用时,返回的值不能直接List这种,要使用对象包装一下

正确使用如下 fegin ResponseBodyGetMapping(value "/menu/queryAllNonLowCodePageSubmenuById")public Result<List<LinkTheFormPageDataDTO>> queryAllNonLowCodePageSubmenuById(RequestParam("id")int id);服务 ResponseBodyGetMapping(…

分布式系统中接口的幂等性如何设计

在分布式系统接口的调用中&#xff0c;可能会因为网络波动、操作重试等原因而导致请求的重复发送&#xff0c;如果这个接口只是一个提供查询功能的接口&#xff0c;那么问题不会太大&#xff0c;顶多就是增加了服务器的压力&#xff1b;但如果这个接口是一个更改数据状态的接口…

C++类与对象 - 4(初始化列表,Static成员,友元,内部类,匿名对象)

类与对象 - 4 1. 再谈构造函数1.1 构造函数体赋值1.2 初始化列表&#xff08;重点&#xff09;1.3 explicit关键字 2. Static成员2.1 概念2.2 特性 3. 友元3.1 友元函数3.2 友元类 4. 内部类5.匿名对象 1. 再谈构造函数 1.1 构造函数体赋值 在创建对象时&#xff0c;编译器通过…

STM32单片机蓝牙APP语音识别智能记忆汽车按摩座椅加热通风儿童座椅

实践制作DIY- GC00160---智能记忆汽车按摩座椅 一、功能说明&#xff1a; 基于STM32单片机设计---智能记忆汽车按摩座椅 二、功能说明&#xff1a; 电路组成&#xff1a;STM32F103CXT6最小系统LD3322语音识别模块OLED显示3个ULN2003步进电机&#xff08;分别对应 前后距离、座…

二阶阻尼弹簧系统的simulink仿真(s函数)

文章目录 前言一.非线性反步法1.原系统对应的s函数脚本文件&#xff08;仅修改模板的初始化函数、导数函数和输出函数三个部分&#xff09;2.控制器对应的s函数脚本文件&#xff08;仅修改模板的初始化函数和输出函数两个部分&#xff09;3.其他参数脚本文件4.输入5.输出&#…

二 动手学深度学习v2笔记 —— 线性回归 + 基础优化算法

二 动手学深度学习v2 —— 线性回归 基础优化算法 目录: 线性回归基础优化方法 1. 线性回归 总结 线性回归是对n维输入的加权&#xff0c;外加偏差使用平方损失来衡量预测值和真实值的差异线性回归有显示解线性回归可以看作是单层神经网络 2. 基础优化方法 梯度下降 小批量…

3.yum安装分布式LNMP--剧本

文章目录 修改hosts创建剧本文件 修改hosts vim /etc/ansible/hosts[webservers] 192.168.242.67[dbservers] 192.168.242.68[phpservers] 192.168.242.69创建剧本文件 vim lnmp.yaml- name: nginx playhosts: webserversremote_user: rootvars:- http_port: 192.168.242.67:…

ubuntu 使用 rsync 的 SSH 方式同步备份远程WEB服务器

ubuntu 20.04 自带 rsync &#xff0c;对于 WEB 服务器这种更新频率不高的情况&#xff0c;直接使用定时同步复制远程服务器的方法&#xff0c;比较直接和简单&#xff01; $ rsync --version rsync version 3.1.3 protocol version 31 参考&#xff1a; Ubuntu20.04中的rsyn…