前端代码规范
前端代码规范
前端代码规范整理分为三部分:html、js、css;
Html:
Html其实也就是重构,根据眼前所看到的设计图,利用html代码重构出来,其中考虑到js交互以及css可行性的前提下,构造出最简洁且可读性最强的html代码。
Html规范定义如下:
1、 页面第一行有标准模式申明
<!doctype html>
2、 Html标签有属性
<html lang="zh-CN">…<html>
3、 Head标签有编码格式
<metacontent="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属性
<imgsrc=”” alt=”” />
原因:a. alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户,以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候,图片替换文字。
- 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、 多使用varfunc = function(){};来定义函数,尽力不使用function func(){};。Js是块级解释语言,用到的时候才会声明和执行。
3、 Js方法名命名规则—私公有、模块、功能驼峰命名法;比如:
私有的xx模块图片移动,则:var_xx_imgMove = function(){};
公有的xx模块图片移动,则:varxx_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文件,方便管理以及维护
以上为前端代码规范,秉承简洁易读、可维护性的思想。