网站建设内容策略,深圳高端网站建设电话,外包做网站哪家好,网站搜索功能如何实现文章目录 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. 文档说明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
/html2.1.2 语言
1【推荐】指定html标签上的lang属性。
html langzh-CN!--...--
/html2.1.3 元数据
1【推荐】使用UTF-8字符编码。 声明一个明确的字符编码可以让浏览器更快更高效地确定适合网页内容的渲染方式。 由于历史原因不同浏览器采用了不同的字符编码。但对于新业务如无特殊要求统一使用UTF-8字符编码以便统一。 在HTML中使用meta charsetutf-8:/声明文档
headmeta charsetutf-8 /
/head2【推荐】页面提供给移动设备使用时需设置viewport。
2.1.4 资源加载
1【推荐】引入CSS和JavaScript时无需指定type。根据HTML5规范引入CSS和JavaScript时通常不需要指明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 --
H1Hello,world!/H1
!-- good --
h1Hello,world!/h12【推荐】不要省略自闭合标签结尾处的斜线且斜线前需留有一个空格。
!-- bad --
meta name viewport contentwidthdevice-width,initial-scale1.0
img srcimages/foo.png altfoo!-- good --
meta name viewport contentwidthdevice-width,initial-scale1.0 /
img srcimages/foo.png altfoo /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【强制】不允许使用拼音与英文的混合命名更不允许直接使用中文的方式禁止同一个含义的内容在同一个应用中出现多种不同的单词与翻译。
知识点
map用于构建一个新数组单纯想遍历数组应使用forEach用copy {...original,c:3};取代copy Object.assign(original,{c:3});将类数组结构转换为数组
const nodes [...foo];const uniqueNodes [...new Set(foo)]; //可以利用Set和...将数组去重ES5与ES6的相同点与不同点
