码迷,mamicode.com
首页 > 其他好文 > 详细

前端代码规范

时间:2017-08-16 14:06:35      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:ble   img   lin   head   根据   func   多态   内联   多行注释   

前端代码规范整理分为三部分: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属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户,以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候,图片替换文字。

  1.   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文件,方便管理以及维护

 

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

前端代码规范

标签:ble   img   lin   head   根据   func   多态   内联   多行注释   

原文地址:http://www.cnblogs.com/leexingqing/p/7372921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!