前端规范

基本介绍 我们从node开始，会大量用到ES6中的一些新语法，因此在学习node之前需要先学习一下es6中提供的新语法 ECMAScript与Javascript的关系 ECMAScript，简称ES

ES6模块化 在之前的 javascript 中一直是没有模块系统的，前辈们为了解决这些问题，提出了各种规范, 最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。而 ES6 中提

错误处理 错误处理 不要忽略抛异常 不要忘了在 Promise 抛异常 全局错误捕获 window.onerror = function(message, source, lineno, colno,

命名规范 从 目录、图片、HTML/CSS文件、ClassName 的命名等层面约定规范团队的命名习惯，增强代码的可读性，降低团队阅读成本。 代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用

计算规范 计算规范 避免全局查找 访问全局变量始终比访问局部变量慢，因为必须 遍历作用域链。 任何可以缩短遍历作用域链时间的举措都能提升代码性能。 全局变量和函数相比于局部值始终是 最费时间的，因为需

DOM操作 DOM操作 避免在document上频繁的DOM操作，可以用 fragment文档片段 最快获取dom的方法 使用requestAnimationFrame 代替setInterval 函

# 1 目录规范 ## 1. 目录规范 > 以React + TypeScript项目（推荐）为例，JavaScript项目同理 ``` ├── docs/

TS规范 基本规范 命名，声明 使用PascalCase命名类，枚举，接口，组件名 使用camelCase命名函数名，属性，本地变量名 勿将C#的规范套用到TS中 类型定义需在文件顶部声明 文件名中使

LESS 开发规范 代码组织 代码按如下顺序书写： @import 变量声明 样式声明 @import语句 @import 语句后的路径路径使用双引号""，引用的文件后缀名不可以省略。 混入（Mixi

Airbnb 规则 附录一、Airbnb 规则说明文档 使用 JavaScript 最合理的方式。 注意: 这个指南假定你正在使用 Babel，并且需要你使用 babel-preset-airbnb 

注释规范 快速阅读友情提示：你可以通过右侧的目录索引快速跳转到你想要阅读的内容 为什么要注释 注释的基本要求 需要注释的模块 一、HTML 二、CSS 三、JAVASCRIPT 具体的书写规范 一、H

1 目录规范 文件夹的命名规范遵循《命名规范》中的目录命名规范，全部采用小写的 kebab-case 命名，有复数结构时采用复数命名，缩写不使用复数。 同时强调，不建议编造或滥用缩写，不建议在文件夹名

2 代码规范 2.1 命名规范 2.1.1 SFC组件文件/目录命名 官方文档对组件、基础组件、单例组件和紧密耦合的组件都有优先级为强烈推荐的风格规范。 针对其命名规则结合我们实际项目的经验，在项目规

CSS开发规范 1、基本规范 所有名称小写，符合w3c规范 类名和id，多个变量之间用中划线连接 所有变量只能使用名词 变量定义要符合语义化 2、基本原则  以项目名或者一个全局名称为命名空间，例如你

SOLID原则 SOLID原则 编码遵循solid原则可以让大家写出可读性和可维护高的前端代码 单一职责原则 接口职责应该单一，不要承担过多的职责。如果一个类干的事情太多太杂，会导致后期很难维护。我们

# 2 代码规范（JSX） ## 2. 代码规范（JSX） ### 2.1 命名规范 ##### 2.1.1 文件名 如果是文件，则使用大驼峰（PascalCase），如 `MyCompone

缓存使用规范 为了统一软件开发过程涉及资源的使用规则，明确相关约束条件、执行标准与安全基线，提升软件开发效率与质量，特制定本规范 Cookie使用规范 cookie的存储空间非常有限且会携带在请求头中

3 最佳实践 3. 最佳实践 3.1 Class组件 vs 函数式组件 首选函数式组件，因为它们有着更简单的语法，没有生命周期、构造函数等，可以用更简洁的代码来表达相同的逻辑，同时拥有更好的可读性。

函数最佳实践 函数最佳实践 避免回调 回调很混乱，会导致代码嵌套过深，使用 Promise 替代回调。 **避免过长参数：**函数规范，参数尽量限制为3个以内；三个及以上，需要考虑独立为JSON对象，