前端 代码规范

阿里设计规范

!!! 项目中除注释之外 不要出现汉字情况！！！

代码格式化问题

vscode安装 Prettier插件 将其设为默认格式化

这个工具能够使输出代码保持风格一致。

注释与命名

样式命名
  1. class、id都需小写
  2. 命名使用英文，禁止使用特殊字符
  3. 名称间隔使用 - 符号
  4. 类名命名需要语义化，参考下面的示例：
.wrap{}                 //外层容器.mod-box{}              //模块容器.btn-start{}            //开始.btn-download-ios{}     //ios下载.btn-download-andriod{} //安卓下载.btn-head-nav1{}        //头部导航链接1.btn-news-more{}        //更多新闻.btn-play{}             //播放视频.btn-ico{}              //按钮ico.btn-lottery{}          //开始抽奖.side-nav{}             //侧栏导航.side-nav-btn1{}        //侧栏导航-链接1 .btn-more{}             //更多

图片命名

  1. 图片名称必须小写，禁止使用特殊字符、中文
  2. 使用英文或拼音缩写，禁止特殊字符
  3. 名称间隔使用 - 符号
  4. 命名需要能体现图片的大概用途

常用示例：

 bg.jpg          //背景图片mod-bg.jpg      //模块背景sprites.png     //精灵图btn-start.png   //开始按钮ico-play.png    //修饰性图片

禁止文件名和实际图片内容不符。反面例子：图片名为’weixin-qrcode’，图片内容却是头像。

文件命名

所有文件名统一使用小写，首页命名为index.html html内页，有明显分类的，参考使用以下示例命名，无明确意义的，可用page01.html、page02.html，禁止使用特殊字符，统一使用小写字母
常用命名：

专题名称	        	描述
index.html	  		引导页&首页
main.html	  		首页
news.html			资讯页
newsdetail.html		资讯详情页
raiders.html		攻略页
raidersdetail.html	攻略页详情页
download.html		下载页面
actlist.html		活动列表页面
video.html			视频
cdkey.html	CDKEY	兑换页
wallpaper.html		壁纸页面

按照小驼峰命令，英文单词过长或超出2个以上，可缩略至前四位，如

// 业务统计
approvalStatistical// 缩略
approvalStat

有复数含义，采用复数命名，如

pages, componets, filters, mixins ，images

组件进行目录划分，目录命名为小驼峰，公用组件加上gd前缀，如

|components
|-- gdCustomCheck
|   |-- index.vue
|-- gdCustomTable
|   |-- index.vue
目录命名

按照小驼峰命名，首字母小写

  • 项目文件夹：projectName
  • 样式文件夹：css / scss
  • 脚本文件夹：js

css规范

颜色

除特殊情况 如echarts图或特殊要求，请勿直接在本页面写入color、background-color 等颜色相关的样式

字体

如需对字体大小进行调整 可以采用如下方式

--size  为 14px
font-size: calc(var(--size) - 2px); 表示在14的基础上 -2px
font-size: calc(var(--size) + 2px); 表示在14的基础上 +2px
font-size: var(--size)       		表示 字体大小为 14px
选择器

非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外；
非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外；
非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外；

！！！避免！！！
  1. 避免使用标签选择器。因为在 Vue 中，特别是在局部组件，使用标签选择器效率特别低，损耗性能，建议需要的情况，直接定义 class；
  2. 非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外；
  3. 避免使用important选择器；
  4. 避免大量的嵌套规则，控制在3级之内，对于超过4级的嵌套，考虑重写或新建子项；
  5. 避免使用ID选择器及全局标签选择器防止污染全局样式；
推荐使用
  1. 提取公用样式进assets文件styles里，按模块/功能区分；
|assets
|-- styles
|   |-- common          放置公用样式，如重置，混合，复写element样式等
|   |-- modules         放置模块样式
``**加粗样式**`
2. 推荐使用直接子选择器；```css
/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}/* 不推荐 */
*{}
#jdc {}
.jdc div{}

!!! 使用 scoped 关键字，约束样式生效的范围 !!!

<style lang="scss" scoped>
.app-wrapper {...
}
</style>
使用变量

可复用属性尽量抽离为页面变量，易于统一维护

// CSS
.class-name {color: red;border-color: red;
}

// SCSS
$color: red;
.class-name {color: $color;border-color: $color;
}
使用混合（mixin）

根据功能定义模块，然后在需要使用的地方通过 @include 调用，避免编码时重复输入代码段

// CSS
.jdc_1 {-webkit-border-radius: 5px;border-radius: 5px;
}
.jdc_2 {-webkit-border-radius: 10px;border-radius: 10px;
}

// SCSS
@mixin radius($radius:5px) { // 当前代码可写入公用样式库mixin文件中-webkit-border-radius: $radius;border-radius: $radius;
}
.jdc_1 {@include radius; //参数使用默认值
}
.jdc_2 {@include radius(10px);
}

注释规范

以/ 注释内容 /格式注释，前后空格，嵌套子类需要一个回车分割开

/* 注释内容 */
.pha-element {width: 20px;/* 这里需要换行 */.pha-element-l {color: blue}
}

函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识，它的作者, 依赖关系和兼容性信息

  1. 单行注释：双斜线后应跟空格，且缩进与上下文的代码保持一致；或在行尾注释，在行尾依然需要左右空格；
// 一些说明...
const userID = 24;
const userID = 12; // 一些说明
  1. 多行注释：一般用于注释难以理解的、可能存在错误的、逻辑强的代码，且缩进一致；
/** 针对下方代码的说明* 第一行太长写第二行*/
const a = 1；

!!! 如果注释掉一些还肯能有用的代码 标注其用处 和什么时候要打开 !!!

  1. 函数注释：写明传入参数名称，类型，推荐完整注释以下格式；
/*** @Description 加入购物车* @Author lint * @Date 2020-09-08 * @param {Number} goodId 商品id* @param {Array<Number>} specs sku规格* @param {Number} amount 数量* @param {String} remarks 备注* @returns <Promise> 购物车信息*/
apiProductAddCard = (goodId, specs, amount, remarks) => {return axios.post('***', { goodId, specs, amount, remarks })
}/*** @Description 根据字典编码获取选项名称* @Author lint* @Date 2020-09-08* @param {String} key 编码* @param {String} val 值* @returns {String} 字典名称*/
getDictText(key, val) {const item = this.dictData[key].find(k => k.dictKey === val)return item ? item.dictValue : ''
}
  1. 文件注释
/*** @Description: 文件名称* @Author:	lint* @Date: 2020-09-08* */

这里可以注释一下 文件的路由地址 和菜单名称 方便查找和修改

JS规范

  1. 在vue-cli 脚手架使用架自带的指向 src 开发目录的 ‘@’ 符号引入文件资源；
  2. 使用计算属性规避 v-if 和 v-for 用在一起；
  3. 统一使用单引号；
  4. 坚持单一原则，函数内仅做该函数应该做的，尽量避免通过传入标记控制不同行为；
  5. 优先考虑三目运算符，但谨记不要写超过3层的三目运算符；
  6. 对于无用代码必须及时删除，例如：一些调试的 console 语句、无用的弃用功能代码，如在开发分支可提交打印代码，但要注意打印格式，如下：
// 推荐
console.log('路由': 文件路由, '打印简述': 打印数据)// 不推荐
console.log(打印数据, '1111')
  1. 条件语句避免负面条件，特指调用某一函数；
// 推荐
function isUserNotBlocked(user) {// ...
}// 不推荐
if (!isUserNotBlocked(user)) {// ...
}

请求数据的方法，使用try catch 错误捕捉，注意执行回调；!!!

/*** 接口请求* @param req 接口api* @param params 参数*/
async httpInterface(req, params) {try {this.loading = trueconst res = await req(params)return Promise.resolve(res)} catch (e) {return Promise.reject(e)} finally {this.loading = false}
}// 使用
this.httpInterface(req, {}).then((resove, reject) => {console.log(resove, reject)
})

finally ！！！！！！！ 很重要

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

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

相关文章

Matlab编程中函数的重命名方法

Matlab编程中函数的重命名方法

Matlab编程中函数的重命名方法 在进行matlab编程时候&#xff0c;有时需要根据自己的习惯&#xff0c;需要对函数重命名。本文简要介绍重命名的方法。 一、重命名的方法 通过和赋值号实现&#xff0c;如下所示&#xff1a; 新函数名原函数名二、具体举例 clc clear all %将…
阅读更多...
亚马逊云科技面向 macOS 的 Amazon 云服务器 EC2 M1 Mac 实例

亚马逊云科技面向 macOS 的 Amazon 云服务器 EC2 M1 Mac 实例

北京 ——2022 年 8 月 10 日&#xff0c;日前&#xff0c;亚马逊云科技宣布基于 Apple 芯片 Mac mini 计算机构建的 Amazon Elastic Compute Cloud (Amazon EC2) M1 Mac 实例正式可用。该实例由亚马逊云科技 Nitro 系统提供支持&#xff0c;与基于 x86 的 Amazon EC2 Mac 实例…
阅读更多...
requests处理 multipart/form-data 请求以及 boundary值问题

requests处理 multipart/form-data 请求以及 boundary值问题

requests处理 multipart/form-data 请求以及 boundary值问题 前言1. 请求需要携带本地资源2. 请求需要携带json3. 总结 前言 关于 Content-type: multipart/form-data可以看一下这篇文章, 分析特别详细 HTTP协议之multipart/form-data请求分析 put和post区别不大, 只是上传资…
阅读更多...
Flutter超好用的路由库-fluro

Flutter超好用的路由库-fluro

文章目录 fluro的介绍fluro简介安装和导入路由配置导航到路由参数传递 fluro的典型使用创建路由管理类代码解释例子小结 初始化路由导航到路由 总结 fluro的介绍 fluro简介 fluro是一个流行的Flutter插件&#xff0c;用于实现高级路由管理。它提供了灵活的路由配置和导航功能…
阅读更多...
笔试面试相关记录（5）

笔试面试相关记录（5）

&#xff08;1&#xff09;给定一个字符串&#xff0c;含有大写、小写字母&#xff0c;空格&#xff0c;数字&#xff0c;需要将其变为满足如下条件&#xff1a; 所有的数字需要换成空格&#xff0c;并且字符串的头尾不包含空格&#xff0c;且整个字符串不包含连续的两个空格。…
阅读更多...
Maven的介绍和使用

Maven的介绍和使用

Maven的作用 项目构建 依赖管理&#xff1a;避免资源间版本冲突问题 统一开发结构&#xff1a;提供统一的项目结构 Maven的使用 下载完压缩包之后放在合适的目录下&#xff0c;其中apache-maven-3.8.8文件夹是安装的maven&#xff0c;下面的repository是本地仓库&#xff…
阅读更多...
月木学途开发 6.网址模块

月木学途开发 6.网址模块

概述 效果图 数据库设计 网站类型表 DROP TABLE IF EXISTS website; CREATE TABLE website (websiteId int(11) NOT NULL AUTO_INCREMENT,websiteImg longtext,websiteName varchar(255) DEFAULT NULL,websiteUrl longtext,websiteDesc varchar(255) DEFAULT NULL,websiteTy…
阅读更多...
Python经典练习题（一）

Python经典练习题（一）

文章目录 &#x1f340;第一题&#x1f340;第二题&#x1f340;第三题&#x1f340;第四题&#x1f340;第五题 &#x1f340;第一题 有四个数字&#xff1a;1、2、3、4&#xff0c;能组成多少个互不相同且无重复数字的三位数&#xff1f;各是多少&#xff1f; 这里我们使用…
阅读更多...
AtCoder ABC260 G 累积和

AtCoder ABC260 G 累积和

题意 传送门 AtCoder ABC260 G Scalene Triangle Area 题解 暴力 前缀和 对每一行计算前缀和&#xff0c;处理每一个询问时暴力枚举每一行进行累加。总时间复杂度 O ( n ( n q ) ) O\Big(n(n q)\Big) O(n(nq))。 #include <bits/stdc.h> using namespace std;vo…
阅读更多...
HTTP 错误 401.3 - Unauthorized 由于 Web 服务器上此资源的访问控制列表(ACL)配置或加密设置，您无权查看此目录或页面。

HTTP 错误 401.3 - Unauthorized 由于 Web 服务器上此资源的访问控制列表(ACL)配置或加密设置，您无权查看此目录或页面。

用IIS 发布网站&#xff0c;不能访问且出现错误&#xff1a;HTTP 错误 401.3 - Unauthorized 由于Web服务器上此资源的访问控制列表(ACL)配置或加密设置。您无权查看此目录或页面 问题截图&#xff1a; 问题描述&#xff1a;HTTP 错误 401.3 - 未经授权&#xff1a;访问由于 A…
阅读更多...
[RF学习记录][参数读取]从yaml文件读取参数变量

[RF学习记录][参数读取]从yaml文件读取参数变量

robotframework支持从yaml文件读取变量&#xff0c;对于比较多的参数&#xff0c;可以在yaml文件中定义好&#xff0c;在robot脚本中引用 1、定义yaml文件 文件内容如下&#xff0c;注意&#xff0c;变量和变量值之间要以4个字符分开 yaml_demo_name: tester traing_gpt_…
阅读更多...
RabbitMQ 消息应答

RabbitMQ 消息应答

每日一句 物是人非事事休，欲语泪先流。 概述 为了保证消息在发送过程中不丢失，RabbitMQ引入了消息应答机制， 消费者在接收到消息并且处理该消息后，告诉RabbitMQ它已经处理了，RabbitMQ可以把消息删除了。 自动应答 消息发送后立即被认为已经传送成功，这种模式需要在…
阅读更多...
java实体类中，对某些属性进行equals和hashCode设定，通过对设定属性来判断对象是否相等

java实体类中，对某些属性进行equals和hashCode设定，通过对设定属性来判断对象是否相等

实体类 package demo12; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; import lombok.experimental.Accessors; import java.util.Objects; Data NoArgsConstructor AllArgsConstructor Accessors(chain true) public class Pre…
阅读更多...
Hashmap

Hashmap

1、无参构造方法 //默认加载因子0.75 DEFAULT_LOAD_FACTORpublic HashMap() {this.loadFactor DEFAULT_LOAD_FACTOR; // all other fields defaulted}2、有参构造 public HashMap(int initialCapacity, float loadFactor) {if (initialCapacity < 0)throw new IllegalArgum…
阅读更多...
Python150题day08

Python150题day08

2.基础语法篇 2.1 if 条件句 ①单个条件分支 使用input函数接收用户的输入&#xff0c;如果用户输入的整数是偶数&#xff0c;则使用print函数输出"你输入的整数是:{value],它是偶数”&#xff0c;[value]部分要替换成用户的输入。 解答: value input("请输⼊⼀…
阅读更多...
Guava Cache介绍-面试用

Guava Cache介绍-面试用

一、Guava Cache简介 1、简介 Guava Cache是本地缓存&#xff0c;数据读写都在一个进程内&#xff0c;相对于分布式缓存redis&#xff0c;不需要网络传输的过程&#xff0c;访问速度很快&#xff0c;同时也受到 JVM 内存的制约&#xff0c;无法在数据量较多的场景下使用。 基…
阅读更多...
C++学习（1）

C++学习（1）

一、C概述&#xff08;了解&#xff09; C在C语言的基础上添加了面向对象编程和泛型编程的支持 二、helloword程序&#xff08;掌握&#xff09; #define _CET_SECURE_NO_WARNINGS//在开发软件visual studio编译 c文件时, visual studio认为strcpy,scanf等函数不安全的导致报…
阅读更多...
苹果开发者账号注册及证书生成方法详解

苹果开发者账号注册及证书生成方法详解

转载&#xff1a;注册苹果开发者账号的方法 在2020年以前&#xff0c;注册苹果开发者账号后&#xff0c;就可以生成证书。 但2020年后&#xff0c;因为注册苹果开发者账号需要使用Apple Developer app注册开发者账号&#xff0c;所以需要缴费才能创建ios证书了。 所以新政策…
阅读更多...
【送面试题】深入理解Netty与NIO：原理与关键组件解析

【送面试题】深入理解Netty与NIO：原理与关键组件解析

AIGC专栏/AI绘画教程/java面试题领取 导言 在现代分布式系统和网络应用开发中&#xff0c;高性能、低延迟的网络通信是至关重要的。Netty作为一个强大的网络框架&#xff0c;广泛应用于构建各种高性能的网络应用。而NIO&#xff08;New I/O&#xff09;则是Java提供的一种非阻…
阅读更多...
什么是葡萄酒结构，结构型葡萄酒好吗？

什么是葡萄酒结构，结构型葡萄酒好吗？

葡萄酒爱好者使用许多复杂的术语来描述葡萄酒的味道&#xff0c;有些是不言自明的&#xff0c;有些则有点模糊。如果你不是葡萄酒专家&#xff0c;你可能很难理解这个葡萄酒术语的全部含义。其中一个术语是葡萄酒结构&#xff0c;那么葡萄酒结构是什么意思呢&#xff1f;而结构…
阅读更多...
最新文章

Copyright @ 2022~2023