web前端开发代码规范!

Posted 2021-04-08 web前端学习教程

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端开发代码规范!相关的知识，希望对你有一定的参考价值。

今天小编要跟大家分享的文章是关于Web前端工程师要知道的前端开发代码规范!对于一个多人团队来说，制定一个统一的规范是必要的，因为个性化的东西无法产生良好的聚合效果，规范化可以提高编码工作效率，使代码保持统一的风格，以便于代码整合和后期维护。今天小编就为大家分享一些前端开发的代码规范，希望能够对小伙伴们有所帮助。

Web前端工程师要知道的前端开发代码规范！

一、 html/CSS规范

1 、浏览器兼容

根据公司业务要求而定，一般：

§ 主流程测试：Chrome 30+、IE9+;

§ 完整测试：Chrome 21、IE8+、360浏览器、微信webview/QQ手机浏览器。

2 html代码规范

(1)声明与编码

1、html头部声明统一：

1. <!DOCTYPE html>

2、页面编码统一：

1. <meta charset="UTF-8">

(2)格式缩进

html编码统一格式化显示，使用一个Tab键进行分层缩进 (2个空格宽度)，使整个页面结构层次清晰，方便阅读和修改。

(3) 模块注释

html较大独立模块之间注释格式统一使用：

1.

2. …

3.

或者：

1.

2. …

3.

(4)标签与属性

1、由于html标签和属性不区别大小写，所有建议都采用小写，尤其是自定义标签和属性名，否定js中取不到，如：

1. <div data-bgColor="red"></div>

3. $('div').data('bgColor'); // 取不到，已自动被浏览器转成了data-bgcolor

2、所有html属性必须添加双引号(非单引号)。

1. // 禁止

2. <div id=mainframe> 或 <div id='mainframe'>

4. // 推荐

5. <div id="mainframe">

3、所有标签必须采用合理嵌套。

1. // 禁止

2. <p><b></p></b>

4. // 推荐

5. <p><b></b></p>

7. // 禁止inline级标签嵌套block级标签

8. <span><div></div></span>

4、所有<、&、>等特殊符号(非标签一部分)用编码表示。< 编码成\< ，>编码成\>，&编码成\&

5、img标签中必须添加alt属性。如：<imgsrc="…" alt="logo" />

6、标签在运用时，应尽量使用语义化标签，如:

1. <h1>标题<h1>

2. <lable for="user">用户名：</lable>

3. <input name="username" id="user">

在语义不明显，既可用div也可用p时，应优先考虑p标签。

3、 CSS代码规范

(1) CSS引用规范

1、所有CSS均为外部调用，不得在页面书写任何内部样式或行内样式;

2、html页面引入样式文件：

统一使用link标签，少用@import(原生import有加载性能问题)，sass、less、vue.js等文件使用import命令除外(因为最终前端构建工具会将引入文件编译成一个css文件)。

1. <link rel="stylesheet" href="xxx.css">

(2) CSS注释规范

1、css头部文档注释( 统一加上@charset声明 )，如下：

1. @charset "utf-8";

3. /**

4. * @created : 2017/09/15

5. * @author : Mr.Wang

6. * @version : v1.0

7. * @desc : XX模块

8. */

关于"version"，如果对代码有修改更新version版本号，并添加相关注释。

2、内部模块之间注释(建议 @模块英文名，好查找)：

1. /* @info 商品信息区

2. ----------------------------------------------------------------*/

3. .infoArea{}

5. /* 单行注释 */

6. .specArea{}

8. /* @price 商品价格区

9. ----------------------------------------------------------------*/

10. .price{}

(3) CSS书写规范

1、样式书写不做强约，可分行或单行

推荐单行，理由：直观、模块之间分隔鲜明，有全局感。

2、样式中属性排序规则：先外部 > 再自身 > 后内部，推荐工具( CSScomb )

1. A.)影响文档流的属性(display, position, float, clear, visibility, table-layout等)

3. B.)自身盒模型的属性(width, height, margin, padding, border等)

5. C.)排版相关属性(font, line-height, text-align, text-indent, vertical-align等)

7. D.)装饰性属性(color, background, opacity, cursor等)

9. E.)生成内容的属性(content, list-style, quotes等)

3、所有CSS属性和值必须采用小写的形式。如：FONT-SIZE:12PX必须改为font-size:12px;

4、关于css背景图片(关键字：合并，缩写，去引号), 引号不是必须的，而且在某些浏览器上加引号反而出错：

1. // 不推荐

2. .canbox{

3. background-color: #ff6600;

4. background-image: url("/img/xxx.png");

5. }

7. // 推荐(合并、去除引号)

8. .canbox {

9. background: #f60 url(/img/xxx.png);

10. }

5、属性为0值，去除单位。

1. // 不推荐

2. .wrap{

3. margin: 0px 0px 5px 8px;

4. }

6. // 推荐

7. .wrap {

8. margin: 0 0 5px 8px;

9. }

6、所有CSS的命名应语义化，如：回复框，.replyBox{…}，禁止用拼音缩写命名，如.hfk{…}。

7、清除浮动时用.clearfix，禁止用无语义的 <pstyle="clear:both"></p> 清除。

8、用来显示动态文本输入的地方，样式里必须加上强制英文换行：

1. word-break: break-all; word-wrap: break-word; overflow-x: hidden;

如果要显示省略号加上：text-overflow: ellipsis;

9、上下相邻的两模块尽量避免混用margin-bottom，margin-top，否则会产生重叠现象。

二、 javascript规范

1、 JS文件引用

(1)引入格式：

脚本语言发展至今，也只有js混的最好了，所以type="text/javascript"类型指定可以省去。

1. <script ></script>

(2)引入位置：body标签内最后部(非body外面), 减少因载入脚本而造成其他页面内容阻塞的问题(js单线程)。

1. <html>

2. <body>

3. <div>页面内容….</div>

4. <script ></script>

5. </body>

6. </html>

(3)引入方式：html页面中禁止直接编写js代码，统一使用 <script> 外部引用方式，以便打包压缩和缓存。

2、 JS代码缩进

(1) 整体层次

使用 Tab 键进行代码缩进 (4个空格宽度) 。

1. (function() {

2. var i = 0;

3. function innerFun() {

4. var j = 0;

5. ……

6. }

7. });

运算符(=、==，&&、+/-等)两侧应各空一个格，块级{}左侧也应该空出一格

(2) 局部间隔

1. // 不推荐

2. var arr=[1,2],str='hello'+'Lucy';

4. var myfun=function(arg){

5. //todo…

6. }

8. // 推荐

9. var arr = [1,2],

10. str = 'hello' + 'Lucy';

11.

12. var myfun = function(arg) {

13. //todo…

14. }

3、 JS注释规则

(1) 文件头部注释

1. /**

2. * @created : 2017/09/15

3. * @author : Mr.Wang

4. * @version : v1.0

5. * @desc : 当前js模块功能描述

6. * @e.g. : 方法用例，如：$('.title').tip();

7. */

(2) 方法注释及单行注释

1、对于一个较复杂的方法和函数，可用采用多行注释，以便作详情的描述。

1. /**

2. * 此方法是用于解析tpl模块

3. * 通过分析html中结构…

4. */

2、单行注释

1. var funName = function(arg1, arg2) {

2. this.arg1 = arg1;

4. // 单行注释说明(上面添加一空行, //与说明之间空一格)

5. this.arg2 = arg2;

6. };

4、命名规则

变量名应由 26 个大小写字母(A..Z，a..z)，10 个数字(0..9)，和“_”(下划线)组成。

1、通常, 使用”驼峰式”写法，对象、函数和实例时尤其如此。

1. // 不推荐

2. var is_my_object = {};

3. var is-my-object = {};

5. // 推荐

6. var isMyObject = {};

2、构造函数或类时使用驼峰式大写

1. // 不推荐

2. var bad = new user({

3. name: 'nope'

4. });

6. // 推荐

7. var good = new User({

8. name: 'nope'

9. });

3、常量大写，并用下划线分隔，形式如：NAMESLIKETHIS

5、编码模式

为了规范代码严谨风格，推荐严格模式(Strict Mode)，即总是在模块顶部声明 'use strict';

1. (function(){

2. 'use strict';

3. function innerFun(){

4. var j = 0;

5. ……

6. }

7. });

严格模式的一大目标是显性的抛出错误，让你能更方便更快的调试一些隐性的错误。

(1)防止意外的创建了全局变量。

非严格模式下，为一个未申明的局部变量赋值时会自动创建一个同名的全局变量，这是Js程序中最容易出现的错误之一，在严格模式下这么做会显性的抛出异常。

1. // 严格模式下会抛出异常

2. (function() {

3. some = 'foo';

4. }());

(2)防止函数中的this指针意外指向全局。

非严格模式下，函数中未被定义或为空( null or undefined)的this会默认指向全局环境(global)。

1. window.color = 'red';

3. function getColor() {

4. console.log(this.color);

5. }

7. // 在严格模式中会报错, 非严格模式中则提示red

8. getColor();

(3)防止重名。

当编写大量代码时，对象属性和函数参数很容易一不小心被设置成一个重复的名字。严格模式在这种情况下会显性的抛出错误

1. // 重复的变量名，在严格模式下会报错。

2. function doSomething(value1, value2, value1) {

3. //code

4. }

6. // 重复的对象属性名，在严格模式下会报错。

7. var object = {

8. foo: 'bar',

9. foo: 'baz'

10. };

(4)对只读属性修改/删除时会抛出异常。

ES5中可为对象特定属性设为只读或让整个对象不可修改。但在非严格模式中尝试修改一个只读属性只会默不做声的失败。

1. var person = {};

3. Object.defineProperty(person, 'name' {

4. writable: false,

5. value: 'Nicholas'

6. });

8. // 在非严格模式时，沉默的失败，在严格模式则抛出异常

9. person.name = 'John';

(5)不要在全局环境下启用严格模式。

为了兼容第三方代码可能没有为严格模式做好准备而引发的问题，最好把开启严格模式的指令作用于自己独立的模块/函数里。

(6) 推崇建议

—— 变量

声明变量必须加上 var 关键字. 否则变量就会暴露在全局上下文中, 这样很可能会和现有变量冲突(es6中let修复了这个问题)。

—— 逗号

不要加多余的逗号，这可能会在IE下引起错误，同时如果多一个逗号某些ES3的实现会计算多数组的长度。

1. // 不推荐

2. var hero = {

3. firstName: 'Kevin',

4. lastName: 'Flynn',

5. };

7. // 推荐

8. var hero = {

9. firstName: 'Kevin',

10. lastName: 'Flynn'

11. };

—— 分号

如果仅依靠语句间的隐式分隔, 有时会很麻烦.而且有些情况下, 漏掉分号会很危险.

1. ;(function(){

2. var i = 0;

3. function innerFun(){

4. var j = 0;

5. ……

6. }

7. });

—— {},[]

1. // 不推荐

2. var item1 = new Object(), item2 = new Array();

4. // 推荐

5. var item1 = {}, item2 = [];

—— 字符串，统一用单引号

1. // 不推荐

2. var name = "Bob Parr";

4. // 推荐

5. var name = 'Bob Parr';

—— === 和 !== 操作符

使用 === 和 !== 操作符会相对好点。== 和 != 操作符会进行类型强制转换。特别是，不要将 == 用于与错值比较(false，null，undefined，“”，0，NaN)。

—— 块

1. // 不推荐

2. if (test)

3. return false;

5. // 推荐

6. if (test) return false;

8. // 或

9. if (test) {

10. return false;

11. }

12.

13. // 不推荐

14. function() { return false; }

15.

16. // 推荐

17. function() {

18. return false;

19. }

—— 不要使用eval()

只用于解析序列化串 (如: 解析 RPC 响应)

eval() 会让程序执行的比较混乱, 当 eval() 里面包含用户输入的话就更加危险.

可以用其他更佳的, 更清晰, 更安全的方式写你的代码, 所以一般情况下请不要使用 eval().

当碰到一些需要解析序列化串的情况下(如, 计算 RPC 响应), 使用 eval 很容易实现.

—— js常见参数命名建议

元素：elem, 参数：arg，对象：obj，数组：arr, 指令：ret，长度：len

三、 jQuery性能优化

——总是从ID选择器开始继承

jQuery中最快的筛选器是ID筛选器，这是因为它直接和JS原生方法getElementById()对应。

——在class前使用tag

第二快是tag选择器，因为它和JS原生方法getElementsByTagName() 对应。jQuery中class选择器是最慢的，因为在IE浏览器下它会遍历所有的DOM节点。

综上两点：

1. 如果查找$('. class')，应使用$('#id > tag. class')来缩小DOM Tree的搜索范围。

2. #id 前面不要用tag来修饰。写成$('div#id')会降低性能，因为JS会遍历所有的div元素来查找id为'id'的哪一个节点:

3. #id1也不需要由#id2来修饰。写成$('#id2 #id1') 是画蛇添足，降低性能。

——缓存JQuery对象

要养成将jquery对象缓存进变量的习惯，避免进行多次查找，另外为了区分普通的JS对象和jQuery对象，建议在变量首字母前加上$符号。如:

1. var $box = $('#wrap').find('.box');

2. $box.addClass('class');

4. $.ajax({

5. $box.html('text');

6. });

——合理使用链式操作

可以减少对DOM Tree的访问以及代码量。如代码:

1. $('div').addClass('className').html('html code').click(function(){

2. alert(1);

3. });

——使用子查询

使用children(), find(), filter()来进行子查询。如代码:

1. $('div p').click(function(){

2. ……

3. });

5. // 上面替换成如下

6. $('div').find('p').click(function(){

7. ……

8. });

——减少DOM操作

当要进行DOM插入时，将所有元素在内存中封装成一个元素，一次性插入。

——自定义数据属性

dom结构上添加自定义属性：

1. <div id="wrap" data-foo="123"></div>

3. // 取数据：

4. $('#wrap').data('foo');

6. // 存数据：

7. $('#wrap').data('foo', {a:1,b:2} );

附录

命名规则：

1. 所有文件夹命名，如需要两个单词表示的，使用"-"中划线连接(如：img-plug)。

2. 所有文件(.html、.css、.js、图片)命名，如需要两个单词表示的，使用""下划线连接符(如：indexinfo.html)。

3. 所有素材图片应将文件名第一个单词命名为图片分类，第二个单词为图片名称，第三个单词可以是数字或其它内容，以下为图片命名细则：

1. icon_xxx.gif //图标文件名

3. btn_xxx.gif //按钮文件名

5. corner_xxx.gif //边角文件名

7. banner_xxx.gif //广告条文件名

9. bg_xxx.gif //背景图片文件名

10.

11. flash_xxx.gif //flash文件名

12.

13. temp_xxx.gif //临时测试用文件名

以上就是小编今天为大家分享的关于Web前端工程师要知道的前端开发代码规范!的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。

·END·

欢迎关注、评论、分享在看

微信公众号：web前端学习教程

以上是关于web前端开发代码规范!的主要内容，如果未能解决你的问题，请参考以下文章