前端开发规范

Posted 嘴巴嘟嘟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发规范相关的知识，希望对你有一定的参考价值。

注意此文章来自于腾讯开发文档官网 腾讯前端开发文档

页面头部

本章将介绍页面的标签含有的内容。包含页面的基本信息、SEO优化、双端页面跳转等。

DOCTYPE 设置
文档类型统一使用html5的doctype：

<!DOCTYPE html>

页面编码
编码默认使用GBK，特定情况下有指定要求也可以是UTF-8

<meta charset="GBK">

<meta charset="UTF-8">

页面标题(Title)

页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan，28个汉字以内

 <title>抓金角银角大王每周末放送装备 - 地下城与勇士官方网站 - 腾讯游戏</title>

使用场景：PC端官网及专题
显示在页面顶部，腾讯游戏所有官网以及专题需添加的TOP条，如游戏业务无特殊说明，在页面上引用组件CDN地址。

<script src="//ossweb-img.qq.com/images/js/title.js"></script>

页面关键字(Keywords)

Keywords为产品名、专题名、专题相关名词，之间用英文半角逗号隔开

 <meta name="keywords" content="英雄联盟,lol,lol新手礼包,lol攻略,lol视频,lol视频攻略,英雄资料,英雄联盟战争学院,明星解说视频,101战争学院,英雄,攻略,WCG,点亮图标,赛事" />

页面描述(Description)

不超过150个字符，描述内容要和页面内容相关。

<meta name="description" content="英雄联盟官方网站，海量风格各异的英雄，丰富、便捷的物品合成系统，游戏内置的匹配、排行和竞技系统，独创的“召唤师”系统及技能、符文、天赋等系统组合，必将带你进入一个崭新而又丰富多彩的游戏世界。" />

页面Meta

  1. PC端Meta：
<meta charset="gbk" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="all">
<meta name="author" content="Tencent-CP" />
<meta name="Copyright" content="Tencent" />
<meta name="Description" content="页面的描述内容" />
<meta name="Keywords" content="页面关键字" />
  1. 移动端Meta：
<meta charset="gbk" /> 
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<!-- 为了防止页面数字被识别为电话号码，可根据实际需要添加： -->
<meta name="format-detection" content="telephone=no"> 
<!-- 让添加到主屏幕的网页再次打开时全屏展示，可添加：   -->
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="robots" content="all">
<meta name="author" content="Tencent-CP" />
<meta name="Copyright" content="Tencent" />
<meta name="Description" content="页面的描述内容" />
<meta name="Keywords" content="页面关键字" />
  1. 页面跳转
    如为双端页面，需要自动判断跳转，PC访问移动端页面，跳转到对应的PC专题上，反之亦然。

PC端添加：

(function() 
if(/android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent))var a=document.referrer,b="baidu.com":"seo_baidu","sogou.com":"seo_sogou","sm.cn":"seo_sm","so.com":"seo_360","bing.com":"seo_bing","google.com":"seo_google",c;for(c in b)if(-1!=a.indexOf(c))a=b[c];if(window.sessionStorage)sessionStorage.setItem("channel",a)elsevar d=d||0,b="";0!=d&&(b=new Date,b.setTime(b.getTime()+1000*d),b="; expires="+b.toGMTString());document.cookie="channel="+escape(a)+b+"; path=/"breakwindow.location.href="/m/"+location.search;
)();

注意
window.location.href跳转地址 /m/ ，默认为移动端官网地址；
如是专题或其他需求，需要根据实际情况将 /m/ 替换为相对应的移动端地址；

移动端添加：

if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) 
    window.location.href = "PC端专题地址"+location.search;

HTML规范

HTML标签

  1. 标签必须合法且闭合、嵌套正确，标签名需小写
  2. 标签语法无错误，需要符合语义化
  3. 标签的自定义属性以data-开头，如：<a href="#" data-num='18'></a>
    除非有特定的功能、组件要求等，禁止随意使用id来定义元素样式

链接

  1. 给<a> 标签加上title属性
  2. <a>标签的href属性必须写上链接地址，暂无的加上javascript:alert(‘敬请期待！’)
  3. 非本专题的页面间跳转，采用打开新窗口模式：target="_blank"

https协议自适应
将调用静态域名 ossweb-img.qq.com 以及 game.gtimg.cn 的外部请求，写法上一律去掉协议http:部分，采用自适应的写法。具体方法如下：

<style>
//CSS背景图片 
.bgbackground: url(//game.gtimg.cn/images/cf/cp/a20161021sqjs/hd.jpg) no-repeat;
</style>
//链接URL
<a href="//cf.qq.com/main.shtml">进入官网</a>
//图片SRC
<img src="//game.gtimg.cn/images/cf/web201610/logo.png">
//JS链接
<script src="//ossweb-img.qq.com/images/js/title.js"></script>

FLASH

注意
页面禁止使用flash，动画使用video、CSS3、canvas等方式实现，低版本浏览器使用背景图片降级。

CSS规范

选择器

  1. CSS类名命名参考注释与命名

  2. 禁止使用层级过深的选择器，最多3级。

错误示范：

 .without-animation .book-body .body-inner .book-header .dropdown .dropdown-menu .buttons
 .without-animation .book-body .body-inner .book-header .dropdown .dropdown-right .buttons
 .without-animation .book-body .body-inner .book-header .pull-left .dropdown-menu .buttons
 .without-animation .book-body .body-inner .book-header .pull-left .dropdown-right .buttons
 .without-animation .book-body .body-inner .book-header .font-settings .dropdown-menu .buttons
 .without-animation .book-body .body-inner .book-header .font-settings .dropdown-right .buttons
 .without-animation .book-body .body-inner .book-header .js-toolbar-action .dropdown-menu .buttons
 .without-animation .book-body .body-inner .book-header .js-toolbar-action .dropdown-right .buttons

  1. 除非有特定的功能、组件要求等，禁止随意使用id来定义元素样式

  2. 除非是样式reset需要，禁止对纯元素选择器设置特定样式，避免样式污染

错误示范：

 //会导致页面所有的a标签都被加上背景
 abackground:url(xxx);

 //后期修改可能会添加一些span标签，如果刚好在div里面，会被污染；不利于后期维护
 div spandisplay:block

pc端示例

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footermargin:0;
body,button,input,select,textareafont:12px/1.5 tahoma,'\\5FAE\\8F6F\\96C5\\9ED1',sans-serif
h1,h2,h3,h4,h5,h6font-size:100%
em,bfont-style:normal
atext-decoration:none 
a:hovertext-decoration:underline
imgborder:0 
bodypadding-top:42px 
button,input,select,textareafont-size:100%;outline:none
tableborder-collapse:collapse;border-spacing:0
td,th,ul,olpadding:0

移动端

/** 有较多文字的文章类页面：*/
/* 移动端常用reset.css (文字版本) */
/* reset */
html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 margin:0;padding:0
a,img,input border:none;
bodyfont: 14px/1.75 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
a text-decoration:none;
ul,lilist-style: none

如果页面无文字，或者不希望文字被长按选中，可使用下面的reset；适合于大多数专题页面

/* 移动端常用reset.css (无文字版本) */
/* reset */
html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 margin:0;padding:0
a,img,input border:none;
bodyfont: 14px/1.75  -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-tap-highlight-color: rgba(0,0,0,0);
a text-decoration:none;
ul,lilist-style: none
a, img -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
html, body 
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;

提示
移动端页面不需要设置微软雅黑、宋体等字体，终端浏览器字体取决于设备上的系统字体。

图片处理

本章将介绍图片的优化、以及图片地址如何替换为上线后的CDN服务器地址。

图片优化

  1. 图片体积不能超过300K

  2. JPG图片必须压缩，一般80%品质即可，保证文字清晰

  3. JPG图片必须使用渐进式图片：使用Photoshop的“存储为web所用格式”时候，勾选“连续”

  4. 透明PNG图片必须使用压缩工具压缩后提供

图片标签

  1. PC端img图片必须填写width、height、alt属性

  2. 移动端必须填写alt属性

  3. alt不能为无意义字符，需要能表现出图片的含义，如图片为道具图，则应该为道具的名称

合理切图

  1. 需要变动的文字禁止切到图片中，如果不确定是否需要变动，请咨询接口人

  2. 需要程序后台动态生成的图片，如道具图片、头像、奖品，必须单独切割出来

  3. 装饰性图片合并成精灵图，减少页面请求

图片地址分离
专题完成，需进行图片地址分离

把图片放到ossweb-img文件夹里面，图片引用的时候src为game.gtimg.cn域名下的特定地址。
分离后示例：

/*分离前*/
.bgbackground: url(ossweb-img/hd.jpg) no-repeat;
/*分离后*/
.bgbackground: url(//game.gtimg.cn/images/xiangqi/cp/a20150730avatar/hd.jpg) no-repeat;

提示

图片必须分离；css文件、js文件可视情况，不是必须分离。

为了本地正常预览，分离前文件请使用相对路径或补全http://

如何知道分离路径
如现在专题的是天天爱消除的一个预约活动专题，专题目录是a20090817booking，那采取下列步骤将获得分离地址：

  1. 百度搜索官方域名，找到官网http://peng.qq.com/地址，其中peng就是项目名的简写；确保一级域名是qq.com

  2. 查看官网首页源码样式表中的图片的地址，确认其中含有上一步得到的项目名；否则请找接口人确认

  3. 图片分离地址示例：//game.gtimg.cn/images/peng/cp/a20090817booking/，其中peng就是项目名的简写

  4. 分离地址只有项目名和专题名需要修改

  5. 图片跨域问题的解决：设置图片crossOrigin属性为Anonymous，同时把图片域名game.gtimg.cn换为ossweb-img.qq.com

注释与命名

本章包含页面的注释规范与文件命名、样式表类名命名规范。

注释

提示 可通过编辑器的语法高亮功能，确保HTML、CSS、JS文件中注释语法正确

页面头部需要添加制作时间等信息。

在head区域中，title标签下方的注释，按照下方格式分别加上页面设计、页面制作的公司名称，创建的年-月-日

<head>    
    <title>页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan</title>
     <!-- 页面设计：公司名称 | 页面制作：公司名称 | 创建：2017-09-09  -->
</head>

页面设计、页面制作填写具体公司名称，创建：填写页面创建的时间。

禁止注释中出现制作者的个人信息，如姓名、QQ号、邮箱等。

合理的注释有助于后期维护。

较长的的HTML文件，请在板块之间加入注释，使得结构更清晰：

...
<!-- 活动板块 开始 -->
<div class="part-act">
...
</div>
<!-- 活动板块 结束 -->
...

如果是需要和后台开发联调的自定义函数。请注明函数的调用方式，包括函数的用途、参数类型等。

// 转盘初始化
// 参数1：是奖品的个数，数字类型
// 参数2：用来旋转的圆盘元素，可为dom元素 或 选择器字符串
var panel=new PanelLotery(
    length:8,
    el:'#ltpanel'
);

命名

样式命名

  1. class、id都需小写
  2. 命名使用英文，禁止使用特殊字符
  3. 样式名不能包含ad、guanggao、ads、gg是广告含义的关键词，避免元素被网页拓展、插件屏蔽
  4. 名称间隔使用-符号
  5. 涉及数据、交互等需要联调的部分，禁止通过id选择器定义样式，以免开发过程中id名变化，引起页局错乱
  6. 类名命名需要语义化，参考下面的示例：
 .wrap                 //外层容器
 .mod-box              //模块容器
 .btn-start            //开始
 .btn-download-ios     //ios下载
 .btn-download-andriod //安卓下载
 .btn-head-nav1        //头部导航链接1
 .btn-news-more        //更多新闻
 .btn-play             //播放视频
 .btn-ico              //按钮ico
 .btn-lottery          //开始抽奖
 .side-nav             //侧栏导航
 .side-nav-btn1        //侧栏导航-链接1 
 .btn-more             //更多

提示 命名词穷了怎么办？试下这个工具：codelf

图片命名

  1. 图片名称必须小写，禁止使用特殊字符、中文
  2. 使用英文或拼音缩写，禁止特殊字符
  3. 名称间隔使用-符号
  4. 命名需要能体现图片的大概用途

常用示例：

 bg.jpg          //背景图片
 mod-bg.jpg      //模块背景
 sprites.png     //精灵图
 btn-start.png   //开始按钮
 ico-play.png    //修饰性图片
禁止文件名和实际图片内容不符。反面例子：图片名为'weixin-qrcode'，图片内容却是头像。

文件命名
文件命名参照文件命名详细说明

文件目录

  1. 图片文件夹：ossweb-img
  2. CSS文件夹：css
  3. JS文件夹：js
  4. include页面片段文件夹：inc

路径分离前文件图片、CSS、JS引用的资源路径保留http:或者使用相对路径，不然本地无法预览。 路径 分离后 的CSS、JS引用的资源路径使用相对域名根目录的路径/cp/专题目录/。

include

  • 多页面专题，提取页面相同HTML代码片段，页面中include载入使用
  • 路径需要从域名根目录开始，引用方式必须为virtual，不能为file
  • include推荐使用.html格式，可以在文件中再次include其他文件

正确

<!--#include virtual="/web201801/inc/nav.html" -->
<!--#include virtual="/m/m2018/inc/nav.html" -->
<!--#include virtual="/cp/a20160112music/inc/nav.html" -->

专题目录命名

专题目录就是重构包文件夹名称，使用 a+日期+专题英文或拼音 统一使用小写字母，例如：a20090817avatar，文件名禁止以数字开头。 重构包命名优先使用有意义的英文名，如使用拼音，拼音字符超过10个，请使用首个拼音的全称+后面拼音的简写

浏览器兼容

浏览器兼容性测试

  1. 兼容IE8及以上、Firefox、chrome、QQ浏览器
  2. 页面如无指定，不需要兼容IE6、7
  3. 不兼容IE6、7的情况下，需要在页面顶部加入提示，并对.browser-tips使用醒目的颜色标识样式
<!--[if lt IE 8]><p class="browser-tips">您的浏览器版本过低，请升级浏览器获得更好的体验<p><![endif]-->

分辨率兼容

1366x768~1920x1080，拖大和缩小窗口，页面布局不会发生错位。

页面分享

PC端QQ 客户端分享规范（预约、邀请类活动专题必加，相关信息请联系需求产品接口人）：

<meta itemprop="name" content="标题：必填 长度至少为4" />
<meta itemprop="description" content="摘要：必填 长度至少为10" />
<meta itemprop="image" content="图片地址：可为空" />

SNS页面分享

页面如需要分享到多个社交平台时候，请使用SNS组件实现，

以上是关于前端开发规范的主要内容，如果未能解决你的问题，请参考以下文章

软件开发规范六《Android开发编码规范》

年薪10万的前端开发必会的19 个 JavaScript 简写方法！

前端开发规范总结 总结前端开发模式和规范

前端的开发规范

web前端开发规范项目流程总结

Web前端开发规范手册