前端编码规范

程序员文章站 2022-08-09 09:00:09

为了统一代码风格，提高代码的可读性和可维护性，特制定此编码规范。统一规则 HTML 编码规范标签名称小写正确：错误：属性名小写，属性值使用双引号引起来正确：错误：确保页面的元素 ID 唯一性在一个页面中，要保证元素 ID 唯一。非标准属性名，使用 data- 前缀，并且多个单词之 ......

为了统一代码风格，提高代码的可读性和可维护性，特制定此编码规范。

统一规则

变量命名使用英文单词，不允许使用汉语拼音。
代码块缩进使用 4 个空格，不建议使用 tab 键缩进。
文件名不允许使用中文字符，建议文件名仅包含大小写字母、数字、英文中划线（-）和英文下划线（_）。
在使用某个文件的时候，在代码中必须准确的使用该文件的名称，大小写要正确。因为开发环境是 windows 的同学，系统本身对于文件名是大小写是不敏感的，而测试与生产环境是 linux 系统，大小写敏感，如果使用文件时拼写的大小写不准确，会导致开发过程中没问题，但是上到测试和生产的时候发生错误。
源代码文本文件保存一律采用 utf-8 的格式，并且不能包含 bom。
类名、变量名应为名词。方法名、函数名应为动词或者动宾结构。

html 编码规范

标签名称小写

正确：

<div>这里是一个 div 标签。</div>

错误：

<div>这里是一个 div 标签。</div>

属性名小写，属性值使用双引号引起来

正确：

<div id="div-1">这个 div 的 id 是 div-1 </div>

错误：

<div id=div-1>这个 div 的 id 是 div-1 </div>

确保页面的元素 id 唯一性

在一个页面中，要保证元素 id 唯一。

非标准属性名，使用 data- 前缀，并且多个单词之间使用中划线分隔

正确：

<div id="div-1" data-non-standard-attribute="my-value">这个 div 具有一个非标准的属性。 </div>

错误：

<div id="div-1" nonstandardattribute="my-value">这个 div 具有一个非标准的属性。</div>

正确的 doctype

正在筹划中的云班课 web 2.0 版本中，我们强制用户使用新版本支持 html5 的浏览器。强制支持 html5 的页面要正确的使用 doctype。

html 源代码的第一行应该为：

<!doctype html>

禁止直接使用元素属性设置元素的大小和位置

元素的大小和位置实际上属于展示层面，在 html5 规范中，html 负责数据，css 负责展示。所以除了几个特殊的元素（<canvas>），其他元素的大小和位置一律使用 css 样式来完成，禁止只用元素的 width, height 等属性来指定。

正确：

<div style="width: 100px; height: 100px;">我是一个 100px x 100px 的正方形</div>

错误：

<div width="100" height="100">我是一个 100px x 100px 的正方形</div>

需要闭合的标签，必须闭合

对于需要闭合的 html 标签，必须进行闭合标记，哪怕标签中是没有任何内容。

正确：

<div></div>

错误：

<div/>

对于无需自闭合的标签，不允许自闭合

正确：

<input type="text" name="your_name">

错误：

<input type="text" name="your_name"/>

禁止 img 的 src 取值为空

延迟加载的图片也要增加默认的 src

正确：

<img src="http://www.mosoteach.cn/web/common/images/dummy.png" class="lazy-load" alt="班课封面">

错误：

<img src="" class="lazy-load" alt="班课封面">

javascript 编码规范

命名总体规范

变量命名，首字母小写驼峰法：variablenamelikethis
函数命名，首字母小写驼峰法：functionnamelikethis
类命名，首字母大写驼峰法：classnamelikethis
常量，全大写，下划线分隔：const_like_this

变量声明

变量必须使用 var 声明：

正确：

var defaultscore = 1;
var users = [];

错误：

defaultscore = 1;
users = [];

总是使用分号

虽然 javascript 允许在不影响代码含义的前提下省略行尾分号（;），但是要求必须使用分号。

正确：

var domobject = document.getelementbyid("div-1");
domobject.onclick = function(evt) {
    // your code goes here
};

错误：

var domobject = document.getelementbyid("div-1");
domobject.onclick = function(evt) {
    // your code goes here
}
// 上面的代码是一个赋值表达式，所以不能省略末尾的分号

合理使用空格和空行

赋值运算、逻辑运算符两侧使用空格：var somevar = 1;， if(foo> bar)
函数参数之间使用空格：somefunc(param1, param2, param3);
for 循环中的三段之间空格：for (var i = 0; i < 10; i++)

花括号

左花括号跟随上一行代码，右花括号独占一行。如果是内嵌匿名函数，可以把花括号和圆括号写在一行。

例子 1：

for (var i = 0, n = 10; i < n; i++) {
    // your code goes here
}

例子 2：

$(domobject).bind("click", function(evt) {
    // your code goes here
});

类注释

每个类的定义都要附带一份注释，描述类的功能和用法。也需要说明构造器参数。如果该类继承自其它类，应该使用 @extends 标记。如果该类是对接口的实现，应该使用 @implements 标记。

/**
 * class making something fun and easy.
 * @param {string} arg1 an argument that makes this more interesting.
 * @param {array.<number>} arg2 list of numbers to be processed.
 * @constructor
 * @extends {goog.disposable}
 */
project.myclass = function(arg1, arg2) {
  // ...
};
goog.inherits(project.myclass, goog.disposable);

方法注释

提供参数的说明。使用完整的句子，并用第三人称来书写方法说明。

/**
 * converts text to some completely different text.
 * @param {string} arg1 an argument that makes this more interesting.
 * @return {string} some return value.
 */
project.myclass.prototype.somemethod = function(arg1) {
  // ...
};

/**
 * operates on an instance of myclass and returns something.
 * @param {project.myclass} obj instance of myclass which leads to a long
 *     comment that needs to be wrapped to two lines.
 * @return {boolean} whether something occured.
 */
function somemethod(obj) {
  // ...
}

常用的注释标记及其说明

@param

@param {type} 变量名描述 <br>

/**
 * queries a baz for items.
 * @param {number} groupnum subgroup id to query.
 * @param {string|number|null} term an itemname,
 *     or itemid, or null to search everything.
 */
goog.baz.prototype.query = function(groupnum, term) {
  // ...
};

@return

@return {type} 描述

/**
 * @return {string} the hex id of the last item.
 */
goog.baz.prototype.getlastid = function() {
  // ...
  return id;
};

@author

@author youname@yourdomain.com

@type

@type type
@type {type}

/**
 * the message hex id.
 * @type {string}
 */
var hexid = hexid;

css 编码规范

命名规范

css 中的类、id 等选择器的名字一律小写字母，多个单词之间使用短横线（-）分隔，例如：

正确：

.user-not-login {
    width: 10px;
    background-color: gray;
}

错误：

.usernotlogin {
    width: 10px;
    background-color: gray;
}

.usernotregister {
    width: 10px;
    background-color: gray;
}

大花括号

样式内容较少的，可以将选择器、花括号以及样式写在一行。样式内容较多的，建议写在多行，并且左大花括号和选择器位于一行。

选择器名称和左大花括弧之间保留一个空格：

正确：

.thin-line { border: 1px solid gray; }
.hint-box {
    background-color: yellow;
    color: #646464;
    font-size: 12px;
    line-height: 150%;
}

上一篇： javaScript删除对象、数组中的null、undefined、空对象、空数组方法

下一篇：可怜天下父母心！慈禧太后不为人知的另一面！

前端编码规范

统一规则

html 编码规范

标签名称小写

属性名小写，属性值使用双引号引起来

确保页面的元素 id 唯一性

非标准属性名，使用 data- 前缀，并且多个单词之间使用中划线分隔

正确的 doctype

禁止直接使用元素属性设置元素的大小和位置

需要闭合的标签，必须闭合

对于无需自闭合的标签，不允许自闭合

禁止 img 的 src 取值为空

javascript 编码规范

命名总体规范

变量声明

总是使用分号

合理使用空格和空行

花括号

类注释

方法注释

常用的注释标记及其说明

css 编码规范

命名规范

大花括号

前端培训要多少钱（web前端培训班教程）

使用Servlet实现前端连接数据库

前端是什么工作（小白学前端还是后端）

eclipse编码格式设置在哪（分享eclipse编码格式设置快捷键）

前端页面优化主要从哪些方面进行（3个核心优化技巧）

python实现中文转换url编码的方法

spring mvc DispatcherServlet之前端控制器架构详解

notepad++怎么设置默认打开编码格式为UTF-8无BOM格式?

Django读取Mysql数据并显示在前端的实例

移动HTML5前端框架—MUI的使用