乔布斯说：“活着就是为了改变世界，难道还有其它原因吗？” 20##年，在Web前端开发界，无论国外还是国内，都发生了不少事情，有哪些是改变世界或即将改变世界的大事件呢？
JavaScript游戏
20##年4月9日，Dion Almaer发现了一款非常经典的JavaScript游戏：Super Mario. 这款游戏由Jacob Seidelin开发，大小仅14k.
(Super Mario JavaScript版本： http://jsmario.com.ar/)
不少Web开发者们大跌眼镜：这真的是用JavaScript开发出来的？答案是肯定的。这款游戏利用了Canvas元素（IE中用HTML模拟），图像存储在加密的字符串中，还用base64存储了MIDI背景音乐。除了这些技巧，其它代码就是我们熟悉的HTML、CSS和JavaScript.
Super Mario JavaScript版本的横空出世（之前也出现过用JavaScript写的游戏，但没有像Super Mario一样引起大家的关注），激起了一股用JavaScript编写游戏的热潮：
许多经典的游戏都有了JavaScript版本：Pac-Man（经典的吃豆子游戏）， Space Invaders（太空入侵者），Spacius（百玩不厌的雷电）等等。
甚至还出现了一些比较复杂的角色扮演游戏：Andrew Wooldridge创造的Tombs of Asciiroth 和 CanvasQuest，Pierre Chassaing创造的ProtoRPG等。
伴随JavaScript游戏的热潮，还出现了不少专门用于游戏开发的JavaScript库。最突出的是GameJS（基于Canvas的一个2D游戏开发库） 和 GameQuery（这是jQuery的一个插件）。
除了用Canvas构建2D游戏，用JavaScript还可以构建3D游戏，还出现了非常出色的Processing.js，以及JavaScript PlotTool绘图工具等等。
感慨：JavaScript游戏一段时间内将还只是开发者们的“玩物”，要真正转换为商业应用，可能还有一段漫长的路要走。但是，当Super Mario跳跃在Web网页上时，这昭示着JavaScript的时代已经到来了。JavaScript能做什么？20##年的答案是：JavaScript连游戏都能做！
大放异彩的jQuery
20##年，无论对于jQuery的作者John Resig还是jQuery库本身来说，都是非常棒的一年。jQuery首页上有一行很明显的加粗文字：
jQuery is designed to change the way that you write JavaScript.
jQuery设计成可以改变你书写JavaScript的方式。
jQuery用数据和事实证明了它的魅力。一定程度上，甚至可以毫不夸张地说：jQuery改变了Web前端开发界。下面是用Google Trends统计的常用JavaScript库在20##年的搜索量曲线图：
20##年9月份，jQuery团队战绩斐然：Microsoft和Nokia正式将jQuery集成进他们的应用程序开发平台。此外，Google的部分应用里，也早就采纳了jQuery. 从jQuery的首页上还可以看出，DELL, Bank of America, Digg, Technorati, Mozzila等站点都在使用jQuery.
当然，除了jQuery，其它JavaScript在20##年也都有可圈可点的发展。YUI3的Preview版本，是我见过的最具有发展潜力的框架。ExtJS在国内的普及也非常迅猛，JavaEye社区里，ExtJS一定程度上成了Ajax的代名词，各种有关ExtJS的技术文章和书籍非常多（遗憾的是书籍的质量不高）。Prototype不温不火。Mootools则在低调中用其优雅的代码吸引了不少忠实用户。
感慨：上面提到的每个JavaScript库都是非常优秀的，掌握任何一个，对于我们的日常工作来说，都绰绰有余了。只是对于 20##年来说，jQuery的表现太突出了，连我这个天天工作用YUI的人，在20##年，都不得不为jQuery鼓掌，为John Resig喝彩！各种JavaScript库的争奇斗艳，这是JavaScript时代已经到来的另一个标志。
蹒跚起步的网页工业化
20##年，如果你是一名Web前端开发工程师，却没有听说过“栅格”两个字，那你一定是工作太忙太专心了。20##年10月份，在淘宝UED博客，出现了一篇“960的秘密”，揭开了网页栅格系统在国内的研究小热潮。
伴随着栅格系统的争论，国内的前端技术博客里还出现不少对CSS框架和布局的探讨。这一切，所要解决的是以下两个问题：
- 网页的规范性。随着站点的成长，页面会以几何级数的速度增加。面对成千上万个网页，如何保持风格的一致性是一个不小的挑战。
- 网页的工业化产出。在遵守规范和保证质量的基础上，如何让页面制作容易，如何让运营人员能批量制造页面，这是目前许多大型站点面临的另一个问题。
国内站点中，淘宝、百度有啊、网易等站点的已逐步采用栅格系统。淘宝的首页和频道目前已经全部栅格化，同时尝试性开发了TMS（模板管理系统）来解决网页的工业化产出问题。
感慨：网页的高质量工业化产出，在国内很多公司才刚起步。20##年，我相信工业化将依旧是Web前端开发界的关键词。
这些也很出色
- 渐进增强。20##年10月份，Aaron Gustafson在ALA网站上发表了一系列有关渐进增强的文章，探讨的核心问题是：JavaScript应该做什么以及Web前端开发的技术流程。 JavaScript游戏让我们看到了JavaScript的魔力，Aaron提醒我们不能滥用JavaScript，我们要仔细考虑 JavaScript的使用场景。可用性，无侵入性，可访问性等等，这些理念是每一个前端开发工程师需要好好思考的。
- D2（前端技术论坛）。 20##年，在北京和上海分别举办了两届D2，这是国内前端开发工程师们的两场盛会。前端工程师，这个新生的职位逐步被国内各大公司接受。D2的意义在于，我们聚集在一起，发出了自己的声音！
- Google Chrome的诞生。 20##年，Chrome， JS V8引擎，Google迫使各大浏览器厂商开始比拼JavaScript引擎速度，这是JavaScript时代已经到来的另一个标志。Google和 Mozzila的努力，在年末的时候带来鼓舞人心的统计结果：IE的使用率跌破70%. 万恶的IE6，早点灭亡吧。20##年，Google的号角和淘宝网即将掀起的 NO IE6 活动，将加速IE6的灭亡。
最后，用两句话来结束本文：
20##年，我们努力改变世界！
20##年，我们继续改变世界，同时世界将开始为我们而改变！
第二篇：Web前端开发规范
Web前端开发规范
南京业禾网络科技有限公司 内部文档·注意保密 规范目的
为输出高质量的Web页面，提高团队协作效率，便于后台人员添加功能及前端后期优化与维护，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台Web页面开发。文档中如有错误或不当之处，由前端开发人员提出，经开发小组讨论决定后方可更改。
基本准则
符合W3C（万维网联盟）定义的Web标准，包括结构标准HTML、表现语言标准CSS、行为标准DOM和ECMAScript，必须通过W3C的HTML和CSS标准验证，网址为：
MarkUp Validator: /
CSS Validator: /css-validator/
总体要求为：语义化HTML，结构表现与行为分离，浏览器兼容性优良，代码简洁明了有序，性能上尽可能减小服务器负载，保证最快的解析速度。
黄金定律
不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。尽量遵循标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签和元素并保持最小的复杂度。
文件规范
1、html，css，js，images,fonts等文件目录组织如下如示： ├── xxx.html
├── css/
│ ├── xxx.css
│ ├── xxx.min.css
- 1 -
南京业禾网络科技有限公司 内部文档·注意保密
│ └── images/
│ │ ├── xxx.jpg
│ │ └── xxx.png
├── js/
│ ├── xxx.js
│ ├── xxx.min.js
└── images/
│ ├── xxx.jpg
│ └── xxx.png
└── fonts/
└── xxx.ttf
文件命名原则调整为所有字母小写，单词之间使用破折号（-）相连，压缩后的文件在原文件名（除扩展名）后添加.min。参考bootstrap文件命名：bootstrap-theme.css, bootstrap-theme.min.css。
HTML书写规范
语法
? 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方
法。
? 嵌套元素应当缩进一次（即两个空格）。
? 对于属性的定义，确保全部使用双引号，绝不要使用单引号。
? 不要在自闭和（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是
可选的。
? 不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
- 2 -
南京业禾网络科技有限公司 内部文档·注意保密 HTML5 doctype
为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。 <!DOCTYPE html>
<html>
<head>
</head>
</html>
语言属性
根据 HTML5 规范：强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。
<html lang="en-us">
<!-- ... -->
</html>
中文使用zh，中文简体为zh-cn。
IE 兼容模式
IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
<head>
<meta charset="UTF-8">
</head>
- 3 -
南京业禾网络科技有限公司 内部文档·注意保密 引入 CSS 和 JavaScript 文件
根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type属性，因为 text/css 和 text/javascript 分别是它们的默认值。 <!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>
属性顺序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
? class
? id, name
? data-*
? src, for, type, href
? title, alt
? aria-*, role
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。
<a class="..." id="..." data-modal="toggle" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">
布尔（boolean）型属性
布尔型属性可以在声明时不赋值。
<input type="text" disabled>
- 4 -
南京业禾网络科技有限公司 内部文档·注意保密
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
减少标签的数量
编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。 <!-- Not so great -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
JavaScript 生成的标签
通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。
其他要求
? css文件外链至<head></head>之间，js文件置于</body>之前。
? 语义化HTML，如标题根据重要性用h*(同一页面只能有一个h1)，段落标记用p，列表
用ul，内联元素中避免嵌套块级元素。
? 书写链接地址时，建议在URL地址后面加上"/"，例如：href="http://proin.cc/"。 ? 在页面中不能使用style属性，即style="…"；所有样式必须写在css文件中。 ? 必须为含有描述性表单元素(input，textarea)添加label，如：
<p>姓名:<input type="text" id="name" name="name" /></p>须写成：
<p><label for="name">姓名：</label><input type="text" id="name" /></p> ? 能以背景形式呈现的图片，尽量写入css样式中。
? 给重要的元素和截断的元素加上title。
? 建议给区块代码及重要功能（比如循环）加上注释，方便后台添加功能。
? 不是标签一部分的特殊符号都用编码表示，出现在内容中的特殊符号都需要用编码形式
- 5 -
南京业禾网络科技有限公司 内部文档·注意保密
表现出来，如：<：<，>：>，&）：&，"："，尽量使用 代替空格。 ? 图片标签必须要有alt属性，如只起修饰作用而没有任何意义的图片可设置alt属性
值为空。如：<img src="a.gif" alt="">。
CSS书写规范
语法
? 使用两个空格的 soft tabs — 这是保证代码在各种环境下显示一致的唯一方式。 ? 使用组合选择器时，保持每个独立的选择器占用一行。
? 为了代码的易读性，在每个声明的左括号前增加一个空格。
? 声明块的右括号应该另起一行。
? 每条声明 : 后应该插入一个空格。
? 每条声明应该只占用一行来保证错误报告更加准确。
? 所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你
的代码会更容易出错。
? 逗号分隔的取值，都应该在逗号之后增加一个空格。
? 不要在颜色值 rgb() 和 rgba() 中增加空格，并且不要带有取值前面不必要的 0 (比
如，使用 .5 替代 0.5)。
? 所有的十六进制值都应该使用小写字母，例如 #fff。因为小写字母有更多样的外形，
在浏览文档时，他们能够更轻松的被区分开来。
? 尽可能使用短的十六进制数值，例如使用 #fff 替代#ffffff。
? 为选择器中得属性取值添加引号，例如input[type="text"]。 他们只在某些情况下
可有可无，所以都使用引号可以增加一致性。
? 不要为 0 指明单位，比如使用 margin: 0; 而不是 margin: 0px;。
? 对这里提到的规则可参考 Wikipedia 中的。 /* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF
- 6 -
南京业禾网络科技有限公司 内部文档·注意保密
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin: 0 0 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
声明顺序
相关的属性声明应该以下面的顺序分组处理：
? Positioning 定位
? Box model 盒模型
? Typographic 排版
? Visual 外观
Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。
其他属性只在组件 内部 起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。
关于完整的属性以及他们的顺序，请参考 Recess。 .declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
- 7 -
南京业禾网络科技有限公司 内部文档·注意保密
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
媒体查询位置
尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部。这样做只会让大家以后更容易忘记他们。这里是一个典型的案例。
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
不要使用 @import
与 <link> 相比, @import 更慢，需要额外的页面请求，并且可能引发其他的意想不到的问题。应该避免使用他们，选择其他的方案：
使用多个 <link> 元素
使用 CSS 预处理器例如 Sass 或 Less 将样式编译到一个文件中
使用 Rails, Jekyll, 或者其他环境提供的功能，来合并你的 CSS 文件。
- 8 -
南京业禾网络科技有限公司 内部文档·注意保密
<!-- Use link elements -->
<link rel="stylesheet" href="core.css">
<!-- Avoid @imports -->
<style>
@import url("more.css");
</style>
前缀属性
当使用特定厂商的带有前缀的属性时，通过缩进使取值垂直对齐以便多行编辑。
在 Sublime Text 2 中， 使用 Selection → Add Previous Line (??↑) 和Selection → Add Next Line (??↓)。
/* Prefixed properties */
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
单条声明的声明块
在一个声明块中只包含一条声明的情况下，为了易读性和快速编辑可以考虑移除其中的换行。所有包含多条声明的声明块应该分为多行。
这样做的关键因素是错误检测 - 例如，一个 CSS 验证程序显示你在 183 行有一个语法错误,如果是一个单条声明的行，那就是他了。在多个声明的情况下，你必须为哪里出错了费下脑子。 /* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Multiple declarations, one per line */
.sprite {
display: inline-block;
width: 16px;
height: 15px;
background-image: url(../img/sprite.png);
}
.icon { background-position: 0 0; }
- 9 -
南京业禾网络科技有限公司 内部文档·注意保密
.icon-home { background-position: 0 -20px; }
.icon-account { background-position: 0 -40px; }
属性简写
坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:
? padding
? margin
? font
? background
? border
? border-radius
大多数情况下，我们并不需要设置属性简写中包含的所有值。例如，HTML 头部只设置上下的 margin，所以如果需要，只设置这两个值。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。 /* Bad example */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* Good example */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
LESS 和 SASS 中的嵌套
避免不必要的嵌套。可以进行嵌套，不意味着你应该这样做。只有在需要给父元素增加样式并且同时存在多个子元素时才需要考虑嵌套。
- 10 -
南京业禾网络科技有限公司 内部文档·注意保密
// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// With nesting
.table > thead > tr {
> th { … }
> td { … }
}
代码注释
代码是由人来编写和维护的。保证你的代码是描述性的，包含好的注释，并且容易被他人理解。好的代码注释传达上下文和目标。不要简单地重申组件或者 class 名称。
/* Bad example */
/* Modal header */
.modal-header {
...
}
/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
...
}
Class和Id 命名
? class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。
破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
? Id 名称中只能出现小写字符和下划线（underline）。
? 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
? 名称应当尽可能短，并且意义明确。
? 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式
（presentational）的名称。
? 基于最近的父 class 或基本（base） class 作为新 class 的前缀。
- 11 -
南京业禾网络科技有限公司 内部文档·注意保密 ? 使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS
文件中。
在为 Sass 和 Less 变量命名是也可以参考上面列出的各项规范。 /* Bad example */
.t { ... }
.red { ... }
.header { ... }
/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }
选择器
? 使用 classes 而不是通用元素标签来优化渲染性能。
? 建议避免使用在经常出现的组件中使用一些属性选择器 (例如，[class^="..."])。
浏览器性能会受到这些情况的影响。
? 减少选择器的长度，每个组合选择器选择器的条目应该尽量控制在 3 个以内。 ? 只在必要的情况下使用后代选择器 (例如，没有使用带前缀 classes 的情况)。 /* Bad example */
span { ... }
.page-container
#stream .stream-item .tweet .tweet-header .username { ... } .avatar { ... }
/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
代码组织
? 以组件为单位组织代码。
? 制定一个一致的注释层级结构。
? 使用一致的空白来分割代码块，这样做在查看大的文档时更有优势。
? 当使用多个 CSS 文件时，通过组件而不是页面来区分他们。页面会被重新排列，而组
- 12 -
南京业禾网络科技有限公司 内部文档·注意保密
件移动就可以了。 /*
* Component section heading
*/
.element { ... }
/*
* Component section heading
*
* Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
*/
.element { ... }
/* Contextual sub-component or modifer */
.element-heading { ... }
图片规范
? 图片格式仅限于gif、png、jpg，图标、按钮等采用透明背景为主；除需要透明的图
片使用png、gif外其他图片都采用jpg格式。为尽量控制文件大小，大尺寸图片应避免使用png，尽量使用jpg。
? 命名全部使小写英文字母、数字和破折号（-）的组合，其中不得包含汉字、空格和特
殊字符。尽量使用易懂的词汇，便于团队其他成员理解。如：ad-left.gif、btn-submit.jpg；
? 在保证视觉效果的情况下选择最小的图片格式与图片质量，以减少加载时间。 ? 尽量减少使用半透明的png图片。
- 13 -