前端代码规范
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端代码规范相关的知识，希望对你有一定的参考价值。
前端代码规范整理分为三部分：html、js、css；
Html：
Html其实也就是重构，根据眼前所看到的设计图，利用html代码重构出来，其中考虑到js交互以及css可行性的前提下，构造出最简洁且可读性最强的html代码。
Html规范定义如下：
1、 页面第一行有标准模式申明
<!doctype html>
2、 Html标签有属性
<html lang="zh-CN">…<html>
3、 Head标签有编码格式
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
4、 Head标签有语言定义
<meta http-equiv="X-UA-Compatible" content="IE=edge">（主要是设置浏览器优先使用什么模式来渲染的）
5、 Head标签内有标题、关键字、描述标签对
<meta content=”” name=”keywords”>
<meta content=”” name=”description”>
6、 Img标签必须有alt属性
<img src=”” alt=”” />
原因：a. alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片替换文字。
- b. alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的才是为了SEO(Search Engine Optimization))搜素引擎优化(了解)
7、 Css引用必须在head标签内
行内样式 <p style=””></p>
内部样式：<style type="text/css">
P{
}
</style>
外部样式：<link href="css/index.css" ref="stylesheet" type="text">
8、 Js引用必须在body结束标签前
外联JS <script src="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页面里，比如:
<a href=”javascript:;” onclick=”func()”></a>
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文件，方便管理以及维护
以上为前端代码规范，秉承简洁易读、可维护性的思想。
以上是关于前端代码规范的主要内容，如果未能解决你的问题，请参考以下文章