前端规范整理

时间  2019-11-19
标签 前端 规范 整理 繁體版
原文   原文链接

前端开发规范----细则

1、前端开发规范目的

为提升团队协做效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，同时为网站有一个更好的前端架构及网站的发展及将来打好一个基础。css

2、基本准则

  1. 符合web标准，语义化html， 结构表现行为分离，兼容性优秀。
  2. 页面性能良好，代码要求简洁明了有序， 尽量的减少服务器负载， 保证最快的解析速度。
  3. 页面的可维护性强，后期维护起来简单快捷
  4. 顺应前端发展趋势

3、前端规范整体内容

1.         HTML前端规范

1.1          文档模式（doctype）遵循规范html

前端网站遵循的文档模式为XHTML1.0 Transitional模式，参考最新改版的网站（taobao.com）及HTML发展趋势，页面所遵循的文档模式应改成<!DOCTYPE html>。前端

 

1.2          语义化标签（待测试）程序员

随着HTML5语义化标签的出现，HTML原来以DIV布局的方式也慢慢的在改变；目前经常使用的语义化标签有article nav aside section header footer hgroup；其使用方式大体以下web

 

注意：因语义化在低版本的浏览器中不识别，因此要作处理，目前处理的方法是用JS的Document.createElement的方式，把须要用到的标签添加到window对象中。chrome

 

1.3          Css和Js引入顺序数组

为网站性能考虑，页面的CSS都在head中引入，JS在底部引入浏览器

 

1.4          ID、Class命名缓存

ID采用驼峰式命名法，如：mainMenuNav、subContentList等服务器

Class采用下划线命名法，如：name_list、main_menu_content等

经常使用的词汇以下：

页　眉：header 
内　容：content 
容　器：container 
页　脚：footer 
版　权：copyright　 
导　航：menu 
主导航：mainMenu 
子导航：subMenu 
标　志：logo 
标　语：banner 
标　题：title 
侧边栏：sidebar 
图　标：Icon 
注　释：note 
搜　索：search 
按　钮：btn 
登　录：login 
链　接：link 
信息框：manage 

 

1.5          meta 中name和http-equiv

这两块是页面中的重要特性的设置，但全部页面设置格式基本相同，因此可参考网站首页。

 

1.6          产品图片必须加上alt属性； 给重要的元素和截断的元素加上title；能够的话，尽可能给全部图片都设定好高度和宽度；目的:有利于seo，搜索引擎的爬虫。

 

1.7          给区块代码及重要功能(好比循环)加上注释, 方便后台程序员嵌套模版；

<!---   start   ---->

<div>sdddfdsss</div>

<!---   end   ---->

 

1.8          特殊符号使用: 尽量使用代码替代: 好比 <(<) & >(>) & 空格( ) & ?(?) 等等；

经常使用特殊符号对照表：

￥         &yen;

《     &laquo; 

<          &lt;         

>          &gt;

更多详见：http://www.cnblogs.com/cbcye/archive/2009/08/31/1557076.html

2.         Css前端规范

2.1          Css中变量命名规范

Css中变量包括ID、CLASS、标签，其中ID和CLASS在HTML规范1.4有规定

 

2.2          Css中背景图片

Css中的背景图片能够合并的都合并成一张图片，这样能够减小页面的HTTP请求；涉及到应用到背景图片的Css都放置Css文件中的顶部，这样便于后期维护。

 

2.3          Css文件中，单独的样式定义，不要折行，这样便于浏览和查看，页易于维护

 

2.4          页面中较为公用的模块（如：点评、POI、在线问答），其Css要独立成单独的Css文件，这样便于不一样类页面之间直接引用和后期统一维护

 

2.5          Css3的使用规范

Css3新增的属性有border-radius,box-shadow,transition,transform,animation,@font-face, gradient等，这些新的属性虽然兼容性还有些问题，可是能够在不破坏低版本浏览器页面样式的状况下，丰富高版本浏览器的交互；因此建议适量的使用。

2.6          Font-family属性值用英文，中/英文对照表以下

2.7          待新增

3.         Js前端规范

3.1          缩进

4个tab

3.2          语句结尾

必需要有分号

3.3          命名

  1. 变量和方法名统一使用驼峰命名法（小）。
  2. JS文件统一使用驼峰命名法（大）。
  3. 变量中禁止使用动词开头，好比禁止使用get/set等，须要以名词开头。方法命名需要以动词开头，文件名称一概以名词开头；

好的变量命名 var userName = “”;

很差的变量命名 var UserName = “”;

好的方法命名 function getUserName(){…};

很差的方法命名 function getusername(){…};

  1. 常量一概使用大写表示单词和单词之间使用(_)下划线进行区分。

好的常量定义 var MAX_COUNT = 10;

  1. 构造函数的命名以大写字母开始（大写驼峰）

好的构造函数 function HotelList(){…}

  1. 直接量

字符串定义  var userName = “”;

数字定义 var count = 0;

布尔定义 var flag = false;

预约义对象 var obj = null;

对象直接量 var book = {};

数组直接量： var books = [];

  1. 注释

//单行注释

重要的逻辑语句以前须要添加单行注释

多行注释

/**

*注释

*/

每一个方法以前须要添加多行注释

  1. 文档注释

//////////////////////////////////////////////

// 这个文件是 途牛 NGBOSS 系统项目的一部分

//

// Copyright (c) 2013 Tuniu

//////////////////////////////////////////////

/**

 * 功能说明：…..

 * @author: 做者姓名 (xxx@tuniu.com)

 * @version: xxxx.js  2013-09-17 14:21:30

 */

 

3.4          待定

4.         图片前端规范

4.1          背景图

a)         能够合并的背景图合并到统一张图片中，即CSS Sprite

b)         合并后的图片在CSS引用时，放在CSS文件的最顶部

c)         Font-face，可使用的尽可能使用

 

4.2          产品图

a)         首屏以外的产品图片都异步加载

b)         产品图片的尺寸肯定的，定义样式时要把宽和高固定

 

4.3          订单

5.         前端性能规范

5.1          网站前端优化 – DOM

DOM优化方法

目前对DOM优化采用的方法是不渲染，即将对SEO不重要的内容用textarea或者script包裹，这样的话他们在渲染时就会被当作字符串而不会解析成节点。

 

5.2          网站前端优化 – JS

JS是除图片外，对前端性能影响最大的一个方面，也是最难优化的。整体来讲，JS对性能有影响体如今两个阶段，一个是JS的下载阶段，一个是执行阶段。

JS同步时，下载和执行阶段解析器都会暂停，等待JS下载和执行；而jS异步时，JS下载不会暂停解析器，所以不会阻塞页面，可是执行时，仍然会暂停解析器。因此，对JS处理方式通常是异步而且放在页面底部。这样能够对页面的影响降到最小。

JS另外一个难点就是页面中的JS代码的逻辑处理，能够用dynaTrace AJAX跟踪查看。

 

5.3          网站前端优化 – 重绘&回流

当呈现树中的一部分(或所有)由于元素的规模尺寸，布局，隐藏等改变而须要从新构建。这就称为回流(其实我以为叫从新布局更简单明了些)。每一个页面至少须要一次回流，就是在页面第一次加载的时候。

当呈现树中的一些元素须要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，好比background-color。则就叫称为重绘。

 

5.4          这块内容是和浏览器渲染方式息息相关的，有兴趣的童靴能够在网站多找些资料；这里只介绍些平时咱们可能使用的一些会形成重绘&回流的方法，及改进意见

a)         不要一个个改变元素的样式属性，最好直接改变class_name，但class_name是预先定义好的样式，不是动态的，若是你要动态改变一些样式，则使用cssText来改变

b)         让要操做的元素进行"离线处理"，处理完后一块儿更新，这里所谓的"离线处理"即让元素不存在呈现树中

c)         不要常常访问会引发浏览器flush队列的属性，若是你确实要访问，就先读取到变量中进行缓存，之后用的时候直接读取变量就能够了

d)         考虑你的操做会影响到呈现树中的多少节点以及影响的方式，影响越多，花费确定就越多

 

5.5          待定

 

6.         SEO前端规范

6.1          可抓取性

a)         全部SEO内容中的连接采用文字而且包含关键词，不得采用仅仅图片、flash、iframe以及AJAX等特殊方式加载，保证连接可被搜索引擎爬虫抓取。上线前采用Lynx浏览器或者采用在线版：http://lynx.itlearner.com/检查连接的可抓取状况。

b)         全部的SEO内容应当直接显示在源代码中，不要使用sessionID, DHTML, cookies, Javascript(textarea), Flash等技术所展示内容。采用Lynx浏览器或者采用在线版：http://lynx.itlearner.com/检查内容的展现状况。

c)         不要将文字隐藏在图片以后，或者文字颜色与背景色相同，会被断定为隐藏内容。惟一可行的方法是使用text-indent属性。

6.2          标准化

a)         遵循xhtml规则，全部标签必须闭合，好比<img /> <br />不能忘记添加。全部页面改版或上线前，必须使用工具验证生成后的代码，确保没有未闭合的标签。 https://chrome.google.com/webstore/detail/html-tag-checker/ohdllebchmmponnofchalfkegpjojcaf?hl=zh-CN

b)         使用语义化的标签进行页面的规划，例如：分段使用<p>而不是<br />，列表使用<ul>，表格使用<table><th>等标签，避免多余嵌套，页面正文内容必须处于最深的嵌套中。

c)         不要使用空的<a>标签，例如<a href="www.tuniu.com"></a>，禁止出现空的<img src="">，。

d)         合理使用H1~H6标签，使网页文本具备层次性，H1标签只容许出现1次，被H1标签包裹的文字必须能归纳本页面的内容，页面上与之相关的一些标签依次使用H2增强，不使用H3~H6标签。不要经过css去修改h标签的大小加粗的样式。

 

6.3          简洁化

a)         不使用行内样式和<body>内的css样式，防止形成页面重渲染，下降效率。

b)         减小页面上的无关信息，无心义的代码、隐藏菜单和广告等，使用js进行调用，提升页面的信噪比。

c)         预先在<img>中定义好每一个图片的大小，便于用户加载的时候能够预留足够的空间，防止图片加载不出来破坏页面结构。页面上的全部图片必须加上alt属性，对于除小图标以外的照片，只使用jpg和png格式。不要使用html控制图片大小进行缩放，若是产品图片尺寸与咱们的须要不一致，在上传的时候就自动裁剪压缩好；若是须要缩略图，使用两个版本大小的图片，而且经过存放不一样目录或者设置件名特征，禁止搜索引擎爬行缩略图。

d)         页面整体积小于110K，共享CSS样式和脚本样式，相一样式用户只需下载一次，压缩CSS文件中的空白。压缩JS代码，移除重复无用的JS代码，对JS文件体积减肥,实现代码简洁化。合并JS、CSS文件以减小HTTP请求。压缩HTML代码中无心义的TAB、空白元素。

e)         小图标不须要alt属性，alt属性的内容必须与图片内容相符合，如没法调用到相关的替代文字，则不写alt属性，不容许出现空的alt属性。

f)          当锚文本内容没法与页面主题相关时，请增长title属性帮助搜索引擎了解目标页面的内容，除此以外不须要任何title属性。

g)         页面发布前必须压缩删除代码中的空白，注释等无心义内容。如图，大段空白。

 

6.4          须要商议的部分

a)         制定前端代码元素命名标准，作到元素命名的语义化和统一。

b)         在输出的html代码中不要出现css和js代码，此类代码一概外置。

c)         页面html代码行数不超过1000行。把代码压缩换行。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程