代码规范

代码规范的目的是为了编写高质量的代码，提升协作效率，降低沟通成本和维护成本。

命名规范

命名严谨性

代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。

说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用

杜绝完全不规范的缩写，避免望文不知义：

反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。

HTML 规范

HTML 类型

推荐使用 HTML5 的文档类型申明： . （建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限）。

规定字符编码
IE 兼容模式
规定字符编码
doctype 大写

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta charset="UTF-8" />
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company" />
  </body>
</html>

语义化

HTML5 中新增很多语义化标签，所以优先使用语义化标签或添加语义化class，避免一个页面都是 div 或者 p 标签

<!-- 不推荐 -->
<div>
  <p></p>
</div>

<!-- 推荐 -->
<header></header>
<div class="header"></div>
<footer></footer>
<div class="footer"></div>

引号

使用双引号(" ") 而不是单引号(’ ')

<!-- 不推荐 -->
<div class='box'></div>

<!-- 推荐 -->
<div class="box"></div>

CSS 规范

命名

类名使用小写字母，以"-"分隔，英文单词不缩写，除非一看就能明白的单词。
id 采用驼峰式命名

选择器

1） css 选择器中避免使用标签名从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会存在潜在的问题。

2)）很多前端开发人员写选择器链的时候不使用直接子选择器（注：直接子选择器和后代选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到 DOM 末端的选择器，你应该总是考虑直接子选择器。

不推荐:

.content .title {
  font-size: 2rem;
}

样式顺序规范

建议相关的属性说明放在一组，提高代码的可读性。

布局方式、位置，相关属性（position, left, right, top, bottom, z-index）
盒模型，相关属性包括（display, float, width, height, margin, padding, border, border-radius）
文本排版，相关属性包括（font, color, background, line-height, text-align）
视觉外观，相关属性包括：(color, background, list-style, transform, animation)

由于定位可以从正常的文档流中移除元素，并且还能覆盖盒模型相关的样式，因此排在首位。而盒模型决定了组件的尺寸和位置，所以排第二位。文本和视觉外观对元素影响较小，所以放在第三，第四位；示例代码如下

.box {
  position: absolute;
  top: 0;
  left: 20%;
  z-index: 99;
  width: 100px;
  height: 100px;
  font-size: 20px;
  color:red;
  background-color: aqua;
}

尽量使用缩写属性

对于 background, font, padding, margin 这些简写形式的属性声明，可以缩写的尽量缩写，这样既精简代码又提高用户的阅读体验

.box {
  width: 100px;
  height: 100px;
  margin: 0 10px 20px 30px;
  font: italic bold 12px/30px arial,sans-serif;
}

小数点和单位

值在 -1 和 1 之间时去掉小数点前的 “0”，如果属性值为数字 0，不加任何单位；

.box {
  width: 100px;
  height: 100px;
  margin: 0 10px 20px 0;
  opacity: .5;
}

避免使用ID选择器及全局标签选择器

防止污染全局样式

/* 不推荐 */
#header{
  padding-bottom: 0px;
  margin: 0em;
}

/* 推荐 */
.header{
  padding-bottom: 0px;
  margin: 0em;
}

颜色值十六进制表示法

6 个字符的十六进制表示法，并始终使用小写的十六进制数字；16进制表示法与rgb表示法混用的情况，优先使用 16 进制表示法

.box {
  color: #ccc;
  background-color: #efefef;
}

Javascript规范

命名

1）采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束

错误命名： `_name / name_ / name$`

其中 method 方法命名必须是动词或者动词+名词形式

规范命名：`saveShopCarData /openShopCarInfoDialog`

错误命名：`save / open / show / go

2）常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。

规范命名： `MAX_STOCK_COUNT`

错误命名： `MAX_COUNT`

3）构造函数，大驼峰命名UpperCamelCase，首字母大写

function Student(name) {
  this .name = name;
}
var st =  new Student( 'tom' );

字符串

统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处：

// 不推荐
let str = 'foo';
let testDiv = "<div id='test'></div>";

// 推荐
let str = 'foo';
let testDiv = '<div id="test"></div>';

括号

下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

// 不推荐
if (condition) doSomething();

// 推荐
if (condition) {
  doSomething();
}

undefined 判断

永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串’undefined’对变量进行判断。

// 不推荐
if (person === undefined) {
    ...
}

// 推荐
if (typeof person === 'undefined') {
    ...
}

条件判断和循环最多三层

条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数，并写清楚注释。

this 的转换命名

对上下文 this 的引用只能使用’self’来命名

慎用 console.log

因 console.log 大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能

注释

1.单行注释

采用 // 方式注释：

// 这是我的博客名
let name = '听风是风';

2.多行注释

采用 /** */ 方式注释：

/**
 * 这是我的博客名
 * 听风是风，且听风吟
 */
let name = '听风是风';

3.函数注释

函数注释也是多行注释的一种，但要求提供函数功能说明，作者信息，参数说明(若有参数)，以及返回值(若有返回值)说明。

/**
 * @desc 用于计算两数之和
 * @author 听风是风
 * @param {Number} x 数字，用于加法计算
 * @param {Number} y 数字，用于加法计算
 * @return {Number} result 用于保存计算后的结果
 */
function add(x, y) {
    let result = x + y;
    return result;
};

jQuery规范

版本

由于项目要兼容IE9，推荐使用 1.9.1版本jquery

jQuery变量

所有用于存储、缓存jQuery对象的变量应该以$前缀命名。

最好把使用选择器返回的jQuery对象缓存到变量里，以便重用。使用驼峰法(opens new window)命名变量。

var $myDiv = $("#myDiv");
$myDiv.click(function(){...});

选择器

尽可能的使用效率更高的ID选择器，因为仅仅使用“document.getElementById()”实现。
使用类（Class）选择器时，不要使用元素类型（Element Type）

var $products = $("div.products"); // SLOW
var $products = $(".products"); // FAST

对于ID->child的方式，使用find的方式比嵌套选择器高效，因为第一个选择器不用使用Sizzle这个选择器引擎

// 不推荐
var $productIds = $("#products div.id");

// 推荐
var $productIds = $("#products").find("div.id");

选择器右边越具体越好，左边相反。

// 不推荐
$("div.data .gonzalez");

// 推荐
$(".data td.gonzalez");

避免过度具体

// 不推荐
$(".data table.attendees td.gonzalez");

// 推荐
$(".data td.gonzalez");

避免使用全局选择器

// 不推荐
$('div.container > *');

// 推荐
$('div.container').children();

避免隐含的全局选择器

// 不推荐
$('div.someclass :radio');

// 推荐
$('div.someclass input:radio');

不要使用重复、交叉使用ID选择器，因为单独的ID选择将使用更高效的document.getElementById()方式

// 不推荐
$('#outer #inner');
$('div#inner');
$('.outer-container #inner');

// 推荐
$('#inner');

DOM操作

处理现存元素之前，先剥离，处理之后再附加

var $myList = $("#list-container > ul").detach();
//...a lot of complicated things on $myList
$myList.appendTo("#list-container");

使用字符串连接符或者array.join()，比.append高效

// 不推荐
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
	$myList.append("<li>"+i+"</li>");
} 

// 推荐
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
	list += "<li>"+i+"</li>";
}
$myList.html(list);

// 更好
var array = [];
for(var i = 0; i < 10000; i++){
	array[i] = "<li>"+i+"</li>";
}
$myList.html(array.join(''));

不要操作空缺对象

// 不推荐
$("#nosuchthing").slideUp();

// 推荐
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
	$mySelection.slideUp();
}

事件

每个页面只使用一次document的ready事件，这样便于调试与行为流跟踪。
尽量不要使用匿名函数绑定事件，因为匿名函数不利于调试、维护、测试、重用

// 不推荐
$("#myLink").on("click", function(){...});

// 推荐
function myLinkClickHandler(){...}
$("#myLink").on("click", myLLinkClickHandler);

可能的时候，使用自定义事件，我们可以很方便的解除该事件绑定而不影响其他事件

// 推荐
$("#myLink").on("click.mySpecialClick", myEventHandler);
// 便于解绑
$("#myLink").unbind("click.mySpecialClick");

当你给多个对象绑定相同的事件时，可以使用事件委派

// 不推荐
$("#list a").on("click", myClickHandler);

// 推荐
$("#list").on("click", "a", myClickHandler);

链式操作

尽量使用链式写法而不是用变量缓存或者多次调用选择器方法；
当链式写法超过三次或者因为事件绑定变得复杂后，使用换行和缩进保持代码可读性；

$("#myDiv").addClass("error").show();
$("#myLink")
  .addClass("bold")
  .on("click", myClickHandler)
  .on("mouseover", myMouseOverHandler)
  .show();

其他

多个参数使用对象字面量存储；

// 不推荐
$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external");

// 推荐
$myLink.attr({
	href: "#",
	title: "my link",
	rel: "external"
});

不要将 CSS 写在 jQuery 里面；

// 不推荐
$("#mydiv").css({'color':red, 'font-weight':'bold'});

// 推荐
.error { color: red; font-weight: bold; }
$("#mydiv").addClass("error");

posted @ 2023-04-23 09:44 ℳℓ马温柔阅读(5) 评论(0) 收藏举报

刷新页面返回顶部

马温柔

你是什么样的人，便会遇到什么样的人；你想遇到什么样的人，就得先让自己成为那样的人。

代码规范

代码规范

命名规范

命名严谨性

HTML 规范

HTML 类型

语义化

引号

CSS 规范

命名

选择器

样式顺序规范

尽量使用缩写属性

小数点和单位

避免使用ID选择器及全局标签选择器

颜色值十六进制表示法

Javascript规范

命名

字符串

括号

undefined 判断

条件判断和循环最多三层

this 的转换命名

慎用 console.log

注释

jQuery规范

版本

jQuery变量

选择器

DOM操作

事件

链式操作

其他

公告