小白6402

小白6402

关注
发信
关注(28)粉丝(399)

前端开发规范

编码规范

html编码规范

  • html 所有标签、属性、值均使用小写字母，且属性的值前后使用双引号””,例如： title=”我的网页”，属性与属性之间使用一个英文空格隔开

  • 所有标签均按照xhtml1.0 规范进行闭合，非成对标签采用/>自闭合，如：<img />、 <br />等

  • 标签嵌套必须合理正确，严禁在行内元素内嵌套使用块级元素标签

  • 合理规划文档结构，去除不必要的<div>标签

  • 先分析布局，划分框架，然后规划结构，最后编写代码

  • 根据业务需要，添加必不可少的keywords,description,title【 SEO 提供】

  • HTML 标签语义化

  • 合理嵌套
    HTML 标签按照默认的展现形式可以分为两大类:块级元素和行内元素(也叫内联元素),HTML 编码中严禁在行内元素内嵌套使用块级元素标签。

  • 合理使用h标签

    <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用,并且依据重要性递减 。<h1> 是最高的等级,用来描述网页中最上层的标题,确保把 <h1> 用于最顶层的标题,<h2> 和 <h3> 用于较低的层级。应慎重地选择恰当的 h 标签的层级来构建文档的结构。

  • ID 和 class 使用规范

    • id 在同一个文档中必须唯一,而 Class 则比较灵活,表示一类 DOM 元素或模块的样式,因此除外 header,footer,nav, menu,content 等结构性模块外,原则上禁止对页面内单个模块设置 id 并添加样式表规则,id 仅作为编写效果和实现业务需求功 能的 js 选择器而使用。
    • ID 和 Class 的命名规则,遵循 CSS 编码规范的命名约束规则。

  • 代码缩进规范

    • HTML 代码的层级缩进为 1 个 tab(距离等于 4 个空格)

    • 跨行标签的开始标签和结束标签必须上下对齐(缩进规则一致)

    • 值为空的元素定义应该单独占用一行

    • 包含子元素的元素的起始标签和闭合标签分别单独占用一行

      <div class="info-wrapper">
	<div class="container-top"></div>
	<article>
	... 
	</article>
	<div class="container-bottom"></div>
</div>

  • 前景图片编码原则

      <img alt=”图片说明” src=”temp.png” />
    • img 标签必须闭合。
    • 必须指定图片显示为 display:block;
    • 图片宽高确定时,必须显式的设置图片的宽高 ,多张列表内包含的图片在 CSS 中设置, 单张或无规则图片在 html 中设置;宽高仅一项确定时,则可仅设置其中一项;都不确 定时,则不需要设置,对于经常改变或者维护型的图片则不遵循此规定。
    • 所有图片必须添加 alt 属性值。

JS编码规范

  • 命名要有意义，可读性强

  • 私有变量名用下划线_开头

  • 一般变量命名用小写驼峰命名

      let className = "sunny";

  • 常量必须使用大写字符,并用下划线分隔

      let  ID_USER;

  • 为全局代码使用命名空间

      var SN = {}
  SN.tab = function(){};
  SN.show = function(){};

  • 类(构造函数)的必须首字母大写

      function Class(){
  
  }

变量声明、语句约定

  • 声明变量必须加上**var**关键字

  • 如非必要，javascript代码不应该被包含在HTML文件中

  • 即使只有一条语句也不能省略{}

      if(boolean){
  	return;
  }

  • 每个语句结束必须使用分号

  • 使用{}代替new Object()，使用[]代替new Array()

      var arr=[],obj={};

  • 避免使用eval（只用于解析序列化串）

      $.get(url, function(sn_data_json){
  	eval(sn_data_json)；
  })

  • 尽量不要让每行超过120 个字符

    超长的不可分割的代码允许例外，比如复杂的正则表达式

    运算符处换行时，运算符必须在新行的行首

  • 不要使用with

  • 不要修改内置对象的原型

  • 一个函数应该返回统一的数据类型

  • 遍历数组不使用 for in 数组对象可能存在数字以外的属性, 这种情况下 for in 不会得到正确结果

空格、缩进、空行

  • 语句中的必要空格和缩进，缩进的单位为四个空格，sublime的可以如下设置

      "tab_size": 4,
  "translate_tabs_to_spaces": true

  • "="前后需要跟空格,建议数值操作符(如, +/-/*/% 等)两边留空

      var name = "Tom";

  • for 循环条件中, 分号后留一空格;

      for( var i = 0; i < 10; i++){
  	//TO DO...
  }

  • 变量声明语句, 数组值, 对象值及函数参数值中的逗号后留一空格

      var a = 0, b = 1, c = 2;
  var arr = [1, 2, 3, 4];
  var obj = {a: 1, b: 2, c: 3};
  function(a, b, c){}

  • 空行不要有空格，行尾不要有空格

  • 逗号和冒号后一定要跟空格，点号前后不要出现空格

  • 空对象和数组不要填入空格

  • 不要吝啬空行，尽量使用空行将逻辑相关的代码块分割开，以提高程序的可读性

  • 合理的格式化和缩进

类型转换

  • [建议]转换成 string 时，使用 + ''

  • [建议]转换成 number 时，使用+

  • 使用 parseInt 时，必须指定进制

      parseInt("1",10);

建议

  • 字符串开头和结束使用单引号 '

  • 使用 数组 或 + 拼接字符串。

  • 清空数组使用 .length = 0

  • 避免 == 、!= 的使用， 用严格比较条件 ===、!==

  • 可以省略script标签的type

css编码规范

  • 规则命名采用小写驼峰

  • 命名推荐采用更简明有语义的英文单词进行组合。应尽量避免使用中文拼音，尤其是首字母简拼。

  • 命名应注意缩写，但是不能盲目缩写。

  • DOM 一律不准使用 id 挂载css，且要避免id 与class 重名

  • 规则名称中不应该包含颜色（red/blue） 、定位（left/right） 、大小（width/height/300px） 等与具体显示效果相关的信息。应该使用其意义或功能命名，而不是样式显示结果

  • 禁止直接为html tag 添加css 样式（全局的reset 除外），如：

      div { color: red;}

  • 禁止直接为全局类名设置属性

  • 禁止类名中出现 ad 字样，防止被广告插件屏蔽

  • 尽量避免使用!important

  • 性能

    • 选择器应该在满足功能的基础上尽量简短，减少嵌套选择器的查询消耗。 同时要务必避免覆盖全局样式的设置；

    • 注意选择器的性能，不要使用低性能的选择器

    • 禁止在 css 中使用 * 选择符；

    • 除非必须，一般有class 或id 的，不需要再写上元素对应的tag，如：

      span.important-text { color: red; }

      应写成：

      .important-text { color: red; }

    • 合并margin、padding、border 的-left/-top/-right/-bottom 设置，尽量使用缩写；

    • 在保持代码解耦的前提下，尽量合并重复的样式，例如：

      h1 { color: red; }
P { color: red; }

      应写成：

      h1, p { color: red; }

    • css 背景图要使用sprite 技术。可按照相关度（是否首屏、模块、页面等）合并，并存储为web 所用格式。图片优先使用png8 格式保存，并适当压缩体积。在存在透明通道的情况下可使用 png24 位图片。在色值较多的情况下，可使用jpg 格式保存。

命名规范

文件命名规范

  • 组件：文件夹用小写英文，多个单词用短横线 - 连接；文件夹内添加index.tsx

  • 组件样式：在组件同一级，名称统一为index.module.less

  • 公共样式：根据实际功能命名，例如基础样式：base.less

  • 类名命名：采用驼峰小写命名 :className

  • 其它命名：根据功能实际命名，尽量英文命名，不要太长

争议：对于组件的命名，常用的驼峰命名，跟短线连接命名。（可以讨论一些，毕竟每个人都有个人的习惯。统一起来那种命名方式都可以看起来舒服）

安全规范

一、敏感信息加密

描述：

对用户提交的参数进行截获
web端本地的数据存储，如H5d localStroage、sessionStroage
预防方案

对用户登录的密码进行加密后传输
将http升级为https
本地存储只能用于非关键信息的存储，比较重要的用户信息在存储时
按照base64进行编码后存储，避免在浏览器客户端直接看到明文信息。
对于关键重要信息，禁止采用客户端本地存储技术进行存储。

二、系统提示信息

描述

攻击者根据返回的提示信息会猜测到系统中存在的登陆用户名，然会对密码进行暴力破解。
前端将后端的推展信息展示到页面上，会暴露sql、java代码语句等关键信息

预防方案

对网站登陆页面的判断回显信息做到模糊化提示，避免出现例如：用户不存在、密码错误等准确性提示，因统一使用：用户名或密码错误
后台不允许直接将java运行时Exception堆栈信息返回给前台，而应采用自定义异常机制返回。使用自定义异常继承相关的异常来抛出处理后的异常信息可以隐藏底层的异常，这样更安全，异常信息也更加的直观。
前端如果接受到后端的堆栈信息，必须将异常堆栈信息与业务信息字段区分，禁止直接将底层Exception堆栈信息显示给用户。

三、部署代码的安全性

描述

在客户端浏览器能够直接看到html与JavaScript代码，通过浏览器的调试
机制可对客户端js代码的执行过程进行认为干预或者注入。
预防方案

处理保证主机网络的安全性之外。代码在部署前，编译阶段需要增加对代码的压缩，变量混淆
涉及到资金金额信息
描述

金额信息显示错误或者将错误的金额信息返回到后台
预防方案

对于金额数字，前端直接从后端服务拿到数据展示，不做任何多余的计算
前台不给后台提供任何金额数字，例如购物车，前台只需要将各种商品的产品id与购买数量提交给后端，有后端进行计算得出总金额返回给前端展示或者收费

四.XSS跨站脚本攻击

描述

在页面注入恶意script代码，用户浏览这些网页时，就会执行其中的恶意代码，可对用户进行盗取cookie信息、会话劫持等
预防方案

输入过滤，检查用户输入的数据中是否包含特殊字符，如<,>,、,script等，如果有则将字符进行转义
将cookie设置为http-only。防止客户端js获取cookie信息

五.XSRF攻击

描述

跨站请求伪造，通过伪装来自受信任用户的请求来利用受信任的网站
预防方案

解决最常用的方案就是使用Token。服务器会更具用户提交的token验证服务调用方的身份

前端优化

1. 减少 HTTP 请求
2. 使用服务端渲染
3. 静态资源使用 CDN
4. 使用字体图标 iconfont 代替图片图标
5. 减少重绘重排
6. 使用事件委托
7. if-else 对比 switch
```bash
 当判断条件数量越来越多时，越倾向于使用 switch 而不是 if-else。
```
8.使用 requestAnimationFrame 来实现视觉变化
9. 使用位操作
10.不要覆盖原生方法
11.降低 CSS 选择器的复杂性

  • 浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。

  • CSS 选择器优先级

内联 > ID选择器 > 类选择器 > 标签选择器
根据以上两个信息可以得出结论。

1. 选择器越短越好。
2. 尽量使用高优先级的选择器，例如 ID 和类选择器。
3. 避免使用通配符 *。
12. 使用 flexbox 而不是较早的布局模型
13. 使用 transform 和 opacity 属性更改来实现动画
14. 使用 webp 格式的图片代替其它格式的图片
WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。
15.其它常规的性能优化
尽量使用class选择器
尽量避免css污染，除了组件代码块或者工具类样式，尽量避免全局样式；
尽量少使用元素选择器，尤其尽量避免元素选择器嵌套；
尽量避免在CSS中使用大量的ID选择器；避免元素选择器和 Class、ID 叠加使用；
经常出现的，避免使用属性选择器；
避免选择器嵌套层级过多，尽量少于 3 级；
声明语句中的 : 后应添加一个空格；
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
十六进制值应该全部小写，例如，#fff ；尽量简写用#ddd 代替 #dddddd；
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;
合理使用代码继承，避免重复代码；
慎重选择高消耗的样式
box-shadows
border-radius
transparency
transforms
CSS filters（性能杀手）
避免过分重排，覆盖，浏览器需要重新计算布局位置与大小
不滥用 Float，Float在渲染时计算量比较大，尽量减少使用
正确使用 Display 的属性
display: inline后不应该再使用 width、height、margin、padding 以及 float；
display: inline-block 后不应该再使用 float；
display: block 后不应该再使用 vertical-align；
display: table- 后不应该再使用 margin 或者 float；
尽量使用animate实现动画，translate实现变形，避免使用js（setTimeout, setInterval.）、jQuery animate()等
注意js内存管理

  • 内存泄漏严重影响性能

  • 高级语言 ！==不管理内存

  • 创建变量自动分配内存 不使用自动释放GC垃圾回收机制

    A. 引用计数 -> 无法解决循环引用问题A对象引用B对象属性B对象引用A对象属性

​ B. 标记清除 -> 扫描发现有些变量访问不到了 打标机然后回收

  • 局部变量函数执行完没有闭包引用就会被标记回收
  • 全局变量，直到浏览器卸载页面时释放
  • 避免意外全局变量的产生
  • 避免引发大量的闭包
  • 避免脱离的DOM元素
  • 设置了定时器就要在合适的时候取消它
建议
虽然现在的浏览器很强大，但能规范都尽量进行一个规范，规范化后面项目大了，体验感总比不规范体验感好，性能是有个明显的提升的。至于插件上的优化，由主导者着去看文档是否进行一个必要引用插件做一个性能的提升。

参考学习：csdn 前端性能优化(推荐)

​ [掘金 前端性能优化 24 条建议](前端性能优化 24 条建议（2020） - 掘金 (juejin.cn))

源码提交规范

( 1 ) type（必须） : commit 的类别，只允许使用下面几个标识：

  • feat: 新功能（feature）

  • fix: 修复bug，可以是QA发现的BUG，也可以是研发自己发现的BUG

  • docs: 文档（documentation）

  • style: 格式（不影响代码运行的变动）

  • refactor: 重构（即不是新增功能，也不是修改bug的代码变动）

  • perf: 优化相关，比如提升性能、体验

  • test: 增加测试

  • chore: 构建过程或辅助工具的变动

  • revert: 回滚到上一个版本

  • merge: 代码合并（注意格式化工具是没有这个的，如果使用格式化工具，哪就要单独配置文件）

( 2 ) subject（必须） : commit 的简短描述，不超过50个字符。

代码维护规范

1.可复用的代码封进行封装

2.不可使用var 用let const代替var

3.使用switch或三目代替if else（当然有些时候if else看起来逻辑更清晰点就不要使用三目了）

4.尽量编写逻辑清晰，代码不要过长

总结

针对上面的规范，跟常见的错误，跟常见使用约束，找到了这个eslint的约束规则，有需要的可以进行添加。这些约束可以进行一个讨论。这样就可以做到一些常见的约束由eslint帮我们做个约束提示。

  rules: {
    'no-await-in-loop': ['error'], // 禁止在循环中出现 await
    'arrow-body-style': ['error'],
    'arrow-spacing': ['error'],
    'no-duplicate-imports': ['error'], // 禁止重复模块导入
    'no-var': ['error'], // 要求使用 let，const 而不是 var
    'template-curly-spacing': ['error'], // 禁止模板字符串中的嵌入表达式周围空格的使
    'eqeqeq': ['error'], // 要求使用 === 和 !==
    'no-div-regex': ['error'],
    'no-else-return': ['error', { 'allowElseIf': true }], // 禁止 if 语句中 return 语句之后有 else 块
    'no-useless-return': ['error'], // 禁止多余的 return 语句
    'require-await': ['error'], // 禁止使用不带 await 表达式的 async 函数
    'require-unicode-regexp': ['error'], 
    'no-unused-vars': ['off'],
    'global-require': ['error'], // 
    'array-bracket-newline': ['error', { 'multiline': true }],
    'array-bracket-spacing': ['error', 'never'],
    'block-spacing': ['error', 'always'],
    'brace-style': ['error', '1tbs', { 'allowSingleLine': true }],
    'camelcase': ['error', { 'properties': 'never', 'ignoreDestructuring': true }], // 强制使用骆驼拼写法命名约定
    'comma-spacing': ['error', { 'before': false, 'after': true }], // 强制在逗号周围使用空格
    'comma-style': ['error'], // 要求逗号放在数组元素、对象属性或变量声明之后，且在同一行
    'func-call-spacing': ['error'], // 禁止在函数名和开括号之间有空格
    'indent': ['error', 2, { 'SwitchCase': 1 }],
    'implicit-arrow-linebreak': ['error'], // 禁止在箭头函数体之前出现换行
    'keyword-spacing': ['error', { 'before': true, 'after': true }], // 强制关键字周围空格的一致性
    'lines-between-class-members': ['error'], // 要求在类成员之后有一行空行
    'max-depth': ['error', 5], // 强制块语句的最大可嵌套深度
    'no-negated-condition': ['error'], // 禁用否定表达式
    'no-unneeded-ternary': ['error'], // 禁止可以在有更简单的可替代的表达式时使用三元操作符
    'no-whitespace-before-property': ['error'], // 禁止属性前有空白
    'operator-assignment': ['error'], // 要求在可能的情况下使用简化的赋值操作符
    'quotes': ['error', 'single'], // 要求尽可能地使用单引号
    'semi-spacing': ['error', {'before': false, 'after': true}], // 强制分号后有空格
    'space-before-blocks': ['error', 'always'], // 块语句必须总是至少有一个前置空格
    'space-before-function-paren': ['error', 'always'],
    'template-tag-spacing': ['error'],
    'wrap-regex': ['error'],
  }

总体规范 pretter格式化

// 一行最多 200 字符
  printWidth: 200,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾不需要分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: "as-needed",
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号
  trailingComma: "none",
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号不需要换行
  jsxBracketSameLine: true,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: "always",
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: "preserve",
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: "css",
  // 换行符使用 lf
  endOfLine: "lf",

采用editorconfig

“EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。EditorConfig项目由用于定义编码样式的文件格式和一组文本编辑器插件组成，这些插件使编辑器能够读取文件格式并遵循定义的样式。EditorConfig文件易于阅读，并且与版本控制系统配合使用。”

例子

# 控制 .editorconfig 是否生效的字段
root = true
# 匹配全部文件
[*]
# 结尾换行符，可选"lf"、"cr"、"crlf"
end_of_line = lf
# 在文件结尾插入新行
insert_final_newline = true
# 删除一行中的前后空格
trim_trailing_whitespace = true
# 匹配js和py结尾的文件
[*.{js,py}]
# 设置字符集
charset = utf-8

# 匹配py结尾的文件
[*.py]
# 缩进风格，可选"space"、"tab"
indent_style = space
# 缩进的空格数
indent_size = 4
[*.md]
trim_trailing_whitespace = false

# 以下匹配，类同
[Makefile]
indent_style = tab# tab的宽度tab_width = 4
# 以下匹配，类同
[lib/**.js]
indent_style = space
indent_size = 2

[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

常见使用

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

tips

主要还是统一文件的命名，跟变量的命名的规范。图片优化这个是必要的，其它的作为一个了解，因为有些消耗是不可避免的。其它的采用eslint强制做个规范的约束。

12-06 02:27
Powered by LMLPHP ©2024 小白6402 0.006567