码迷，mamicode.com
首页 > Web开发 > 详细

Web前端开发代码规范（基础）

时间：2020-07-13 11:31:28      阅读：75      评论：0      收藏：0      [点我收藏+]

标签：维护   define   dom节点   代码规范   字符串   文件名   hit   否则   ie6   

一、 引言

对于一个多人团队来说，制定一个统一的规范是必要的，因为个性化的东西无法产生良好的聚合效果，规范化可以提高编码工作效率，使代码保持统一的风格，以便于代码整合和后期维护。

二、 HTML/CSS规范

2.1 浏览器兼容

根据公司业务要求而定，一般：主流程测试：Chrome 30+、IE9+；完整测试： Chrome 21、IE8+、360浏览器、微信webview/QQ手机浏览器。

2.2 html代码规范

2.2.1声明与编码

1、html头部声明统一：

<!DOCTYPE html>

2、页面编码统一：

<meta charset="UTF-8"> <!-- ie6也支持，无须担心 -->

2.2.2格式缩进

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

2.2.3 模块注释

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

<!-- start: XXX模块 -->
  …
<!-- end: XXX模块 -->

或者：

<!-- XXX模块 -->
  …
<!-- /XXX模块 -->

2.2.4标签与属性

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

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

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

// 禁止
<div id=mainframe> 或 <div id=‘mainframe‘>

// 推荐
<div id="mainframe">

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

// 禁止
<p><b></p></b>

// 推荐
<p><b></b></p>

// 禁止inline级标签嵌套block级标签
<span><div></div></span>

4、所有<、&、>等特殊符号（非标签一部分）用编码表示。< 编码成&lt; ，>编码成&gt;，&编码成&amp;

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

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

<h1>标题<h1>
<lable for="user">用户名：</lable>
<input name="username" id="user">

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

 

2.3 CSS代码规范

2.3.1 CSS引用规范

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

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

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

<link rel="stylesheet" href="xxx.css"> <!-- type="text/css"可以省略，清爽 -->

2.3.2 CSS注释规范

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

@charset "utf-8";

/**
 * @created :   2017/09/15
 * @author  :   Mr.Wang
 * @version :   v1.0
 * @desc    :   XX模块
 */

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

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

/* @info 商品信息区
----------------------------------------------------------------*/
.infoArea{}

/* 单行注释 */
.specArea{}

/* @price 商品价格区
----------------------------------------------------------------*/
.price{}
一、 引言
    对于一个多人团队来说，制定一个统一的规范是必要的，因为个性化的东西无法产生良好的聚合效果，规范化可以提高编码工作效率，使代码保持统一的风格，以便于代码整合和后期维护。

二、 HTML/CSS规范
2.1 浏览器兼容
根据公司业务要求而定，一般：
主流程测试：Chrome 30+、IE9+；
完整测试： Chrome 21、IE8+、360浏览器、微信webview/QQ手机浏览器。

2.2 html代码规范
2.2.1声明与编码
1、html头部声明统一：

<!DOCTYPE html>
2、页面编码统一：

<meta charset="UTF-8"> <!-- ie6也支持，无须担心 -->
2.2.2格式缩进
html编码统一格式化显示，使用一个Tab键进行分层缩进 (2个空格宽度)，使整个页面结构层次清晰，方便阅读和修改。

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

<!-- start: XXX模块 -->
  …
<!-- end: XXX模块 -->
或者：

<!-- XXX模块 -->
  …
<!-- /XXX模块 -->
2.2.4标签与属性
1、由于html标签和属性不区别大小写，所有建议都采用小写，尤其是自定义标签和属性名，否定js中取不到，如：

<div data-bgColor="red"></div>
$(‘div‘).data(‘bgColor‘);  

// 取不到，已自动被浏览器转成了data-bgcolor

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

// 禁止
<div id=mainframe> 或 <div id=‘mainframe‘>

// 推荐
<div id="mainframe">
3、所有标签必须采用合理嵌套。

// 禁止
<p><b></p></b>

// 推荐
<p><b></b></p>

// 禁止inline级标签嵌套block级标签
<span><div></div></span>
4、所有<、&、>等特殊符号（非标签一部分）用编码表示。< 编码成&lt; ，>编码成&gt;，&编码成&amp;

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

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

<h1>标题<h1>
<lable for="user">用户名：</lable>
<input name="username" id="user">
在语义不明显，既可用div也可用p时，应优先考虑p标签。

2.3 CSS代码规范
2.3.1 CSS引用规范
1、所有CSS均为外部调用，不得在页面书写任何内部样式或行内样式；

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

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

<link rel="stylesheet" href="xxx.css"> <!-- type="text/css"可以省略，清爽 -->

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

@charset "utf-8";

/**
 * @created :   2017/09/15
 * @author  :   Mr.Wang
 * @version :   v1.0
 * @desc    :   XX模块
 */
关于"version"，如果对代码有修改更新version版本号，并添加相关注释。

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

/* @info 商品信息区
----------------------------------------------------------------*/
.infoArea{}

/* 单行注释 */
.specArea{}

/* @price 商品价格区
----------------------------------------------------------------*/
.price{}
一、 引言
    对于一个多人团队来说，制定一个统一的规范是必要的，因为个性化的东西无法产生良好的聚合效果，规范化可以提高编码工作效率，使代码保持统一的风格，以便于代码整合和后期维护。

二、 HTML/CSS规范
2.1 浏览器兼容
根据公司业务要求而定，一般：
主流程测试：Chrome 30+、IE9+；
完整测试： Chrome 21、IE8+、360浏览器、微信webview/QQ手机浏览器。

2.2 html代码规范
2.2.1声明与编码
1、html头部声明统一：

<!DOCTYPE html>
2、页面编码统一：

<meta charset="UTF-8"> <!-- ie6也支持，无须担心 -->
2.2.2格式缩进
html编码统一格式化显示，使用一个Tab键进行分层缩进 (2个空格宽度)，使整个页面结构层次清晰，方便阅读和修改。

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

<!-- start: XXX模块 -->
  …
<!-- end: XXX模块 -->
或者：

<!-- XXX模块 -->
  …
<!-- /XXX模块 -->
2.2.4标签与属性
1、由于html标签和属性不区别大小写，所有建议都采用小写，尤其是自定义标签和属性名，否定js中取不到，如：

<div data-bgColor="red"></div>
$(‘div‘).data(‘bgColor‘);  

// 取不到，已自动被浏览器转成了data-bgcolor

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

// 禁止
<div id=mainframe> 或 <div id=‘mainframe‘>

// 推荐
<div id="mainframe">
3、所有标签必须采用合理嵌套。

// 禁止
<p><b></p></b>

// 推荐
<p><b></b></p>

// 禁止inline级标签嵌套block级标签
<span><div></div></span>
4、所有<、&、>等特殊符号（非标签一部分）用编码表示。< 编码成&lt; ，>编码成&gt;，&编码成&amp;

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

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

<h1>标题<h1>
<lable for="user">用户名：</lable>
<input name="username" id="user">
在语义不明显，既可用div也可用p时，应优先考虑p标签。

2.3 CSS代码规范
2.3.1 CSS引用规范
1、所有CSS均为外部调用，不得在页面书写任何内部样式或行内样式；

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

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

<link rel="stylesheet" href="xxx.css"> <!-- type="text/css"可以省略，清爽 -->

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

@charset "utf-8";

/**
 * @created :   2017/09/15
 * @author  :   Mr.Wang
 * @version :   v1.0
 * @desc    :   XX模块
 */
关于"version"，如果对代码有修改更新version版本号，并添加相关注释。

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

/* @info 商品信息区
----------------------------------------------------------------*/
.infoArea{}

/* 单行注释 */
.specArea{}

/* @price 商品价格区
----------------------------------------------------------------*/
.price{}

2.3.3 CSS书写规范

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

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

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

技术图片
技术图片

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

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

// 不推荐
.canbox{
    background-color: #ff6600;
    background-image: url("/img/xxx.png");
}

// 推荐(合并、去除引号)
.canbox {
    background: #f60 url(/img/xxx.png); 
}

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

// 不推荐
.wrap{
    margin: 0px 0px 5px 8px;
}

// 推荐
.wrap {
    margin: 0 0 5px 8px;
}

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

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

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

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

如果要显示省略号则不让其换行：

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

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

三、 JavaScript规范

3.1 JS文件引用

1、引入格式：

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

<script src="model.js"></script>

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

<html>
<body>
    <div>页面内容….</div>
    <script src="model.js"></script>
</body>
</html>

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

3.2 JS代码缩进

3.2.1 整体层次

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

(function() {
    var i = 0;
    function innerFun() {
        var j = 0;
        ……
    }
});

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

3.2.2 局部间隔

// 不推荐
var arr=[1,2],str=‘hello‘+‘Lucy‘;

var myfun=function(arg){
   //todo…
}

// 推荐
var arr = [1,2], 
    str = ‘hello‘ + ‘Lucy‘;

var myfun = function(arg) {
   //todo…
}

3.3 JS注释规则

3.3.1 文件头部注释

/**
 * @created :  2017/09/15
 * @author  :  Mr.Wang
 * @version :  v1.0
 * @desc    :  当前js模块功能描述
 * @e.g.    :  方法用例，如：$(‘.title‘).tip();
 */

3.3.2 方法注释及单行注释

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

/**
* 此方法是用于解析tpl模块
* 通过分析html中结构…
*/

2、单行注释

var funName = function(arg1, arg2) {
    this.arg1 = arg1;

    // 单行注释说明(上面添加一空行, //与说明之间空一格)
    this.arg2 = arg2;
};

3.4 命名规则

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

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

// 不推荐
var is_my_object = {};
var is-my-object = {};

// 推荐
var isMyObject = {};

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

// 不推荐
var bad = new user({
    name: ‘nope‘
});

// 推荐
var good = new User({
    name: ‘nope‘
});

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

3.5 编码模式

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

(function(){
    ‘use strict‘;
    function innerFun(){
        var j = 0;
        ……
    }
});

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

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

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

// 严格模式下会抛出异常
(function() {
    some = ‘foo‘;
}());

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

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

window.color = ‘red‘;

function getColor() {
    console.log(this.color);
}

// 在严格模式中会报错, 非严格模式中则提示red
getColor();

3、防止重名。

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

// 重复的变量名，在严格模式下会报错。
function doSomething(value1, value2, value1) {
   //code
}

// 重复的对象属性名，在严格模式下会报错。
var object = {
    foo: ‘bar‘,
    foo: ‘baz‘
};

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

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

var person = {};

Object.defineProperty(person, ‘name‘ {
    writable: false,
    value: ‘Nicholas‘
});

// 在非严格模式时，沉默的失败，在严格模式则抛出异常
person.name = ‘John‘;

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

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

3.6 推崇建议

—— 变量

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

—— 逗号

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

// 不推荐
var hero = {
  firstName: ‘Kevin‘,
  lastName: ‘Flynn‘,
};

// 推荐
var hero = {
  firstName: ‘Kevin‘,
  lastName: ‘Flynn‘
};

—— 分号

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

;(function(){
   var i = 0;
   function innerFun(){
     var j = 0;
     ……
   }
});

—— {},[]

// 不推荐
var item1 = new Object(),  item2 = new Array();

// 推荐
var item1 = {},  item2 = [];

（解释：new关键字的使用 除了在需要实例化一个对象，或罕见的需要延时加载数据的情况外，基本上不需要使用new关键字。在Javascript里分配大量的new变量地址是一项很慢的操作，为了效率起见，应该始终使用对象符号。）

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

// 不推荐
var name = "Bob Parr";

// 推荐
var name = ‘Bob Parr‘;

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

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

—— 块

// 不推荐
if (test)
  return false;

// 推荐
if (test) return false;

// 或
if (test) {
  return false;
}

// 不推荐
function() { return false; }

// 推荐
function() {
  return false;
}

—— 不要使用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对象，建议在变量首字母前加上$符号。如:

var $box = $(‘#wrap‘).find(‘.box‘);
$box.addClass(‘class‘);

$.ajax({
    $box.html(‘text‘);
});

——合理使用链式操作

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

$(‘div‘).addClass(‘className‘).html(‘html code‘).click(function(){alert(1);});

——使用子查询

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

$(‘div p‘).click(function(){
   ……
});

// 上面替换成如下
$(‘div‘).find(‘p‘).click(function(){
   ……
});

——减少DOM操作

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

——自定义数据属性

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

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

// 取数据：
$(‘#wrap‘).data(‘foo‘);

// 存数据：
$(‘#wrap‘).data(‘foo‘, {a:1,b:2} );

附录

命名规则

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

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

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

icon_xxx.gif   //图标文件名

btn_xxx.gif    //按钮文件名

corner_xxx.gif  //边角文件名

banner_xxx.gif  //广告条文件名

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

flash_xxx.gif     //flash文件名

 


需要的可以添加 还可以领取2020年最新前端基础精讲视频教程分享！我们的前端学习Q裙：（518672693） 

Web前端开发代码规范（基础）

标签：维护   define   dom节点   代码规范   字符串   文件名   hit   否则   ie6   

原文地址：https://www.cnblogs.com/bjy216326/p/13292121.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！