前端必识书写规范

最新推荐文章于 2023-02-16 15:06:50 发布

guanguan0_0

最新推荐文章于 2023-02-16 15:06:50 发布

阅读量429

点赞数

分类专栏： html/css JS、jQuery 前端开发文章标签：前端开发书写规范 H5书写规范 JS书写规范 CSS书写规范

本文链接：https://blog.csdn.net/guanguan0_0/article/details/83062581

版权

JS、jQuery 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

前端开发

26 篇文章 1 订阅

订阅专栏

html/css

18 篇文章 0 订阅

订阅专栏

命名规则：

1、项目命名：全部采用小写，以下划线分割

my_project_name

2、目录命名：参照项目命名规则，有复数结构时，要采用复数命名法

scripts，styles，images，data_models

3、JS命名：参照项目命名规则

list_table.js

4、css,scss命名规则：参照项目命名规则

list_table.css

5、HTML文件命名：参照项目命名规则

error_report.html

HTML:

1、语法：

缩进使用4个空格；
嵌套的节点应该缩进；
在属性上使用双引号，不要使用单引号；
属性名全小写，用中划线做分隔符；
不要在自动闭合标签结尾处使用斜线；
不要忽略可选的关闭标签，如</li>,</body>

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    <head>
    <body>
        <img src="images/logo.png" alt="company">

        <h1 class="hello-world">Hello,world!</h1>
    </body>
</html>

2、HTML doctype

在页面开头使用这个简单的doctype来启用标准模式，使其在每个浏览器中尽可能一直的展示
按照惯例，doctype大写

3、lang属性

根据H5规范：应该在html标签上加上lang属性，这会给语音工具和翻译工具帮助，告诉他们应该怎么发音和翻译

<!DOCTYPE html>
<html lang="en-us">
        ...
</html>

4、字符编码

通过声明一个明确的字符编码，让浏览器轻松、快速的确定合适网页内容的渲染方式，通常指定为‘UFT-8’

<!DOCTYPE html>
<html>              
    <head>
        <meta charset="UFT-8">
    </head>
        ...
</html>

5、IE兼容模式

用<meta>标签可以指定页面应该用什么版本的IE来渲染；
不同doctype在不同浏览器下回触发不同的渲染模式

<!DOCTYPE html>

<html>

        <head>

                <meta http-equiv="X-UA-Compatible" content="IE=Edge">

        </head>

        ...

</html>

6、引入CSS、JS

通常在引入CSS和JS时不需要指明type，因为text/css和text/javascript分别是他们的默认值

<link rel="stylesheet" href="css/base.css">

<style>

    ...

</style>



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

<script>

    ...

</script>

7、属性顺序

属性应该按照特定的顺序出现以保证易读性；

class
id
name
data-*
src,for,type,href,value,max-length,max,min,pattern
placeholder,title,alt
aria-*,role
required,readonly,disabled

class是为高可复用组件设计的，所以应该放在第一位；

id更加具体且应该尽量少用

8、boolean属性

boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是H5不需要；
boolean属性的存在表示取值为true，不存在表示取值为false

<input type="text" disabled>



<input type="checkbox" value="1" checked>



<select>

        <option value="1" selected>1</option>

</select>

9、JS生成标签

在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差，应该尽量避免

10、减少标签数量

在编写HTML代码时，需要尽量避免多余的父节点；
很多时候，需要通过迭代和重构来使HTML变得更少

<!-- 父标签多余 -->

<span class="avator">
     <img src="...">
</span>

<!-- 更好 -->
<img class="avator" src="...">

11、实用高于完美

尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

CSS、SCSS：

1、缩进

使用4个空格

2、分号

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

3、空格

以下几种情况不需要空格：

属性名后
多个规则的分隔符','前
!important的'!'后
属性值中'('后和')'前
行末不要有多余的空格

以下几种情况需要空格：

属性值钱
选择器'>'，'+'，'~'前后
'{' 前
!important的'!'前
@else前后
属性值中的','后
注释'/*'后和'*/'前

.avator{

width: 100px;

height: 100px;

border-radius: 50%;

color: red !important;

background-color: rgba(0, 0, 0, .5);

}

.header,

.title {

font-size: 16px;

}

.parent > .child {

float:left;

}

/* good */

@if{

...

} @else{

...

}

4、空行

以下几种情况需要空行：

文件最后保留一个空行；
'}'后最好跟一个空行，包括scss中嵌套的规则；
属性之间需要适当的空行，具体见属性声明顺序

5、换行

以下几种情况不需要换行：

'{'前

以下几种情况需要换行：

'{'后和'}'前；
每个属性独占一行；
多个规则的分隔符','后

6、注释

注释统一用'/* ... */'；
缩进与下一行代码保持一致；
可以位于一行代码的末尾，与代码之间隔一个空格

7、引号

最外层统一使用双引号；
url的内容要用引号；
属性选择器中的属性值需要引号

.ele:after{

content: "";

background-image: url("logo.png");

}

li[data-type="single"] {

...

}

8、命名

类名使用小写字母，以中划线分割；
id采用驼峰式命名；
scss中的变量、函数、混合、placeholder采用驼峰式命名

/* class */

.element-content {

...

}

/* id */

#myDialog {

...

}

/* 变量 */

$baseFont: 16px;

/* 函数 */

@function pxToRem($px) {

...

}

/* 混合 */

@mixin centerBlock {

...

}

/* placeholder */

%myDialog {

...

}

9、属性声明顺序

相关属性声明按照下面的顺序做分组处理，组之间需要一个空格

// 下面是推荐的属性的顺序[

[

"display",

"visibility",

"float",

"clear",

"overflow",

"overflow-x",

"overflow-y",

"clip",

"zoom"

[

"table-layout",

"empty-cells",

"caption-side",

"border-spacing",

"border-collapse",

"list-style",

"list-style-position",

"list-style-type",

"list-style-image"

[

"-webkit-box-orient",

"-webkit-box-direction",

"-webkit-box-decoration-break",

"-webkit-box-pack",

"-webkit-box-align",

"-webkit-box-flex"

[

"position",

"top",

"right",

"bottom",

"left",

"z-index"

[

"margin",

"margin-top",

"margin-right",

"margin-bottom",

"margin-left",

"-webkit-box-sizing",

"-moz-box-sizing",

"box-sizing",

"border",

"border-width",

"border-style",

"border-color",

"border-top",

"border-top-width",

"border-top-style",

"border-top-color",

"border-right",

"border-right-width",

"border-right-style",

"border-right-color",

"border-bottom",

"border-bottom-width",

"border-bottom-style",

"border-bottom-color",

"border-left",

"border-left-width",

"border-left-style",

"border-left-color",

"-webkit-border-radius",

"-moz-border-radius",

"border-radius",

"-webkit-border-top-left-radius",

"-moz-border-radius-topleft",

"border-top-left-radius",

"-webkit-border-top-right-radius",

"-moz-border-radius-topright",

"border-top-right-radius",

"-webkit-border-bottom-right-radius",

"-moz-border-radius-bottomright",

"border-bottom-right-radius",

"-webkit-border-bottom-left-radius",

"-moz-border-radius-bottomleft",

"border-bottom-left-radius",

"-webkit-border-image",

"-moz-border-image",

"-o-border-image",

"border-image",

"-webkit-border-image-source",

"-moz-border-image-source",

"-o-border-image-source",

"border-image-source",

"-webkit-border-image-slice",

"-moz-border-image-slice",

"-o-border-image-slice",

"border-image-slice",

"-webkit-border-image-width",

"-moz-border-image-width",

"-o-border-image-width",

"border-image-width",

"-webkit-border-image-outset",

"-moz-border-image-outset",

"-o-border-image-outset",

"border-image-outset",

"-webkit-border-image-repeat",

"-moz-border-image-repeat",

"-o-border-image-repeat",

"border-image-repeat",

"padding",

"padding-top",

"padding-right",

"padding-bottom",

"padding-left",

"width",

"min-width",

"max-width",

"height",

"min-height",

"max-height"

[

"font",

"font-family",

"font-size",

"font-weight",

"font-style",

"font-variant",

"font-size-adjust",

"font-stretch",

"font-effect",

"font-emphasize",

"font-emphasize-position",

"font-emphasize-style",

"font-smooth",

"line-height",

"text-align",

"-webkit-text-align-last",

"-moz-text-align-last",

"-ms-text-align-last",

"text-align-last",

"vertical-align",

"white-space",

"text-decoration",

"text-emphasis",

"text-emphasis-color",

"text-emphasis-style",

"text-emphasis-position",

"text-indent",

"-ms-text-justify",

"text-justify",

"letter-spacing",

"word-spacing",

"-ms-writing-mode",

"text-outline",

"text-transform",

"text-wrap",

"-ms-text-overflow",

"text-overflow",

"text-overflow-ellipsis",

"text-overflow-mode",

"-ms-word-wrap",

"word-wrap",

"-ms-word-break",

"word-break"

[

"color",

"background",

"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",

"background-color",

"background-image",

"background-repeat",

"background-attachment",

"background-position",

"-ms-background-position-x",

"background-position-x",

"-ms-background-position-y",

"background-position-y",

"-webkit-background-clip",

"-moz-background-clip",

"background-clip",

"background-origin",

"-webkit-background-size",

"-moz-background-size",

"-o-background-size",

"background-size"

[

"outline",

"outline-width",

"outline-style",

"outline-color",

"outline-offset",

"opacity",

"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",

"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",

"-ms-interpolation-mode",

"-webkit-box-shadow",

"-moz-box-shadow",

"box-shadow",

"filter:progid:DXImageTransform.Microsoft.gradient",

"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",

"text-shadow"

[

"-webkit-transition",

"-moz-transition",

"-ms-transition",

"-o-transition",

"transition",

"-webkit-transition-delay",

"-moz-transition-delay",

"-ms-transition-delay",

"-o-transition-delay",

"transition-delay",

"-webkit-transition-timing-function",

"-moz-transition-timing-function",

"-ms-transition-timing-function",

"-o-transition-timing-function",

"transition-timing-function",

"-webkit-transition-duration",

"-moz-transition-duration",

"-ms-transition-duration",

"-o-transition-duration",

"transition-duration",

"-webkit-transition-property",

"-moz-transition-property",

"-ms-transition-property",

"-o-transition-property",

"transition-property",

"-webkit-transform",

"-moz-transform",

"-ms-transform",

"-o-transform",

"transform",

"-webkit-transform-origin",

"-moz-transform-origin",

"-ms-transform-origin",

"-o-transform-origin",

"transform-origin",

"-webkit-animation",

"-moz-animation",

"-ms-animation",

"-o-animation",

"animation",

"-webkit-animation-name",

"-moz-animation-name",

"-ms-animation-name",

"-o-animation-name",

"animation-name",

"-webkit-animation-duration",

"-moz-animation-duration",

"-ms-animation-duration",

"-o-animation-duration",

"animation-duration",

"-webkit-animation-play-state",

"-moz-animation-play-state",

"-ms-animation-play-state",

"-o-animation-play-state",

"animation-play-state",

"-webkit-animation-timing-function",

"-moz-animation-timing-function",

"-ms-animation-timing-function",

"-o-animation-timing-function",

"animation-timing-function",

"-webkit-animation-delay",

"-moz-animation-delay",

"-ms-animation-delay",

"-o-animation-delay",

"animation-delay",

"-webkit-animation-iteration-count",

"-moz-animation-iteration-count",

"-ms-animation-iteration-count",

"-o-animation-iteration-count",

"animation-iteration-count",

"-webkit-animation-direction",

"-moz-animation-direction",

"-ms-animation-direction",

"-o-animation-direction",

"animation-direction"

[

"content",

"quotes",

"counter-reset",

"counter-increment",

"resize",

"cursor",

"-webkit-user-select",

"-moz-user-select",

"-ms-user-select",

"user-select",

"nav-index",

"nav-up",

"nav-right",

"nav-down",

"nav-left",

"-moz-tab-size",

"-o-tab-size",

"tab-size",

"-webkit-hyphens",

"-moz-hyphens",

"hyphens",

"pointer-events"

]]

9、颜色

颜色16进制用小写字母；
颜色16进制尽量用简写

.ele {

color: #abcdef;

background: #000;

}

10、属性简写

属性简写需要你非常清楚属性值的正确顺序，而且大多情况下并不需要设置属性简写中包含的所有值，所以建议尽量分开声明会更加清晰。margin和padding相反，需要使用简写；

常见的属性简写包括：

font
background
transition
animation

.ele {

transition-delay: 2s;

transition-timing-function: linear;

transition-duration: 1s;

transition-property: opacity;

}

.ele {

transition: opacity 1s linear 2s;

}

11、媒体查询

尽量将媒体查询的规则靠近与他们相关的属性，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们

@media (min-width: 480px) {

.ele {

...

}

12、SCSS相关

提交代码中不要有@debug；
声明顺序：

@extend
不包含@content的@include
包含@content的@include
自身属性
嵌套规则

@import引入的文件不需要开头的'_'和结尾的'.scss';
嵌套最多不能超过5层；
@extend中使用placeholder选择器;
去掉不必要的腹肌引用符号'&'

@import "dialog";

.fatal {

@extend %error;

}

.ele {

> .dialog {

...

}

13、杂项

不允许有空的规则；
元素选择器用小写字母；
去掉小数点前面的0；
去掉数字中不必要的小数点和末尾的0；
属性值'0'后不要加单位；
同个属性不同前缀的写法需要在垂直方向保持对齐；
无前缀的标准属性应该写在有前缀的属性后面；
不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系；
不要在一个文件里出现两个相同的规则；
用border: 0;代替border: none;
选择器不要超过四层（在scss中如果超过4层应该考虑用嵌套的方式来写）；
发布的代码中不要有@import；
尽量少用'*'选择器。

JavaScript:

1、缩进

使用4个空格

2、单行长度

不超过80

3、分号

以下几种情况后需要加分号：

变量声明
表达式
return
throw
break
continue
do-while

var x = 1;

x++;

do {

x++

} while (x < 10);

4、空格

以下几种情况不需要空格：

对象的属性名后
前缀一元运算符后
后缀一元运算符前
函数调用括号前
无论是函数声明还是函数表达式，'('前不要空格
数组的'['后的']'前
对象的'{'后的'}'前
运算符的'('后的')'前

以下几种情况需要空格：

二元运算符前后
三元运算符'?:'前后
代码块'{'前
下列关键字前：else，while，catch，finally
下列关键字后：if，else，for，while，do，switch，case，try，catch，finally，with，return，typeof
单行注释'//'后（若单行注释和代码同行，则'//'前也需要），多行注释'*'后；
对象的属性值钱
for循环，分号后留个空格，前置条件如果有多个，逗号后留个空格
无论是函数声明还是函数表达式，'{'前一定要有空格
函数的参数之间

var a = {

b: 1;

}

x++;

y++;

z = x ? 1 : 2;

var a = (1 + 2) * 3;

var doSomething = function(a, b, c) {

...

}

var doSomething(item);

for (i = 0; i < 6; i++) {

x++;

}

5、空行

以下几种情况需要空行：

变量声明后（当变量声明在代码块最后一行时，无需空格）；
注释前（当注释在代码块的第一行时，无需空格）；
代码块后（在函数调用、数组、对象中则无需空格）；
文件最后保留一个空行

for (var i = 0; i < 2; i++) {

if (true) {

return false;

}

continue;

}

// 代码块后需要空行

var obj = {

foo: function() {

return 1;

bar: function() {

return 2;

}

// 函数、数组、对象中无需空格

func(

function() {

a++;

);

var func = [

function() {

a++;

];

var foo = {

function(){

a++;

}

6、换行

换行的地方，行末必须有','或运算符

以下几种情况不需要换行：

下列关键字后：else，catch，finally
代码块'{'前

以下几种情况需要换行：

代码块'{'后和'}'前
变量赋值后

var a,

foo = 7,

b, c, bar = 8;

7、单行注释

双斜杠后，必须跟一个空格
缩进与下一行代码保持一致
可位于一个代码行的末尾，与代码间隔一个空格

if (cond) {

// lalalallalalal

allow();

}

var a = 7; // 变量定义

8、多行注释

最少三行，'*'后跟一个空格，建议在以下情况下使用：

难以理解的代码段
可能存在错误的代码段
浏览器特殊的HACK代码
业务逻辑强相关的代码

* allalalall

var x = 1;

9、文档注释

建议在以下情况下使用：

所有常量
所有函数
所有类

/**

* @func

* @desc 一个带参数的函数

* @param {string} a - 参数a

* @param {number} b=1 - 参数b默认值为1

* @param {string} c=1 - 参数c有两种支持的取值</br>1—表示x</br>2—表示xx

* @param {object} d - 参数d为一个对象

* @param {string} d.e - 参数d的e属性

* @param {string} d.f - 参数d的f属性

* @param {object[]} g - 参数g为一个对象数组

* @param {string} g.h - 参数g数组中一项的h属性

* @param {string} g.i - 参数g数组中一项的i属性

* @param {string} [j] - 参数j是一个可选参数

function foo(a, b, c, d, g, j) {

...

}

10、引号

最外层统一使用单引号

var x = 'foo',

y = '<div class="test"></div>';

11、变量命名

标准变量采用驼峰式命名（对象属性除外）
'ID'在变量名中全大写
'URL'在变量名中全大写
'Android'在变量名中大写第一个字母
'iOS'在变量名小写第一个，大写后两个字母
常量全大写，用下划线连接
构造函数，大写第一个字母
jquery对象必须以'$'开头命名

var thisIsMyName;

var goodID;

var reportURL;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {

this.name = name;

}

var $body = $('body');

12、变量声明

一个函数作用域中所有的变量声明尽量提到函数首部，用一个var声明，不允许出现两个连续的var声明

function doSomething() {

var value = 10,

result = value + 10,

len;

}

13、函数

无论是函数声明还是函数表达式，'('前不要有空格，但'{'前一定要有空格；
函数调用括号前不需要空格；
立即执行韩式外必须包一层括号；
不要给inline function命名；
参数之间用','分隔，注意逗号后有个空格

var doSomething = function(a, b, c) {

...

};

function doSomething(item) {

...

}

doSomething(item);

(function() {

return 1;

})();

[1, 2].forEach(function() {

...

});

var a = [1, 2, function() {

...

}];

14、数组、对象

对象属性名不需要加引号；
对象以缩进的形式书写，不要写在一行；
数组、对象最后不要有逗号

var a = {

b: 1,

c: 2

};

15、括号

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

if(x) {

doSomething();

}

16、null

适用场景：

初始化一个将来可能被赋值为对象的变量
与已经初始化的变量做比较
作为一个参数为对象的函数的调用传参
作为一个返回对象的函数的返回值

不适用场景：

不要用null来判断函数调用时有无参数
不要与未初始化的变量做比较

var a = null;

if (a === null) {

...

}

17、undefined

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

if (typeof person === 'undefined') {

...

}

18、jshint（es6）

用'==='，'!=='代替'=='，'!='
for-in里面一定要有hasOwnProperty的判断
不要在内置对象的原型上添加方法，如Array，Date
不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量
变量不要先使用后声明
不要在一句代码中单单使用构造函数，记得将其赋值给某个变量
不要在同个作用域下声明同名变量
不要在一些不需要的地方加括号，例：delete(a.b);
不要使用未声明的变量
不要声明了变量却不用、
不要在应该做比较的地方赋值
debugger不要出现在提交的代码里
数组中不要存在空元素
不要在循环内部声明函数
不要像这样使用构造函数，例：new function() { ... }，new Objext;

if (a === 1) {

...

}

for (key in obj) {

if (obj.hasOwnProperty(key)) {

console.log(obj[key]);

}

// don't do this

Array.propertype.count = function(value) {

return 4;

};

// don't do this

var x = 1;

function test() {

if (true) {

var x = 0;

}

x += 1;

}

// don't do this

function test() {

console.log(x);

var x = 1;

}

// don't do this

new Person();

// do this

var person = new Person();

// don't do this

delete(obj.attr);

// do this

delete obj.attr;

// don't do this

var a = [1, , , 2, 3];

// don't do this

var nums = [];

for( var i = 0; i < 10; i++) {

(function(i) {

nums[i] = function(j) {

return i + j;

};

}(i));

}

// don't do this

var singleton = new function() {

var privateVar;

this.publicMethod = function() {

privateVar = 1;

};

this.publicMethod2 = function() {

privateVar = 2;

};

19、杂项

不要混用tab和space
不要在一处使用多个tab和space
换行符统一使用'LF'
对上下文this的引用只能使用'_this'，'that'，'self'其中一个来命名
行尾不要有空白字符
switch的falling through和no default的情况一定要有注释特别说明
不允许有空的代码块

function person() {

var _this = this;

var that = this;

var self = this;

}

switch (con) {

case 1:

case 2:

...

break;

case 3:

...

case 4:

...

break;

}

if (con) {

}

guanguan0_0

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录