前端开发规范

一、统一要求

1.1.基本规范

所有类名、id名、方法名等涉及到名称的，统一使用驼峰命名，命名要具有业务意义，语义化，简洁明了

代码中不得出现警告

代码中不得出现数字（插件除外）

结构（html），表现(css)，行为(js)代码需分离

1.2.基本原则

代码力求简洁，不要写大量重复的逻辑代码（公共方法需封装，公共样式提取到公共样式中）

代码要有可读性，函数和元素命名要具有业务意义，关键业务要有详细的注释

代码要有扩展性，要尽可能适应未来的业务变化，不得生搬硬套现有业务逻辑

代码要有通用性，一个方法只专注于该方法需要做的事情（对外暴露相应的参数），一个模块只专注于该模块范围内的事情（对外暴露相应的接口）

二、html规范

2.1.Charst字符集合

一般情况下统一使用UTF-8。尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 IETF对UTF-8的定义，其编码标准的写法是 “UTF-8”；

2.2.书写风格

1.Html代码大小写

HTML标签名、类名、标签属性和大部分属性值统一用小写

推荐：

2.元素属性

属性值使用双引号语法

例：

3.特殊字符引用

不得使用‘>’和‘<’特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体

4.代码嵌套

每个块级元素独占一行，内联元素可选

html中禁止行内元素里面嵌套块级元素、span标签搭配for属性使用、div加disabled属性等不规范用法，里不可以嵌套交互式元素、、等;

里不可以嵌套块级元素

、

~

、

、

/
/
1. 、

   /

   /

   、

   等，可参考WEB标准系列-HTML元素嵌套；

   html结构用统一采用双引号,js 用单引号

   5.引用规范

   将所有页面公共样式（如common.css）、插件样式写入head内的底部；

   将所有页面公共js、插件js放入body内底部；

   *注意：引入的文件全需加注释，表示是什么样式，或者什么插件（备注版本号）

   三、 CSS规范

   3.1.代码格式化

   样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写

   每个属性声明末尾都要加分号；

   css属性值需要用到引号时，统一使用双引号

   尽量不要用固定的宽高，多使用padding 和 margin

   尽量少用通用选择器*

   不使用ID选择器

   不使用无具体语义定义的标签选择器

   尽量少用！Important

   3.2.代码可读性

   1.左括号与类名之间一个空格，冒号与属性值之间一个空格

   2.逗号分隔的取值，逗号之后一个空格

   推荐：box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;

   3.不要为0指明单位

   推荐：margin：0 10px;

   不推荐：margin：0px 10px;

   3.3.属性书写顺序

   1.建议遵循以下顺序

   布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）

   自身属性：width / height / margin / padding / border / background

   文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

   其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient 等

   2.如果是单个页面需要改公共css或者插件样式，请一定在单个页面的样式中改，坚决不能修改插件源码，js文件同理；

   3.当属性存在兼容问题的，兼容多个浏览器时，将标准属性写在底部；

   -moz-border-radius: 15px; /* Firefox */

   -webkit-border-radius: 15px; /* Safari和Chrome */

   -o-border-radius: 15px;

   border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE 浏览器 *//标准属性

   四、JS规范

   4.1.文件命名

   文件命名和html中的功能相对应

   4.2. 语言规范

   1.变量

   尽量不要定义全局变量，否则很容易造成全局变量污染。

   2.变量先定义再使用，尽量避免使用全局变量分号

   语句结束总是使用分号

   3.使用严格相等号

   尽量使用===和!==

   4.条件判断语句必须放入{}中

   在if/else/for/do/while语句中，即使只有一行，也不得省略块{…}

   if (condition) {

   callFunc();

   }

   5.If嵌套不能超过2层

   6.一个函数的长度必须限制在50行以内，不然看完有时候会懵逼，可以分割成多个函数，一个函数只做一件事（单一原则）

   7.函数定义结束不允许添加分号

   function funName() {}

   如果是函数表达式，分号不能省略

   var funName = function () {};

   8.js文件调用的部分必须写在$(function(){/调用的js/})函数内，该页面需要用的函数，可封装写在该函数底部；

   9.common.js文件里面的函数必须保证是项目中大多数地方都会用到，且通用，common.js中的函数名要唯一。

   五、命名规范

   5.1.文件命名规范

   文件命名严格按照模块来命名，命名需语义化，一看就懂，html、css、js三者一一对应，例如projectManage.html，对应的projectManage.css，projectManage.js，即使一个页面需引入多个js，命名同理，例如引入项目修改的js，即命名：projectManageUpdate.js;

   5.2.文件命名规范变量名、类名、ID名、name、函数等命名规范

   代表同一个元素的变量名、类名、ID名、name最好保持一致，且采用驼峰命名；

   函数命名：小驼峰式命名法、前缀应当为动词、可使用常见动词约定；例：addPerson

   六、三方插件

   尽量引入大公司插件而非个人编写的插件

   插件文档需明确易读

   对UI限制越少越好，最好没有

   能兼容ie9

   代码缩进

   统一使用 2个空格做为一个缩进层级，一定要统一。

---

#前端开发

前端开发规范

https://thaneyang.github.io/2023/07/前端开发规范.html

作者

live威

发布于

2023年7月22日

许可协议

使用eslint、lint-staged、husky搭建前端项目 上一篇

时间管理 下一篇

目录

搜索

×

关键词