编码规范(前端)

文章目录

  • 1. 文档说明
    • 1.1 编制说明
    • 1.2 名词解释
  • 2.前端研发规范
    • 2.1 HTML编码规范
      • 2.1.1 文档类型
      • 2.1.2 语言
      • 2.1.3 元数据
      • 2.1.4 资源加载
      • 2.1.5 页面标题
      • 2.1.6 编码风格
      • 2.1.7 标签
      • 2.1.8 属性
      • 2.1.9 语义化
    • 2.2 CSS编码规范
      • 2.2.1 文件引用
      • 2.2.2 命名-组成元素
  • 知识点

1. 文档说明

1.1 编制说明

软件行业的高速发展,对软件开发者的综合素质要求越来越高,不仅仅是编程知识点,其他维度知识点也会影响最后的交付质量,本文档以开发前端项目角度,详细描写了前端的代码规范,分别从HTML、CSS、JavaScript、TypeScript、四个方面入手,并且每个章节进行了详细划分,方便读者能快速定位,规范自己的代码,提高项目质量。

1.2 名词解释

序号名词释义
1JavaScript(通常编写为JS)是一种高级的,解释型的编程语言。支持面向对象设计,函数式编程,以及指令式编程。
2圈复杂度软件源码某部分发圈复杂度就是这部分代码中线性无关路径的数量 eg:如果一段源码中不包含控制流语句(条件或决策点),那么这段代码的圈复杂度为1,因为这段代码中只会有一条路径;如果一段代码中仅包含一个if语句,且if语句仅有一个条件,那么这段代码的圈复杂度为2;包含两个嵌套的if语句,或是一个if语句有两个条件的代码块的圈复杂度为3。
3认知复杂度认知复杂度分数根据三个基本规则进行评估: 忽略允许将多个语句易于理解地简写成一个的情况在代码线性流程中的每一次中断都增加(+1)(复杂度)断流结构嵌套时增加(复杂度)

2.前端研发规范

2.1 HTML编码规范

2.1.1 文档类型

1)【强制】使用HTML5 DOCTYPE。

//<!DOCTYPE html>
<html>
</html>

2.1.2 语言

1)【推荐】指定html标签上的lang属性。

<html lang="zh-CN"><!--...-->
</html>

2.1.3 元数据

1)【推荐】使用UTF-8字符编码。
声明一个明确的字符编码,可以让浏览器更快更高效地确定适合网页内容的渲染方式。
由于历史原因,不同浏览器采用了不同的字符编码。但对于新业务,如无特殊要求,统一使用UTF-8字符编码,以便统一。
在HTML中使用<meta charset="utf-8:/>声明文档

<head><meta  charset="utf-8" />
</head>

2)【推荐】页面提供给移动设备使用时,需设置viewport。

2.1.4 资源加载

1)【推荐】引入CSSJavaScript时无需指定type。根据HTML5规范,引入CSSJavaScript时通常不需要指明type,因为text/css和text/javascript分别是他们的默认值。
2)【推荐】在head标签内引入CSS,在body结束标签前引入JS。在<body></body>中指定外部样式表和嵌入式样式块可能会导致页面的重排和重绘,对页面的渲染造成影响。因此,一般情况下,CSS应在<head></head>标签里引入。

2.1.5 页面标题

1)【强制】页面需要指定title标签,有且仅有1个。

2.1.6 编码风格

1)【推荐】统一使用2个空格缩进,不要使用4个空格缩进或tab缩进。
2)【强制】在HTML注释代码中,不允许出现任何敏感信息。
3)【推荐】单行注释,需在注释内容和注释符之间需留有一个空格,以增强可读性。
4)【推荐】多行注释,注释符单独占一行,注释内容2个空格缩进。

2.1.7 标签

1)【强制】标签名统一使用小写。

<!-- bad -->
<H1>Hello,world!</H1>
<!-- good -->
<h1>Hello,world!</h1>

2)【推荐】不要省略自闭合标签结尾处的斜线,且斜线前需留有一个空格。

<!-- bad -->
<meta name = "viewport" content="width=device-width,initial-scale=1.0">
<img src="images/foo.png" alt="foo"><!-- good -->
<meta name = "viewport" content="width=device-width,initial-scale=1.0" />
<img src="images/foo.png" alt="foo" />

2.1.8 属性

1)【强制】属性值使用双引号,不要使用单引号。
2)【推荐】不要为Boolean属性添加取值。
XHTML需要每个属性声明取值,但是HTML5并不需要。一个元素中Boolean属性存在即表示取值true,不存在则表示取值false。
3)【推荐】自定义属性的命名:以data-为前缀。

2.1.9 语义化

1)【参考】尽量根据语义使用HTML标签。

2.2 CSS编码规范

2.2.1 文件引用

1)【强制】一律使用link的方式调用外部样式。
2)【推荐】不要在<style>块中使用@import;不要在页面中使用<style>块。

2.2.2 命名-组成元素

1)【强制】命名必须由字母、中划线或数字组成且不能以数字或中划线开头。
2)【强制】不允许使用拼音与英文的混合命名,更不允许直接使用中文的方式;禁止同一个含义的内容,在同一个应用中出现多种不同的单词与翻译。

知识点

  1. map用于构建一个新数组,单纯想遍历数组应使用forEach
  2. copy = {...original,c:3};取代copy = Object.assign(original,{c:3});
  3. 将类数组结构转换为数组
const nodes = [...foo];const uniqueNodes = [...new Set(foo)]; //可以利用Set和...将数组去重
  1. ES5与ES6的相同点与不同点

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

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

相关文章

【数据分享】1979~2020年MSWEP降水数据集

各位同学们好&#xff0c;今天和大伙儿分享的是1979~2020年MSWEP降水数据集。如果大家有下载处理数据等方面的问题&#xff0c;您可以私信或者评论。 Beck, H. E., E. F. Wood, M. Pan, C. K. Fisher, D. G. Miralles, A. I. J. M. van Dijk, T. R. McVicar, and R. F. Adler, …

【软件设计师】通俗易懂的去了解算法的特性和要求

&#x1f413; 算法 算法是对特定问题求解步骤的一种描述&#xff0c;算法是指令的有限序列。其中每一条指令表示一个或者多个操作。 &#x1f413; 算法的5种属性 有穷性 一个算法必须总是在执行有穷的步骤后&#xff0c;且在每个步骤执行的过程中时间是有限的 1.有穷性意味…

深度学习 精选笔记(7)前向传播、反向传播和计算图

学习参考&#xff1a; 动手学深度学习2.0Deep-Learning-with-TensorFlow-bookpytorchlightning ①如有冒犯、请联系侵删。 ②已写完的笔记文章会不定时一直修订修改(删、改、增)&#xff0c;以达到集多方教程的精华于一文的目的。 ③非常推荐上面&#xff08;学习参考&#x…

蓝桥杯:单词分析

题目 题目描述 小蓝给学生们组织了一场考试&#xff0c;卷面总分为 100 分&#xff0c;每个学生的得分都是一个 0 到 100 的整数。 如果得分至少是 60 分&#xff0c;则称为及格。如果得分至少为 85 分&#xff0c;则称为优秀。 请计算及格率和优秀率&#xff0c;用百分数表…

Rstudio-深度学习执行代码

RStudio是一个开源的集成开发环境&#xff08;IDE&#xff09;&#xff0c;专门用于R编程语言的开发和数据分析。R语言是一种流行的统计计算和数据可视化语言&#xff0c;广泛用于数据科学、统计学和机器学习领域。 RStudio提供了许多功能强大的工具&#xff0c;包括代码编辑器…

SQL 基本条件查询DQL 练习

DQL DQL&#xff08;Data Query Language&#xff09;是SQL语言中的一种类型&#xff0c;用于执行数据查询操作。它是SQL的一部分&#xff0c;用于从数据库中检索数据。DQL语句用于从一个或多个表中选择、过滤和排序数据。常见的DQL查询语句包括SELECT、FROM、WHERE、GROUP BY…

U盘无法读取?轻松掌握正确解决方法!

“为什么我的u盘插入电脑后会显示无法读取呢&#xff1f;想查看一些比较重要的文件&#xff0c;但就是无法读取U盘&#xff0c;想问问大家&#xff0c;我应该怎么操作呢&#xff1f;” U盘作为一种便捷的数据存储设备&#xff0c;广泛应用于我们的日常生活和工作中。然而&#…

独立游戏《星尘异变》UE5 C++程序开发日志2——创建并编写一个C++类

在本篇日志中&#xff0c;我们将要用一个C类来实现一个游戏内的物品&#xff0c;同时介绍UCLASS、USTRUCT、UPROPERTY的使用 一、创建一个C类 我们在UE5的"内容侧滑菜单"中&#xff0c;在右侧空白中右键选择"新建C类"&#xff0c;然后可以选择一个想要的…

python70-Python的函数入门,了解下函数

函数是执行特定任务的一段代码,程序通过将一段代码定义成函数,并为该函数指定一个函数名,这样即可在需要的时候多次调用这段代码。因此,函数是代码复用的重要手段。学习函数需要重点掌握定义函数、调用函数的方法。 与函数紧密相关的另一个知识点是lambda表达式。lamda表达…

Spring AOP(Aspect-Oriented Programming,面向切面编程)介绍

Spring AOP&#xff08;Aspect-Oriented Programming&#xff0c;面向切面编程&#xff09;是Spring框架的一个重要模块&#xff0c;它提供了一种强大的方式来帮助开发者实现横切关注点&#xff08;cross-cutting concerns&#xff09;的模块化。横切关注点是指那些影响多个模块…

Linux设备模型(十一) - platform设备

一&#xff0c;platform device概述 在Linux2.6以后的设备驱动模型中&#xff0c;需关心总线、设备和驱动这3个实体&#xff0c;总线将设备和驱动绑定。在系统每注册一个设备的时候&#xff0c; 会寻找与之匹配的驱动&#xff1b;相反的&#xff0c;在系统每注册一个设备的时…

【Redis】实际应用 - 缓存

文章目录 1. 缓存的基本概念2. Redis作为缓存的优势2.1 内存存储2.2 持久性选项2.3 数据结构丰富 3. Redis缓存的使用3.1 安装和配置Redis3.2 连接到Redis3.3 存储和获取数据3.4 设置过期时间 4. 缓存策略4.1 LRU&#xff08;最近最少使用&#xff09;4.2 数据失效4.3 主动刷新…

可让照片人物“开口说话”阿里图生视频模型EMO,高启强普法

3 月 1 日消息&#xff0c;阿里巴巴研究团队近日发布了一款名为“EMO&#xff08;Emote Portrait Alive&#xff09;”的 AI 框架&#xff0c;该框架号称可以用于“对口型”&#xff0c;只需要输入人物照片及音频&#xff0c;模型就能够让照片中的人物开口说出相关音频&#xf…

PDN分析及应用系列二-简单5V电源分配-Altium Designer仿真分析-AD

PDN分析及应用系列二 —— 案例1:简单5V电源分配 预模拟DC网络识别 当最初为PCB设计打开PDN分析仪时,它将尝试根据公共电源网络命名法从设计中识别所有直流电源网络。 正确的DC网络识别对于获得最准确的模拟结果非常重要。 在示例项目中已经识别出主DC网络以简化该过程。 …

Vulnhub靶机:Bellatrix

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.4&#xff09; 靶机&#xff1a;Bellatrix&#xff08;10.0.2.9&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/entry/hogwa…

Leetcode 3070. Count Submatrices with Top-Left Element and Sum Less Than k

Leetcode 3070. Count Submatrices with Top-Left Element and Sum Less Than k 1. 解题思路2. 代码实现 题目链接&#xff1a;3070. Count Submatrices with Top-Left Element and Sum Less Than k 1. 解题思路 这一题就是一个二维的累积数组的问题&#xff0c;我们直接求一…

网络学习:MPLS技术基础知识

目录 一、MPLS技术产生背景 二、MPLS网络组成&#xff08;基本概念&#xff09; 1、MPLS技术简介&#xff1a;Multiprotocol Lable Switching&#xff0c;多协议标签交换技术 2、MPLS网络组成 三、MPLS的优势 四、MPLS的实际应用 一、MPLS技术产生背景 1、IP采用最长掩码…

Power BI vs Superset BI 调研报告

调研结论 SupersetPower BI价格开源①. Power BI Pro 每人 $10/月($120/年/人) ②. Power BI Premium 每人 $20/月($240/年/人) ③. Power BI Embedded:4C10G $11W/年 权限基于角色的访问控制,支持细粒度的访问: 表级别、库级别、图表级别,看板级别,用户级别 基于角色…

每天一个数据分析题(一百八十五)

给定下述Python代码段&#xff0c;试问哪个选项正确描述了该代码段的功能&#xff1f; data_raw[‘gender’] data_raw[‘gender’].map({‘Male’: 1, ‘Female’: 0}) A. 代码中对gender变量进行了独热编码(One-Hot Encoding)&#xff0c;并将gender中的缺失值填充为类别平…

深度学习API——keras初学

keras定义&#xff1a; Keras是一个深度学习API&#xff08;人工神经网络库&#xff09;&#xff0c;使用Python语言编写的github开源项目&#xff0c;主要开发者为谷歌工程师。Keras底层可调用不同的机器学习平台&#xff0c;如TensorFlow、Theano或micsoft-CNTK。 作用&…