HTML规范

这是团队代码基本约定的内容,必须遵守。

代码规范

所有html代码小写

所有代码只使用小写:适用于标签名,类名,标签的属性及属性值(text/CDATA例外,作为内容时例外)

<ul class="news-list"><li></li><li></li></ul>

使用html5的doctype

<!doctype html>

页面编码使用gbk

<meta charset="gbk">

由于互娱业务系统的特殊性,编码类型建议优先使用gbk,gbk编码是 gb2312 的扩展,并且向后兼容,具有更好的兼容性。 已采用 gb2312 编码的项目暂不用修改,部分官网为了兼容某些特殊字符,采用 gb18030 编码,如iGame官网。 面向港澳台用户的站点可采用big5编码,在系统允许的前提下可采用utf-8编码

页面内容lang为zh-Hans-CN

<html lang="zh-Hans-CN">

这条规范基于国际标准RFC 4646,使用单一的 zhzh-CN 均属于废弃用法。 与中文有关的 lang 值如下:

  • zh-Hans 简体中文
  • zh-Hans-CN 大陆地区使用的简体中文
  • zh-Hans-HK 香港地区使用的简体中文
  • zh-Hans-MO 澳门使用的简体中文
  • zh-Hans-SG 新加坡使用的简体中文
  • zh-Hans-TW 台湾使用的简体中文
  • zh-Hant 繁体中文
  • zh-Hant-CN 大陆地区使用的繁体中文
  • zh-Hant-HK 香港地区使用的繁体中文
  • zh-Hant-MO 澳门使用的繁体中文
  • zh-Hant-SG 新加坡使用的繁体中文
  • zh-Hant-TW 台湾使用的繁体中文

页面头部说明注释

必须在 head 区域中加上对页面相关人员注释,方便在产品环境中的查看

<!-- 页面设计:xxx | 页面制作:xxx | 团队博客:http://tgideas.qq.com/ -->

include语句

include中的地址为相对地址,不能使用绝对地址。被include的文件后缀可以是:.html或者.inc

<!--#include virtual="/xxxx.html" -->

目前.htm或者.shtml文件中都可以使用include

文件命名

  • index.shtml 引导页&首页
  • main.shtml 首页
  • download.shtml 下载页面
  • act.shtml 活动列表页面
  • video.shtml 视频
  • cdkey.shtml CDKEY页面
  • wallpaper.shtml 壁纸页面
  • 文件名中只可由英文字母a~z、排序数字0~9或间隔符-组成。
  • 件名中禁止包含特殊符号,比如空格$
  • 文件名区分大小写,统一使用小写字母
  • 为更好的表达语义,文件名使用英文名词命名,或英文简写。

图片

图片统一存放在图片服务器,注意修饰性图片与内容类图片分开放置,如:图片存放的文件夹建议用img命名来存放logo、合并的图片等页面固定元素的图片,images放一些开发会动态调用的头像、剧照图等。

图片格式/大小

图片格式:图片允许采用gif/jpg/png/wep ,平衡图片质量与文件大小,适当运用 css sprite 理念合并修饰类图片,不过分损失质量情况下尽量减小页面下载数据量。 图片单张体积不能超过150K,jpg图片必须压缩,一般60%品质即可,如果图片质量不好,可提高到80%

图片引用

  • 图片路径需要使用绝对路径方式;
  • 旧版页面中CSS维护仍可在webplat采用相对路径方式修改发布(备注);
  • 所有img元素必须加上alt属性,修饰性图片alt属性内容留空,内容性质图片alt属性写相应内容;
  • 必须加上width和height属性,值为它的原大小,但不要用来对它进行缩放。
    <img src="http://ossweb-img.qq.com/images/helper/v2/logo.png" width="172" height="72" alt="Q游助手">
    

    图片命名

  • 图片后缀命名一律小写。
  • 使用间隔符-进行连接。*一般背景图片以bg-开头,测试图片以img-开头,按钮图片以btn-开头,图标图片以icon-开头,聚合图以spr-开头,后跟英文单词,不推荐使用汉语拼音,如果名称过长,适当使用缩写
    bg-body.jpg spr-home.png img-promo.jpg btn-submit.png  icon-game.png
    

图片服务器

图片必须上传至图片服务器,CSS文件和JS文件可以按需处理。
图片服务器域名为http://ossweb-img.qq.com/http://game.gtimg.cn/,推荐使用后者。

<!--不推荐-->
http://ossweb-img.qq.com/images/项目名称/xxx
<!--推荐-->
http://game.gtimg.cn/images/项目名称/xxx

注释

正确的注释规范:

感叹号后面2个横线,结束时2个横线; 不要在注释内容中使----只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。 例如下面的代码是错误的:

<!--这里是注释     -这里是注释-->
<!--    -这里是注释     -这里是注释    --->

用等号或者空格替换内部的虚线,这样是正确的

<!--这里是注释============这里是注释-->

IE条件注释(IE10已不支持条件注释)

<!-- [if IE]>
这里只有ie浏览器才可以显示
<![endif]-->

<!-- [if !IE]>
这里只有非ie浏览器才可以显示
<! <![endif]-->

<!--[if IE 6]>
这里只有ie6浏览器才可以显示
<![endif]-->

<!--[if lt IE 9]>
这里只有ie9以下浏览器才可以显示
<![endif]-->

<!--[if lte IE 8]>
这里只有ie8以及ie8以下浏览器才可以显示
<![endif]-->

脚本中文转unicode

为防止外链脚本未申明正确编码导致乱码的问题,脚本中如用到中文,必须转为unicode码

/* 不推荐 */
document.write("关于腾讯游戏")
/* 推荐 */
document.write("\u5173\u4e8e\u817e\u8baf\u6e38\u620f")

去掉类型属性

不要为CSS、JS使用类型属性,特别说明类型(type)属性是多余的,在HTML5中默认已包含

<!--不推荐-->
<link href="../css/comm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--mce:0--></script>
<script src="common.js" type="text/javascript">
<!--推荐-->
<link href="../css/comm.css" rel="stylesheet" />
<script type="text/javascript"><!--mce:1--></script>
<script src="common.js">

去掉自闭合元素'/'闭合符

为半闭合元素加上'/'闭合符是没必要的,申明为html5的doctype后,所有浏览器都会正确处理,常见的半闭合元素:img input hr br

<!--不推荐-->
<br /><hr /><img src="/wiki/" /><input type="text" />
<!--推荐-->
<br ><hr ><img src="/wiki/" ><input type="text" >

对“<”“>”之类的符号进行实体转义

在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)

<!--不推荐-->
<a href="/wiki/">more>></a>
<!--推荐-->
<a href="/wiki/">more&gt;&gt;</a>

元素嵌套规范

段落元素与标题元素只能嵌套内联元素

<!--不推荐-->
<a><p> </p><div></div><p> </p></a>  <h2><div></div></h2>
<!--推荐-->
<p><span><span> </span></span></p>
<h2><span> </span></h2>

CSS规范

命名规范

使用类选择器,尽量避免使用ID选择器定义样式

ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用。

以字母开头

  • 必须以字母开头命名选择器,这样可保证在所有浏览器下都能兼容;
  • 不允许单个字母的类选择器出现;
  • 不允许命名带有广告等英文的单词,例如ad,adv,adver,advertising,已防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。

全小写,并使用 ' - ' 连字符

  • 下划线 ' _ ' 禁止出现在class命名中,统一使用'-'连字符
  • 禁止驼峰式命名

命名应简约而不失语义

  • 避免过度简写,.ico足够表示这是一个图标,而.i不代表任何意思
  • 使用有意义的名称,使用结构化或者作用目标相关的,而不是抽象的名称

文件命名举列

基本样式:base.css框架布局:layout.css模块样式:module.css全局样式:global.css字体样式:font.css首页样式:index.css 链接样式:link.css打印样式:print.css

常用类/ID命名举列

常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。 部分命名解释约定: 整页.wp 页眉.header 页脚.footer 导航.nav 主体内容.main侧边栏.side 标志.logo搜索.search登录.login注册.reg标题.tit-...副标题.subtit-... 按钮.btn-...链接.link-... 背景图片.bg-...列表.list-... 表格.tb-...标签.tag-... 视频.video-...联系.contact

Reset参考

注意! 使用时,按需配置,去除冗余

精简版(适用于一般的游戏类官网、专题)

body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,input,select,textarea,div,table,td,th,tr,dt,dd,dl{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
ul,ol{list-style:none;}
strong,b{font-weight:normal;}
em,i{font-style:normal;}
table{border-spacing:0;border-collapse:collapse;}
img{border:0;vertical-align:middle;}
input,select{vertical-align:middle;font-size:100%;line-height:150%;font-family:arial,'\5FAE\8F6F\96C5\9ED1',sans-serif;-webkit-appearance:none;}
a{text-decoration:none;outline:none;hide-focus:expression(this.hideFocus=true);background-color:transparent;-webkit-tap-highlight-color:transparent;}
body{min-width:1000px;font:14px/1.5 arial,"\5FAE\8F6F\96C5\9ED1",sans-serif;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}

通用版(基本适用于所有的页面)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}

通用版(支持html5)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
table{border-collapse:collapse;border-spacing:0}
audio,canvas,video { display: inline-block;*display: inline;*zoom: 1;}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}

代码风格

使用4个空格做为缩进,部分内容为可选

css属性值需要用到引号时,统一使用单引号

/* 不推荐 */
selectors{ font-family:"\5FAE\8F6F\96C5\9ED1";}
/* 推荐 */
selectors{ font-family:'\5FAE\8F6F\96C5\9ED1';}

为单个css选择器或新申明开启新行

/* 不推荐 */
.home-count .hd,.content-title,.select-game-title .title{}.nav{}
/* 推荐 */
.home-count .hd,
.content-title,
.select-game-title .title{}
.nav{}

css属性书写顺序

建议遵循:布局定位属性 自身属性 文本属性 其他属性 CSS3属性 mozilla官方属性顺序推荐

/*  这些属性只是最常用到的, 并不代表全部 */
/* 布局定位属性 */
display / list-style / position(相应的 top,right,bottom,left) / float / clear  / visibility / overflow
/* 自身属性 */
width / height / margin / padding / border / background
/* 文本属性 */
color / font / text-decoration / text-align / vertical-align / white- space / break-word
/* 其他(CSS3)  */
content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

css浏览器私有前缀书写格式

私有在前,标准在后。先写带有浏览器私有标志的,后写W3C标准的。

selectors{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eff2f4));
    background: -webkit-linear-gradient(top, #ffffff 0%,#eff2f4 100%);
    background: -moz-linear-gradient(top, #ffffff 0%, #eff2f4 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#eff2f4 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#eff2f4 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#eff2f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eff2f4',GradientType=0 );
}

不要以没有语义的标签作为选择器

这会造成大面积污染,除非你可以断定现在或将来你的这个选择器不会污染其他同类

/* 推荐 */
.m-xxx div{ ... }

css单行书写法(根据个人习惯选择)

每个CSS选择符的主申明区中的属性在同一行内书写,每个属性之间空一格

selectors{ height: 30px; padding-bottom: 10px; border-bottom: 1px solid #858585; margin-bottom: 10px; }

css多行书写法(根据个人习惯选择)

每个CSS选择符的主申明区中的每一条属性新起一行

selectors{
height: 30px;
padding-bottom: 10px;
border-bottom: 1px solid #858585;
margin-bottom: 10px;
}

用CSS控制交互或视觉的变化,JS只需要增减className

  • 利用CSS一次性更改多个节点样式,避免多次渲染,提高渲染效率。
  • 需要在结构中注释此类交互。

注释

行间注释

直接写于属性值后面,如:

.search{background: #333 url(../img/search.gif) no-repeat;/*定义搜索框的背景*/}

整段注释

分别在开始及结束地方加入注释,如:

/*=====搜索条=====*/
.search {background: #333 url(../img/search.gif) no-repeat;}
/*=====搜索条结束=====*/

注意:以下写法不可取

.news/* 这里是高度自动撑 */ {line-height:1.5}
.news {/*line-height:1.5 这里是高度自动撑 */}

理由很简单,注释是ie6的hack方法之一,所以这样写容易让ie6误解。 提示 :尽量不要使用中文注释,无论是html也好 css js也罢,因为会导致神奇的IE6出现无法预测的问题。尽量使用简单的英文,拼音也好。在版本发布的时候,尽量剔除注释内容,尽可能的减少文件的字节数。

Hack

原则上不允许使用Hack - 很多不兼容问题可以通过改变方法和思路来解决,并非一定需要Hack,根据经验你完全可以绕过某些兼容问题。 - 一种合理的结构和合理的样式,是极少会碰到兼容问题的。 -由于浏览器自身缺陷,我们无法避开的时候,可以允许使用适当的Hack。

统一Hack方法

.element{
color:#000;             /*w3c标准*/
[;color:#f00;];         /*Webkit(chrome和safari)*/
color:#666\9;           /*IE8*/
*color:#999;            /*IE7*/
_color:#333;            /*IE6*/
}
:root .element{color:#0f0\9;}  /*IE9*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (
-webkit-min-device-pixel-ratio:0) { .element{color:#336699;}}  /*opera*/
@-moz-document url-prefix(){ .element{color:#f1f1f1;}} /*Firefox*/

简写css颜色属性值

/* 不推荐 */
selectors{ color:#000000; background-color:#ddeeff;}
/* 推荐 */
selectors{ color:#000; background-color:#def;}

删除css属性值为0的单位

0就是0,任何单位都不需要w3c关于属性单位的说明

/* 不推荐 */
selectors{ margin:0px; padding:0px;}
/* 推荐 */
selectors{ margin:0; padding:0;}

删除无用CSS样式

第一,删除无用的样式后可以缩减样式文件的体积,加快资源下载速度;第二,对于浏览器而言,所有的样式规则的都会被解析后索引起来,即使是当前页面无匹配的规则。移除无匹配的规则,减少索引项,加快浏览器查找速度;

 /* 不推荐 */
selectors{ font-size:12px;}
.nav{}
.nav-item{ height:20px;}
/* 推荐 */
selectors{ font-size:12px;}
.nav-item{ height:20px;}

JS规范

页面中书写到js时请务必参考本规范 Javascript是控制用户与页面交互、前端与后台数据交互的重要工具,在我们的日常工作中应用非常广泛。为了有效提高代码的质量,基于“易维护、易调试、高性能”的原则,参考业界知名团队的规范与指南制订本规范,大家在编写JavaScript代码时,应尽量遵守本规范,提高自己的代码质量。

命名

Javascript是区分大小写的语言,在对Javascript种的变量、函数、常量等命名时,应该遵循Javascript自身采用的命名规则,以保持代码的一致性。具体规则如下:

常量:

Javascript自身不支持常量,在程序中如果要定义“禁止定义后改变”的变量,可以参考其他编程语言,采用下划线分隔的全大写字符串来定义。例如:PAGEBASECOLOR、COOKIR_PREFIX等。

变量:

首字母小写,驼峰命名法,原则上采用名词及名词短语,描述该变量代表的数据。例如:videoId、userLevel、linkToHome、btnDown、totalPages

函数:

首字母小写、驼峰命名法,原则上函数采用动词及动词短语,以描述该函数的行为,对象采用名词及名词词组。例如:login()、checkLogin()、showVideo()、switchTabs()、changeLevel()、addClass()、loadScript()

类及命名空间:

首字母大写、驼峰命名法。例如:LoginManager、Dialog、LazyLoader、FlashManager

文件名:

全小写、单词间可以不分隔或用连接线"-"分隔,文件名可以加.min/.debug表示文件状态,例如:common.js(一般的文件名)、milo.min.js(压缩后的文件)、common.debug.js(未压缩、调试用的文件)。

可读性:

在未做压缩处理的源代码中,类、变量、函数的命名应该尽量具有语义,应当避免“a”、“b”、“yy”这类无意义的命名(循环语句中的i/j/k等习惯用法除外)。代码的压缩,应该采用专门的工具(如YUI Compressor、Google Closure)来进行,不要人为用无意义的命名来减少代码量。

变量的定义和初始化

Javascript并不强调变量在使用前必须定义。但是如果没有使用var关键字来定义变量,则该变量将会成为全局变量。有可能会造成对同名全局变量的覆盖,在多人协作开发、引入多个库或多个js文件的情况下,容易导致变量名冲突等问题。因此,对变量的定义和初始化建议参照以下规则: 总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改(i.e. 第三方库,window 引用,被覆盖的未定义的关键字等等)。

不推荐:

var x = 10,
    y = 100;

// Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
// will be stored in the window object. This is very unclean and needs to be avoided.
console.log(window.x + ' ' + window.y);

推荐:

// We declare a IIFE and pass parameters into the function that we will use from the global space
(function(log, w, undefined){
  'use strict';

  var x = 10,
      y = 100;

  // Will output 'true true'
  log((w.x === undefined) + ' ' + (w.y === undefined));

}(window.console.log, window));

虽然Javascript是一门弱类型语言,变量的数据类型可以随时自由转换,但是在实际使用中,依然建议大家避免用同一个变量存储不同类型的数据。 在定义变量的同时对其初始化是很好的编程实践,这可以避免后续忘记给变量赋值而直接使用它引发的"undefined"错误。

代码格式

大括号

前大括号始终位于当前行末尾,后大括号新起一行并与代码块的首行保持相同缩进对齐,数组和对象的快速定义可以例外。例如 _数组和对象的快速定义:

var arr = [1, 2, 3];
var obj = {a: 1, b: 2, c: 3};

_数组初始化:

this.rows_ = [
  '"Slartibartfast" ',
  '"Zaphod Beeblebrox" ',
  '"Ford Prefect" ',
  '"Arthur Dent" ',
  '"Marvin the Paranoid Android" ',
  'the.mice@magrathea.com'
];

_函数调用中:

tvp.play('u1134234422','mod_player', {
  autoplay: '1',
  width: 600,
  height: 449,
  controls: '1'
});
];

_函数定义:

function functionName() {
    // function codes
}

_代码块:

if (condition == true) {
    // do something
} else {
    // do something else
}

for(var i = 0; i < data.length; i++) {
    // loop body
}
/* 不推荐 */
if(event.target)
    return event.target;
else
    return event.srcElement;
/* 推荐 */
if(event.target) {
    return event.target;
} else {
    return event.srcElement;
}

注:对于代码块,始终用大括号包裹,对于单行判断、while循环等可以省略大括号的,一律不省略。 ###引号 在处理字符串时,优先使用单引号,仅在必须的情况下才使用双引号。这不仅能保持代码的一致性、缩小代码文件大小,在创建包含HTML代码的字符串时,这尤其有利,例如:

var msg = '<li class="msg">这是一条信息</li>';

分号

所有的语句必须用分号结尾所有的代码块不得使用分号结尾

/* 不推荐 */

// 例1.
MyClass.prototype.myMethod = function() {
  return 42;
}  // 缺少分号

(function() {
  // some code
})();

// 例2.
var x = {
  'i': 1,
  'j': 2
}  // 缺少分号

[normalVersion, ffVersion][isIE]();

// 例3.
var THINGS_TO_EAT = [apples, oysters, sprayOnCheese]  // 缺少分号.

-1 == resultOfOperation() || die();

这样写会造成什么后果? 例1:JavaScript 错误 - 首先,原本是定义一个返回42的函数,变成了立即执行,并且把第二个函数当成了调用第一个函数的参数,然后42这个数字被当成一个函数返回并被调用,引发了错误。 例2:你最有可能看到的是代码执行的时候报“no such property in undefined”的错误,因为它会尝试执行x[ffVersion]isIE,而x[ffVersion]是未定义的。 例3:函数die()只有在resultOfOperation()的结果不为数字的时候才会被执行(预期是不为-1就执行),而THINGSTOEAT则被赋值为die()的执行结果(原本应该是个数组)。 为什么会这样呢? JavaScript要求语句以分号结束,除非解析器可以安全地分析出语句在哪里结束(例如定义函数时结尾的大括号)。在上面的错误范例中,由于函数定义、对象或数组被用在了语句当中,于是结束括号并不足以标识出语句的结尾。于是当下一个标识符可以作为语句的中间部分时(比如例子的中前括号、前中括号、-1等)JavaScript解析器就不会在我们预期的地方结束语句。 因此,不要试图依赖JavaScript解析器来为你“断句”,务必在需要结束语句的地方使用分号明确指出该语句已经结束。

/* 推荐 */

var foo = function() {
  return true;
};  // 正确的结束分号.

function foo() {
  return true;
}  // 这里不要加分号.

if (condition) {
    // do something.
}  // 这里不要加分号

milo.addEvent(g('domId'), 'click', function(){
    // do something
}); // 正确的结束分号

(function(){
    function clickHandler(hotTag) {
        pgvSendClick({hottag:hotTag});
    }  // 这里不要分号
    var btn = document.getElementById('btnDown');
    btnDown.innerHTML = '下载';
    btnDown.click = function() {
      clickHandler('index.btnDown.client.xf');
    };  // 正确的结束分号
})();  // 正确的结束分号

注释

对代码中的类、方法、属性、复杂的实现逻辑等,应该加上必要的注释。注释的格式参照JSDoc语法。常见的注释范例:

/**
 * 这是一段常规注释,不包含调用参数和返回值
 */
 function doSomething() {
     alert('hello');
 }

/**
 * 这是一个有调用参数和返回值的函数
 * 注释里要用@param和@return分别标注参数和返回值
 *
 * @param {number} idx 每次执行时当前元素在数组中的索引
 * @param {object} dom 当前循环到的元素
 * @return {string} 每次循环时返回当前元素的id
 */
 $.each = function(idx, dom) {
     if(dom = this[idx]) {
         return dom.id;
     } else {
         return '';
     }
 };

技巧和实践

eval 函数(魔鬼)

eval()不但混淆语境还很危险,总会有比这更好、更清晰、更安全的另一种方案来写你的代码,因此尽量不要使用 evil 函数。

this 关键字

只在对象构造器、方法和在设定的闭包中使用this 关键字。 this的语义在此有些误导。它时而指向全局对象(大多数时),时而指向调用者的定义域(在 eval 中),时而指向 DOM 树中的某一节点(当用事件处理绑定到 HTML 属性上时),时而指向一个新创建的对象(在构造器中),还时而指向其它的一些对象(如果函数被 call()apply() 执行和调用时)。

正因为它是如此容易地被搞错,请限制它的使用场景:

  • 在构造函数中
  • 在对象的方法中(包括由此创建出的闭包内)

True和False :布尔值表达式

以下用作布尔表达式时均为False:

null
undefined
''  // 空字符串
0   // 数字0

但同时要注意,以下在布尔表达式中始终为True:

'0' // 字符串'0'
[]  // 空数组
{}  // 空对象

基于以上结论,我们可以把下面的代码:

if(x != null)

精简为:

if(x)

同样,如果你想判断一个变量既不为null,也不是空字符串的话,不必用:

if (x != null && x != '')

只需要:

if (x)

即可。 注意,有一些很容易搞错的布尔表达式。以下列举出一部分:

Boolean('0') == true
'0' != true
0 != null
0 == [] //特别注意,0 == false, [] == true, 但是 0 == []
0 == false
Boolean(null) == false // 这个也要特别注意
null != true
null != false
Boolean(undefined) == false
undefined != true
undefined != false
Boolean([]) == true
[] != true
[] == false
Boolean({}) == true
{} != true
{} != false
NaN != true
NaN != false
Boolean(NaN) == false

这里很容易混淆,最好自己多实践一下。能用if(x)来判断的,不一定能用if(x == true)来判断。 ###三目运算符 对于下面这种简单的true返回a,false返回b的判断:

if(condition) {
    return a;
} else {
    return b;
}

可以采用三目运算符简写为:

return (condition) ? a : b;

在生成HTML时,这种表达方式尤其有用:

var cls = isFocused ? 'class="chk-focus"' : '';
var checkbox = '<input type="checkbox" />'

逻辑运算符

由逻辑与(&&)和逻辑或(||)运算符连接的表达式会从左到右依次执行,直到遇到满足条件为止,因此逻辑或(||)运算符也可以当作默认值运算符来用。比如:

function doSomething(jQuery) {
    var $;
    if (jQuery) {
        $ = jQuery;
    } else {
        $ = window.jQuery;
    }
    // other code
}

可以简写为:

function doSomething(jQuery) {
    var $ = jQuery || window.jQuery;
}

逻辑与(&&)也可以做类似的使用(当满足左边条件时执行右边的语句)。比如

if('function' == typeof pgvMain) {
    pgvMain();
}

可以简写为:

'function' == typeof pgvMain && pgvMain();

节点遍历操作

我们经常有类似这样的操作:获取一组节点,然后对这个节点数组(节点列表)进行遍历。通常代码是这样的:

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  doSomething(divs[i]);
}

这样的操作,假如获取节点长度(divs.length)的复杂度是O(n),获取某个子节点的复杂度也是O(n),则由于每次要计算节点长度,因而遍历一遍所有节点,这个算法的时间复杂度就为O(n^2)。用以下方法可降低时间复杂度:

var divs = document.getElementsByTagName('div');
var size = divs.length;
for (var i = 0; i < size; i++) {
    doSomething(divs[i]);
}

这里先把节点长度存到一个局部变量中,以后每次循环不再计算节点长度,因此总的时间复杂度变为了O(n) + 1; 还可以用另一种方法

var divs = document.getElementsByTagName('div');
for (var i = 0, div; div = divs[i]; i++) {
    doSomething(div);
}

这种算法由于完全不检查节点长度,只是每次循环的时候取出一个子节点,因此时间复杂度降低到了O(n)。

重构规范

EDM规范

本指南从格式编码、文字、图片、链接以及发布五个方面给出指引,请按照本指南制作您的EDM邮件模板。

格式编码:
  • 写上xhtml 的DOCTYPE声明
  • html编码请使用utf-8
  • 页面宽度请设定在600到800px(像素)以内(考虑到主流显示器分辨率和邮件界面的侧栏),重要信息放在300-500px高度以内
  • HTML代码在15kb以内(各个邮箱的收件标准不一样,如果超出15kb您的邮件很有可能会进入垃圾邮件箱)
  • 请使用table表格来布局;通过嵌套table来实现分列,避免使用colspan/rowspan;给你的单元格指定宽度
  • 若使邮件网页在邮箱里居中显示,请在table里设定align=”center”
  • 不可将word类文件直接转换为html格式
  • 不要使用Flash、Java、Javascript、iframe、ActiveX、CSS滤镜,如onmouseover等,将会被过滤;如果页面中的图片一定要是动态的,请将FLASH文件转换成GIF动画使用,但在Outlook 2007/2010里,GIF将不能正常显示
  • 不要使用外链的css样式(包括页面中的 <style></style> )定义文字和图片,正确的写法:文字”
  • 一些老旧的邮箱对style支持也不是很好(主流邮箱没有这个问题),可以使用标签的属性来代替style属性。例如,可以使用bgcolor=”#ffffff”来代替style=”background:#ffffff”;
  • 不要缩写css属性,例如,应该使用padding-top:10px;padding-right:5px;padding-bottom:10px;padding-left:5px;来代替padding:10px 5px;
  • 不要缩写hex格式的颜色值。例如,应该使用#ffffff来代替#fff
  • 尽量不要使用背景图片,各大邮箱服务提供商对背景图片显示处理不一致,特殊情况需要写的话,建议用table属性background来写,如下:,但请注意,outlook 对背景图片不识别。 对CSS的支持程度,参考:http://www.campaignmonitor.com/css/
  • 避免使用div/p/h1/h2/h3…等标签,涉及到reset问题
  • 空td标签里面请写上  (注意不是一个英文空格)
文字:
  • 页头请尽量加入提示文字,如:“您之所以收到这封邮件,是因为…”
  • 页尾请尽量加入收尾文字,也可以加上一些导航链接,如:“商品价格如有调整,请以xxx为准”、“如果您有其他任何建议和意见,请点击这里反馈”、“xxx祝您工作顺利、生活愉快”、“如果您不希望收到此类邮件,请点击此处取消订阅”
  • 邮件主题字数避免过多(通常控制在18个字以内);避免使用――!……等特殊符号,容易产生乱码;避免使用很多个感叹号;如果为英文主题,避免使用主题全部为大写字母
  • 邮件主题和内容都不要加入带有网站地址的信息, 如果客户的品牌知名度比较高,主题上可加入一下公司的名称,比如:“NIKE运动时尚”
  • 文字内容、版面尽量简洁,突出主题,以达到更高的点击率
  • 不使用类似如下敏感及带促销类的文字:免费、优惠、特惠、特价、低价、便宜、廉价、视频、赚钱、群发、发财、致富、代开、薪水、交友、支付、商机、法宝、宝典、秘密、情报、机密、保密、绝密、神秘、秘诀等。如果一定需要,请把敏感字制做成图片
  • 如果发送超过20万封,主题内容要更换,发送超过200万封,要考虑重新设计。否则可能被邮件服务提供商列入黑名单
  • 在同一个主题内容的邮件,可以通过加入混淆代码的方式,来使其代码在邮件服务提供商看来是一封“全新”和“不同”的邮件
图片:
  • 需要特殊字体效果的请使用图片,以避免文字在各个主流邮箱中的显示有所不同
  • 写上alt属性,尽管不同的邮件服务提供商对在图像加载失败时候的处理方式不一样。但是应该注意避免因为alt值里面的敏感文字而被判定为垃圾邮件
  • 所有的图片都要指定宽和高。例如:”"
  • 为了消除图片之间的间距可以使用align=”top”,消除默认的border可以使用border=”0″
  • 图片数量避免过多,尽量压缩图片大小
  • 图片名称不能含有ad字符,否则容易被判定为广告
  • 使用较短和更有意义的图片名称,否则容易判定为垃圾邮件,例如campaign_054_design_0x0_v6_email-link.gif与email.gif
  • 如果整个邮件模板只有一张图,一定要裁成2-3张小图,并适当保留一些文字(只有图片的邮件容易被判定为垃圾邮件)
  • 为避免用户收到的邮件图片无法浏览,请制作一份和邮件内容一样的web页面,然后在邮件顶部写一句话:“如果您无法查看邮件内容,请点击这里”, 链接到放有同样内容的web页面
链接:
  • 链接数量避免过多,如果所有图片的链接地址一样,请将所有的小图合并成一张大图
  • 链接地址的长度不能超过255个字符,中间不要包含空格
  • 不要使用地图功能(map)链接图片,此功能会使邮件被多数邮箱划
  • 文字中出现网站地址链接被屏蔽为垃圾邮件的风险是极高的,建议写成文字加链接,或是将网址做成图片加链接。
  • 文字链接的颜色会被一些邮件服务提供商重置为默认的蓝色,为了避免这个问题,在a标签里面多嵌套一层,并设置为同样的颜色,例如:<span style="&rdquo;color: #0000000;">文字</span>
发布:

为确保收信人在点击链接时能够正常浏览您的内容,发布时,还要进行下列处理:

  • 将所有图片地址换成绝对路径,写法应该是:
    <img width="”10″" height="”10″" src="”http://…../images" alt="”"" />
    
  • 链接请写成绝对地址。

顶部条

游戏官网以及活动专题页都必须添加 --> 查看详情  |  去复制代码

底部 FOOT

活动专题页都必须添加统一FOOT --> 查看详情  |  去复制代码

游戏官网会有独立的底部FOOT,以天涯明月刀官网FOOT举例

点击流代码

所有页都必须添加统计代码 --> 查看详情  |  去复制代码
统计页面中指定按钮的点击量方法如下:

<a target="_blank" onclick="pgvSendClick({hottag:'A.B.C.D'});" href="###">点击按钮</a>
<!-- 
A:专题名称(专题页目录地址,如果是官网可以自定义名称)
B:页面名称(自定义名称)
C:按钮分组名称(可以按照位置、类型等命名)
D:按钮名称(自定义名称)
举例:onclick="pgvSendClick({hottag:'a20150827zfxy.index.btn.enter'});"
-->

TA统计代码

建议只在游戏官网中添加(请优先于点击流统计代码之前加载)。开通地址,开通后如下加入代码即可  |  去复制代码

//页面中引入下方的js,sId为当前项目被分配的ID
http://tajs.qq.com/stats?sId=xxxxxx