前端代码规范

来源：互联网发布：超人电力工程预算软件编辑：程序博客网时间：2024/05/16 11:09

前端代码规范

前端代码规范整理分为三部分：html、js、css；

Html：

Html其实也就是重构，根据眼前所看到的设计图，利用html代码重构出来，其中考虑到js交互以及css可行性的前提下，构造出最简洁且可读性最强的html代码。

Html规范定义如下：

1、页面第一行有标准模式申明

<!doctype html>

2、 Html标签有属性

3、 Head标签有编码格式

4、 Head标签有语言定义

5、 Head标签内有标题、关键字、描述标签对

6、 Img标签必须有alt属性

原因：a. alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片替换文字。

b. alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的才是为了SEO(Search Engine Optimization))搜素引擎优化(了解)

7、 Css引用必须在head标签内

行内样式 <pstyle=””></p>

内部样式：<style type="text/css">

}

</style>

外部样式：<linkhref="css/index.css" ref="stylesheet"type="text">

8、 Js引用必须在body结束标签前

外联JS <scriptsrc="js/index.js"></script>

内联JS <script type="text/javascript">

</script>

9、图片必须优化（前景图、背景图、小图标）

Js：

因为有了js，静态页面才会变成动态页面；js讲究效率、简洁、可读性以及重用性。

Js规范定义如下：

1、页面取值、获取元素尽量不要以id命名的方式来取

2、多使用var func =function(){};来定义函数，尽力不使用function func(){};。Js是块级解释语言，用到的时候才会声明和执行。

3、 Js方法名命名规则—私公有、模块、功能驼峰命名法；比如：

私有的xx模块图片移动，则：var _xx_imgMove = function(){};

公有的xx模块图片移动，则：var xx_imgMove = function(){};

4、 Js代码不允许写在html页面里

5、调用js的代码不允许写在html页面里，比如:

6、建立对应模块的js文件，方便管理以及维护，必须写方法注释（单行或多行注释）以及方法逻辑难点注释

Css：

在重构html的时候就应该想到css的写法，怎么样最简洁以及合理的提供js选择器进行抓取，一个赞的页面少不了css的渲染。

Css规范定义如下：

1、尽量少用id命名方式

2、 Css命名规则—标签简写、模块、功能驼峰命名法；比如：

一个图片滚动的容器，

则”.d-imgMove”对应<div class=”d-imgMove”>…</div>

3、 Css代码不允许写在html页面里

4、 Css重写或多态必须写注释

5、 Css层级关系不得超过3级，例如：

.d-imgMove p span a{} 则要改为：

.d-imgMove p a{}

6、建立对应模块的css文件，方便管理以及维护

以上为前端代码规范，秉承简洁易读、可维护性的思想。

阅读全文

0 0